[플러터] 8. 스토어 앱 만들기

1. 위젯 (Widgets)

• 위젯은 Flutter 애플리케이션의 기본 빌딩 블록입니다.

• 모든 화면 요소(Component)는 위젯으로 구성되며, Flutter에서는 위젯을 통해 사용자 인터페이스를 정의하고 구성합니다.

• Flutter에서 배치(레이아웃)도 위젯의 일종입니다.

Flutter widget index

An alphabetical list of Flutter widgets.

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

• 플러터 공식에서 제공하는 위젯을 가져다 쓸 수 있습니다.

2. Cupertino 와 Material

Cupertino

• Cupertino는 iOS 스타일의 디자인 시스템입니다.

• 애플의 Human Interface Guidelines에 따라 설계되었으며, iOS 애플리케이션의 일관된 사용자 경험을 제공합니다.

• Cupertino 디자인 시스템은 깔끔하고 직관적인 UI 요소를 포함합니다.

Material

• Material Design은 Google이 개발한 디자인 시스템으로, 일관된 사용자 경험을 제공하기 위해 만들어졌습니다.

• Android뿐만 아니라 웹, iOS 등 다양한 플랫폼에서도 사용됩니다.

3. StoreApp

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// stle 치고 자동 완성 후 MyApp 작성
class MyApp extends StatelessWidget { // main 실행 시 build 메서드가 콜백 되고 return 값을 화면에 그려준다.
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 전체적인 디자인을 안드로이드(Material)로
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Row(
                children: [
                  Text("Woman"),
                  Text("Kids"),
                  Text("Shoes"),
                  Text("Bag"), // Dart는 끝이 , 로 끝나도 된다.
                ],
              ),
              Placeholder(),
              Placeholder(),
            ],
          ),
        ),
      ),
    );
  }
}

1)return MaterialApp

• 플러터는 쿠퍼티노 디자인 혹은 메터리얼 디자인 둘 중 하나를 선택할 수 있습니다.

2)home: Scaffold

• 기본적인 Material 디자인 레이아웃 구조를 제공합니다.

3)body: SafeArea

• 휴대폰 상단에는 요소를 그리면 안되는 부분(inset, 안정 영역)이 있습니다.

• 휴대폰 기종에 따라 크기가 다르기 때문에 기종에 맞게 크기를 가변적으로 설정하기 위해 SafeArea를 사용합니다.

4) child: Column

• 수직 방향 레이아웃 구조를 만들어 주고 child가 아닌 children 속성을 가집니다.

• child 속성을 가진 위젯은 하나의 위젯만 가질 수 있습니다.

• children 속성을 가진 위젯은 많은 위젯을 가질 수 있습니다.

5) children: [ Row ]

• 수평 방향 레이아웃 구조를 만들어줍니다.

• children: [ Text("Woman"), Text("Kids"), Text("Shoes"), Text("Bag"), ],

• Placeholder(): 나중에 다른 위젯으로 대체될 위치를 나타냅니다.

6) Padding

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: EdgeInsets.all(20.0), 
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, 
                  children: [
                    Text("Woman"),
                    Text("Kids"),
                    Text("Shoes"),
                    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,)),
            ],
          ),
        ),
      ),
    );
  }
}

7) mainAxisAlignment: MainAxisAlignment.spaceBetween

• mainAxix는 가로방향, crossAxis는 세로방향 입니다.

• MainAxisAlignment.spaceBetween

8) Image.asset("assets/bag.jpeg")

• 이미지를 가져오려면 pubspec.yaml을 수정해야 합니다.

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/ 

• assets 폴더 안의 이미지를 위젯으로 사용할 수 있습니다.
• 수정 후 우측 위에 Pub get으로 변경 사항을 적용합니다.

• fit: BoxFit.cover속성을 사용하여 공간을 채웠습니다.

• Expanded 위젯
• Expanded 위젯은 부모 위젯(여기서는 Column) 내에서 자식 위젯이 가용 가능한 공간을 최대한 차지하도록 합니다.

결과물

4. Flutter Inspector

• 브라우저에서 마우스 우클릭 → 검사 버튼을 누르면 나오는 DevTools 기능입니다.

• Select Widget Mode로 해당 위젯이 뭔지 알 수 있습니다.