아토믹데브_7_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

7강: Flutter 위젯 기초 - Text와 Image 위젯

---

내용 요약

1. Flutter에서 가장 많이 사용되는 기본 UI 위젯 소개:
   • Flutter 위젯은 Flutter 애플리케이션의 모든 UI 요소를 구성하는 기본적인 빌딩 블록입니다.
   • Flutter에서 가장 많이 사용되는 기본 위젯으로는 Text와 Image 위젯이 있습니다. 이 위젯들은 텍스트와 이미지를 화면에 표시하는 데 사용됩니다.
2. Text와 Image 위젯의 사용법:
   • Text 위젯:
     • 텍스트를 화면에 표시하기 위한 위젯입니다. 다양한 스타일을 적용할 수 있으며, 텍스트 정렬, 색상, 폰트 크기 등을 조정할 수 있습니다.
     • 기본적인 사용법:
       dart

       Text(
         'Hello, Flutter!',
         style: TextStyle(fontSize: 24, color: Colors.blue),
       );

   • Image 위젯:
     • 이미지를 화면에 표시하기 위한 위젯입니다. 네트워크 이미지, 로컬 이미지, 애셋 이미지 등을 불러와서 사용할 수 있습니다.
     • 기본적인 사용법:
       dart

       Image.network(
         'https://example.com/image.jpg',
         width: 100,
         height: 100,
       );

       
       

---

실습

1. Text와 Image 위젯을 활용한 간단한 UI 구성

• Flutter 프로젝트 설정:
  • 기존 Flutter 프로젝트를 사용하거나 새로운 프로젝트를 생성합니다.
  • lib/main.dart 파일을 열고, Text와 Image 위젯을 사용한 간단한 UI를 작성합니다.
• Text와 Image 위젯 코드 예제:
  • 다음 코드를 사용하여 Text와 Image 위젯을 활용한 간단한 UI를 구성합니다:
  • dart

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Flutter Widget Example'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    'Hello, Flutter!',
                    style: TextStyle(fontSize: 24, color: Colors.blue),
                  ),
                  const SizedBox(height: 20),
                  Image.network(
                    'https://example.com/image.jpg',
                    width: 150,
                    height: 150,
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

  • 

    기존 Flutter 프로젝트 main.dart파일에 작성

    
    
  • 코드 설명:
    • Text 위젯: 'Hello, Flutter!'라는 텍스트를 파란색, 폰트 크기 24로 화면에 표시합니다.
    • Image 위젯: 네트워크에서 이미지를 불러와 화면에 표시합니다. 이미지의 크기는 150x150 픽셀로 설정되어 있습니다.
    • Column 위젯: Text와 Image 위젯을 수직으로 배치합니다. mainAxisAlignment: MainAxisAlignment.center로 중앙 정렬을 설정하였습니다.

2. 프로젝트 실행 및 UI 확인

• Flutter 프로젝트 실행:
  • 터미널에서 다음 명령어를 실행하여 Flutter 애플리케이션을 실행합니다:
    bash

    flutter run

     
  • 에뮬레이터 또는 실제 디바이스에서 앱이 실행되며, 'Hello, Flutter!' 텍스트와 이미지가 화면에 표시됩니다.
• UI 조정:
  • Text 위젯의 스타일을 변경하거나, Image 위젯의 이미지 소스를 바꿔가며 다양한 UI 조합을 실습합니다.
•  

오리지날 코드 실행 화면

---

스크린샷

1. Text와 Image 위젯 코드 예제:
   • 위에서 작성한 Dart 코드의 스크린샷을 제공합니다. 코드 편집기(예: Visual Studio Code)에서의 작성 화면을 포함합니다.
2. 위젯이 포함된 화면 실행 결과:
   • 에뮬레이터 또는 실제 디바이스에서 Text와 Image 위젯이 표시된 Flutter 앱의 실행 결과를 캡처한 스크린샷을 제공합니다.

---

이 강의를 통해 여러분은 Flutter의 기본 UI 위젯인 Text와 Image 위젯을 이해하고, 이를 활용하여 간단한 UI를 구성할 수 있게 되었습니다. 이러한 기초 위젯들은 Flutter 애플리케이션 개발의 중요한 부분이며, 이를 통해 더 복잡한 UI를 구현할 수 있는 기반을 마련할 수 있습니다.