그림 그리기 1 (스토어 앱)

기본 코드 예제 및 설명

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(
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("Woman"),
                    //Spacer(),
                    Text("Kids"),
                    //Spacer(),
                    Text("Shoes"),
                    //Spacer(),
                    Text("Bag"),
                  ],
                ),
              ),
              Expanded(
                  child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),
              SizedBox(height: 2),
              Expanded(
                  child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)),
            ],
          ),
        ),
      ),
    );
  }
}

코드 요소 설명

• void main() {}
• Flutter 애플리케이션의 진입점입니다. runApp 함수는 주어진 위젯을 루트 위젯으로 설정합니다. MyApp은 루트 위젯으로 설정된 커스텀 위젯입니다.

• class MyApp extends StatelessWidget
• MyApp 클래스는 StatelessWidget을 확장하여 정의된 사용자 정의 위젯입니다. 이는 상태가 변하지 않는 위젯을 의미합니다. const MyApp({super.key});는 MyApp 생성자를 정의합니다. super.key는 Flutter에서 위젯의 고유 키를 설정하는 데 사용됩니다.

• Widget build(BuildContext context)
• 모든 Flutter 위젯의 필수 메서드로, 위젯의 UI를 빌드하는 데 사용됩니다. build 메서드 내부에서 반환된 위젯 트리가 화면에 렌더링됩니다.

• MaterialApp
• Flutter 애플리케이션의 루트 위젯으로, Material 디자인을 적용하는 앱을 만듭니다.

• Scaffold
• Flutter에서 기본적인 페이지 레이아웃 구조를 제공합니다. AppBar, Drawer, Body 등을 포함할 수 있습니다.

• SafeArea
• 장치의 안전한 영역을 보장하기 위해 사용됩니다. 예를 들어, 노치나 상태 표시줄을 피하기 위해 내용을 자동으로 패딩합니다.

• Column
• 자식 위젯들을 수직으로 배치하는 데 사용됩니다.

• Padding
• 자식 위젯 주위에 패딩을 추가합니다. 여기서는 EdgeInsets.all(20.0)으로 모든 면에 20.0의 패딩을 적용합니다.

• Row
• 자식 위젯들을 수평으로 배치하는 데 사용됩니다. mainAxisAlignment: MainAxisAlignment.spaceBetween은 자식 위젯들을 수평으로 균등하게 배치합니다.

• Text
• 화면에 텍스트를 표시하는 위젯입니다.

• Expanded
• 자식 위젯이 남은 공간을 차지하도록 확장합니다. 여기서는 이미지를 화면에 꽉 차도록 합니다.

• Image.asset
• 애셋 이미지를 표시하는 위젯입니다. fit: BoxFit.cover는 이미지를 비율을 유지하며 공간에 맞게 조절합니다.

• SizedBox
• 고정된 크기의 빈 공간을 만듭니다. 여기서는 이미지 사이에 2 픽셀의 간격을 만듭니다.

이미지 적용하기

• 먼저 프로젝트에 assets 폴더를 생성한 뒤 적용할 이미지들을 집어 넣습니다.

• 빨간 네모 박스 안의 yaml 파일을 더블클릭합니다.

• 기존에 # 을 통해 주석되어있던 assets 자리에 (빨간 네모1)과와 같이 작성한 뒤 Pub get 버튼(빨간네모2)을 누릅니다.

• 만약 이미 프로그램이 실행 중 이라면 다시 재시작을 하여야 정상 반영됩니다.

• assets/ 는 assets 폴더 안에 있는 모든 파일을 포함한다는 뜻 입니다.

완성된 출력 화면