스토어 앱 구조 살펴보기

1. 위젯과 컴포넌트

1. 위젯 (Widget)

• 설명:
• Flutter에서 UI를 구성하는 기본 단위.
• 화면에 표시되는 모든 것이 위젯으로 표현됨.
• 레이아웃, 텍스트, 버튼 등 모든 것이 위젯으로 구현.

• 종류:
1. StatelessWidget
• 특징: 상태(데이터)가 변경되지 않는 고정된 UI.
• 예제: Text, Icon, RaisedButton.
2. StatefulWidget
• 특징: 상태가 변할 수 있는 동적인 UI.
• 예제: TextField, Checkbox, Slider.

2. 주요 위젯 분류

Flutter widget index

An alphabetical list of Flutter widgets.

https://docs.flutter.dev/reference/widgets

1. 구조 위젯 (Structure Widgets)
• 앱의 기본 구조를 설정.
• 예제:
• MaterialApp: Material 디자인 기반 앱 설정.
• Scaffold: 화면의 기본 레이아웃 제공 (AppBar, Body 등).

2. 레이아웃 위젯 (Layout Widgets)
• UI 배치를 관리.
• 예제:
• Row: 자식 위젯을 가로로 배치.
• Column: 자식 위젯을 세로로 배치.
• Stack: 위젯을 서로 겹치도록 배치.
• Expanded: 자식 위젯이 남은 공간을 차지하도록 설정.

3. 디스플레이 위젯 (Display Widgets)
• UI 요소를 화면에 표시.
• 예제:
• Text: 텍스트 표시.
• Image: 이미지 표시 (Image.asset, Image.network 등).
• Icon: 아이콘 표시.

4. 입력 위젯 (Input Widgets)
• 사용자 입력을 처리.
• 예제:
• TextField: 텍스트 입력.
• Checkbox: 체크박스 입력.
• Slider: 슬라이더 입력.

5. 상태 관리 위젯 (State Management Widgets)
• 상태를 관리하거나 다른 위젯과 상태를 공유.
• 예제:
• InheritedWidget: 위젯 트리에 데이터를 전달.
• Provider: 상태 관리 도구로 주로 사용.

6. 보조 위젯 (Helper Widgets)
• UI 요소를 꾸미거나 보조하는 역할.
• 예제:
• Padding: 여백 추가.
• SizedBox: 고정된 크기의 공간 추가.
• SafeArea: 안전 영역 내에서 UI 배치.

3. 컴포넌트

• 설명:
• Flutter에서 재사용 가능한 UI 단위.
• 특정 기능이나 화면 일부를 캡슐화하여 재사용 가능하게 설계.

• 컴포넌트 만들기:
1. Stateless 컴포넌트: 변하지 않는 데이터 기반으로 만듦.
2. Stateful 컴포넌트: 상태를 관리하며 동적으로 변경되는 UI 구성.

4. 위젯과 컴포넌트의 차이

2. 인셋

1. 인셋이란?

• 설명:
• Flutter에서 인셋은 위젯의 내부 여백(Padding) 또는 **외부 여백(Margin)**을 의미.
• 부모 위젯과 자식 위젯 간의 공간을 조정하거나, 위젯 안의 콘텐츠와 경계 간의 공간을 정의.

2. 인셋을 설정하는 주요 클래스

1. EdgeInsets:
• Flutter에서 여백을 설정할 때 주로 사용하는 클래스.
• 모든 방향(top, bottom, left, right)에서 여백을 설정할 수 있음.

3. 주요 EdgeInsets 생성자

4. 인셋을 사용하는 주요 위젯

1. Padding:
• 자식 위젯 주위에 내부 여백을 추가.
• 예제:

Padding(
  padding: EdgeInsets.all(10.0), // 모든 방향에 10픽셀의 여백
  child: Text("Hello Padding!"),
)

2. Container:
• margin 또는 padding 속성을 통해 여백 설정.
• 예제:

Container(
  margin: EdgeInsets.symmetric(horizontal: 15.0), // 좌우 여백
  padding: EdgeInsets.only(top: 10.0), // 위쪽 내부 여백
  color: Colors.blue,
  child: Text("Hello Container!"),
)

3. Card:
• 기본적으로 내부 여백을 포함하며, 필요 시 커스터마이징 가능.
• 예제:

Card(
  margin: EdgeInsets.all(8.0), // 카드 바깥쪽 여백
  child: Padding(
    padding: EdgeInsets.all(10.0), // 카드 내부 여백
    child: Text("Hello Card!"),
  ),
)

5. 인셋의 활용 팁

• 일관성 유지:
• 앱 디자인에서 여백 크기를 일관되게 유지하기 위해 상수를 사용:

const double kPadding = 16.0;

Padding(
  padding: EdgeInsets.all(kPadding),
  child: Text("Consistent Padding"),
);

• 반응형 디자인:
• 여백을 화면 크기에 따라 동적으로 조정:

EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.1)

3. 코드와 사진

1. 사진을 넣기 위한 설정

1. 사진을 담을 폴더를 생성

1. pubspec.yaml 파일에서 생성한 이미지 폴더를 펌웨어 할 수 있도록 설정

2. 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
  // Flutter 애플리케이션의 진입점으로, `runApp` 함수가 위젯 트리의 루트 위젯을 실행
  // `MyApp`은 루트 위젯으로 설정됨
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // `StatelessWidget`을 상속받아 변하지 않는 위젯 구성

  @override
  Widget build(BuildContext context) {
    // 위젯의 UI를 빌드
    return MaterialApp(
      // 애플리케이션 환경을 설정하는 위젯 (테마, 라우팅 등)
      home: Scaffold(
        // 앱의 기본적인 구조 제공 (AppBar, Body 등 포함)
        body: SafeArea(
          // 핸드폰 화면의 상단 상태바와 겹치지 않도록 내용이 안전한 영역 내에 배치되도록 함 (사진 1번 참고)
          child: Column(
            // 화면의 위젯들을 수직으로 배치
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                // 내부 여백(패딩)을 10픽셀씩 모든 방향에 추가 (2번 사진 참고)
                child: Row(
                  // Row를 사용하여 자식 위젯들을 가로로 배치
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  // 가로 방향으로 자식 위젯들을 균등하게 배치
                  children: [
                    Text("Woman"), // 첫 번째 텍스트
                    Text("Kids"),  // 두 번째 텍스트
                    Text("Shoes"), // 세 번째 텍스트
                    Text("Bag"),   // 네 번째 텍스트
                  ],
                ),
              ),
              Expanded(
                // `Expanded`는 자식 위젯이 남은 화면 공간을 차지하도록 함
                child: Image.asset(
                  "assets/bag.jpeg",
                  // 앱의 `assets` 폴더에 있는 이미지를 표시
                  fit: BoxFit.cover,
                  // 이미지를 화면 크기에 맞게 확대하거나 축소
                ),
              ),
              Expanded(
                child: Image.asset(
                  "assets/cloth.jpeg",
                  // 두 번째 이미지 표시
                  fit: BoxFit.cover,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 사진