실습#1 - 스토어 앱 만들기

- github 주소

https://github.com/subin3578/flutter/tree/main/flutter_store_app

flutter/flutter_store_app at main · subin3578/flutter

---

 

오늘은 스토어 앱을 만들어보는 실습을 통해 MaterialApp, Scaffold, Column, Row, Text, SafeArea, Image, Spacer, Expanded, Padding, SizedBox 위젯에 대하여 알아보는 시간을 가지겠습니다.

 

최종 결과 화면

 

스토어 앱 만들기

import 'package:flutter/material.dart';

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

// 결국 최상위 위젯은 Widget이다 즉, Widget으로 업캐스팅이 가능하단 말
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MatiralApp - 앱의 전체적인 구조와 디자인, 앱의 루트 위젯이다
    // Android 앱 개발 시 사용 (<-> CupertinoApp - IOS 앱 개발 시 사용)
    // title. theme, home등 다양한 매개변수 존재함
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StorePage(),
    );
  }
}

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // AppBar, BottomNavigatorBar, body 등을 포함한 기본적인 레이아웃
        body: SafeArea(
      // 기기별로 다른 상태바 영역에 패딩을 자동으로 넣어줘서 비율에 맞게 보이도록 조정
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(25.0), // 해당하는 EdgeInsets 클래스 불러서 사용
            child: Row(
              children: [
                Text(
                  'Woman',
                  style: TextStyle(fontWeight: FontWeight.bold),
                  // 틈새 퀴즈 ?  FontWeight 클래스에서 직접 참조가 가능하다는 것을 보아 bold 는 어떻게 선언되어 있나 ?
                  // FontWeight.bold - 직접 참조가 가능하다는 것은 static 으로 선언된 변수라는 것
                  // 즉, 클래스 인스턴스를 만들지 않고도 바로 접근할 수 있는 값
                ),
                Spacer(),
                Text(
                  'Kids',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Spacer(), // 남은 공간을 차지하여 간격을 조절할 때 사용
                Text(
                  'Shoes',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Spacer(),
                Text(
                  'Bags',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
          // 자식 2
          Expanded(
            // Column 방향으로 | 자식 위젯을 가용 공간에 맞게 확장시켜 배치하는 유닛
            child: Image.asset(
              'assets/bag.jpeg',
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(
            // 빈 공간을 만들거나 자식 위젯의 크기를 조절할 때 사용
            height: 20,
          ),
          Expanded(
            child: Image.asset(
              'assets/cloth.jpeg',
              fit: BoxFit.cover,
              // BoxFit. (cover / fill / contaion)
              // cover - 원본 비율 유지, 지정 영역 맞춤 - 장점 : 비율 유지 / 단점 : 지정 크기를 벗어난 이미지는 잘림
              // fill - 원본 무시 , 지정 영역 맞춤
              // container - 원본 비율
            ),
          ),
        ],
      ),
    ));
  }
}

 

 

이론 정리

• MaterialApp: Flutter 앱의 루트 위젯으로, Android 디자인을 적용하여 앱의 기본 구조를 설정합니다.
• CupertinoApp: Flutter 앱의 루트 위젯으로, IOS 디자인을 적용하여 앱의 기본 구조를 설정합니다.
• Scaffold: 앱의 기본 레이아웃 구조를 제공하는 위젯으로, 앱 바, 본문, 바텀 레이아웃 바등을 설정할 수 있습니다.
• Column: 수직 방향으로 자식 위젯들을 배치하는 레이아웃 위젯입니다.
• Row: 수평 방향으로 자식 위젯들을 배치하는 레이아웃 위젯입니다.
• Text: 텍스트를 화면에 표시하는 위젯으로, 다양한 스타일을 적용할 수 있습니다.
• SafeArea: 화면의 안전 영역(예: 노치, 홈 인디케이터)을 피해서 자식 위젯을 배치하는 위젯입니다.
• Image: 이미지 파일을 화면에 표시하는 위젯입니다. 로컬 이미지나 네트워크 이미지를 지원합니다.
• Spacer: 남은 공간을 자동으로 차지하는 위젯으로, 주로 Row나 Column 내에서 자식 위젯 간 간격을 조정하는 데 사용됩니다.
• Expanded: 남은 공간을 자식 위젯이 확장할 수 있도록 만드는 위젯으로, Row, Column 내에서 유용합니다.
• Padding: 자식 위젯을 감싸서 주어진 여백(padding)을 적용하는 위젯입니다.
• SizedBox: 고정된 크기의 빈 공간을 만들거나 자식 위젯의 크기를 설정하는 위젯입니다.