Flutter Day 3-3: Flutter store app (1)

Flutter

Flutter Day 3-3: Flutter store app (1)

@leem 2025. 1. 6. 17:48

Flutter는 모바일 UI를 만들기에 최적화된 강력한 프레임워크입니다.
Flutter의 YAML 파일 설정, 위젯 트리 구조,그리고 시각적 레이아웃을 구성하는 기본 위젯들을 알아보겠습니다.

1. YAML 파일 설정

YAML 파일이란?

pubspec.yaml 파일은 Flutter 프로젝트의 설정 파일입니다.
여기에는 앱에서 사용할 패키지, 리소스(이미지, 글꼴 등), 환경 설정 등이 정의됩니다.

Asset 설정

# pubspec.yaml 파일의 assets 섹션
assets:
  - assets/bag.jpeg
  - assets/cloth.jpeg

assets:: Flutter 프로젝트에서 사용할 이미지, 아이콘, 동영상 등을 정의합니다.
사용 방법:
1. assets 폴더에 이미지를 추가합니다.
2. 위와 같이 YAML 파일에 경로를 추가합니다.
3. 앱에서 Image.asset('assets/파일명')으로 사용 가능합니다.

2. Flutter 기본 구조

시나리오 1: 초기 코드 작성

// 플러터 동작시 반드시 있어야 함
import 'package:flutter/material.dart';

// 코드의 시작점
void main() {
  // 플러터는 거의 모든 것이 위젯
  // 전달된 위젯을 최상위 위젯으로 설정하고 앱을 시작하는 함수이다.
  runApp(MyApp());
}

// stl 단축키 활용
class MyApp extends StatelessWidget {
  // 생성자 - 매개변수 : 선택적 명명 매개변수
  MyApp({super.key});

  // 부모클래스의 메서드를 재정의 하는 문법
  // build 함수는 화면에 그림을 그려 주는 함수이다.
  // BuildContext는 위젯 트리에서의 위치와 관련된 다양한 정보를 포함하고 있음.
  @override
  Widget build(BuildContext context) {
    // const 상수를 만들어 주는 키워드 이다. <-- 컴파일 시점
    return const Placeholder();
  }
}

설명

main() 함수: 앱의 진입점입니다. Flutter는 앱 실행 시 runApp()을 호출해 앱 트리를 생성합니다.
MyApp 클래스:
- StatelessWidget을 상속받은 위젯.
- build() 메서드: Flutter에서 화면을 그리는 핵심 함수입니다.
Placeholder:
- 임시로 화면에 표시되는 기본 UI.

3. MaterialApp 위젯 추가

시나리오 2: MaterialApp 활용

// 플러터 동작시 반드시 있어야 함
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
} // end of main

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // Flutter 을 개발을 할 때 맨 밑바닥부터 개발하는 것은 힘들다.
  // 기본적 개발을 할 수 있도록 매우 유용한 클래스를 제공 한다.
  // MaterialApp
  @override
  Widget build(BuildContext context) {
    // 생성자
    // home: (라벨) <-- 선택적 명명 매개변수로 설계 되어 있다.
    return MaterialApp(
      // div 박스와 같은 녀석
      home: StorePage(),
    );
  }
} // end of MyApp

//
class StorePage extends StatelessWidget {
  StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
} // end of StorePage

MaterialApp:
- Flutter에서 기본적으로 제공하는 앱 레이아웃 설정 위젯.
- 주요 매개변수:
  - home: 앱의 기본 화면을 설정합니다.
  - debugShowCheckedModeBanner: 디버그 배너 표시 여부.
StorePage 클래스:
- StatelessWidget으로 정의된 화면 위젯.

4. Flutter 위젯 트리와 레이아웃 구성

시나리오 3: Scaffold와 위젯 트리

// 플러터 동작시 반드시 있어야 함
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
} // end of main

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // Flutter 을 개발을 할 때 맨 밑바닥부터 개발하는 것은 힘들다.
  // 기본적 개발을 할 수 있도록 매우 유용한 클래스를 제공 한다.
  // MaterialApp
  @override
  Widget build(BuildContext context) {
    // 생성자
    // home: (라벨) <-- 선택적 명명 매개변수로 설계 되어 있다.
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // div 박스와 같은 녀석
      home: StorePage(),
    );
  }
} // end of MyApp

class StorePage extends StatelessWidget {
  StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 시각적 레이아웃 구조를 잡아주는 위젯이다.
    return Scaffold(
      // 안전 영역 내에 자식 위젯들을 배치하도록 도와 준다.
      body: SafeArea(
        child: Column(
          // 위젯은 자식 또는 자식들을 속성을 가질 수 있다.
          children: [
            // 패딩위젯이나 마진에 값을 EdgeInsets 클래로 감싸서 넣는다.
            Padding(
              padding: EdgeInsets.all(25.0),
              // Row 위젯은 자식 위젯들을 수평 방향으로 정렬해 주는 위젯이다.
              child: Row(
                children: [
                  Text(
                    'Woman',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  // Spacer 위젯은 남은 공간을 차지하여 위젯 간격을 조절할 때 활용 가능
                  Spacer(),
                  Text(
                    'Kids',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    'Shoes',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    'Bag',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
            // Expanded 위젯: 자식 위젯을 가용 공간에 맞게 확장시켜 배치하는 위젯이다.
            Expanded(
              child: Image.asset(
                'assets/bag.jpeg',
                fit: BoxFit.cover,
              ),
            ),
            // SizedBox 위젯은 고정된 크기의 빈 공간을 만들거나 자식 위젯의 크기를 제한할 때 사용한다.
            SizedBox(height: 2),
            // 자식 3
            Expanded(
              child: Image.asset(
                'assets/cloth.jpeg',
                fit: BoxFit.cover,
              ),
            ),
          ],
        ),
      ),
    );
  }
} // end of StorePage

주요 위젯 설명

Scaffold:
- Flutter 앱의 기본 구조를 제공하는 위젯입니다.
- 주요 속성:
  - body: 화면의 메인 콘텐츠.
SafeArea:
- 화면 상단이나 하단의 시스템 UI 영역을 피하도록 도와줍니다.
Column:
- 자식 위젯들을 세로로 정렬하는 위젯입니다.
Row:
- 자식 위젯들을 가로로 정렬하는 위젯입니다.
Padding:
- 내부 여백(패딩)을 설정합니다.
Spacer:
- 남은 공간을 비율에 따라 분배합니다.
Expanded:
- 자식 위젯을 가용 공간에 맞게 확장합니다.
SizedBox:
- 고정된 크기의 빈 공간을 만듭니다.
Image.asset:
- 로컬 이미지 파일을 화면에 표시합니다.

5. 실행 결과

앱 화면 구조

상단: "Woman", "Kids", "Shoes", "Bag" 텍스트가 정렬됨.
중앙: bag.jpeg 이미지가 전체 화면의 절반을 차지.
하단: cloth.jpeg 이미지가 나머지 절반을 차지.

6. 정리

Flutter 앱 구성의 핵심 단계

pubspec.yaml 설정:
- 이미지나 리소스를 프로젝트에 추가합니다.
MaterialApp으로 기본 앱 설정:
- 앱의 기본적인 레이아웃과 네비게이션 관리.
위젯 트리 구조 설계:
- Flutter는 모든 것이 위젯! 레이아웃 구성도 위젯으로 표현.
이미지 및 텍스트 추가:
- Image.asset과 Text 위젯으로 콘텐츠를 채웁니다.

위젯 중심: Flutter는 위젯 트리 구조가 핵심입니다. 위젯의 속성과 레이아웃을 익히세요.
YAML 파일 관리: 리소스를 추가할 때 pubspec.yaml 파일을 항상 업데이트하세요.
Hot Reload: 앱 실행 중 코드를 수정하면 즉시 화면에서 결과를 확인할 수 있습니다.