Flutter 스토어 앱 만들기 - 기본 위젯 정복하기

 

이번 글에서는 flutter_store_app이라는 이름의 프로젝트를 직접 생성하고, Flutter의 기본 위젯 사용법을 익히며 간단한 쇼핑몰 앱을 만들어보는 과정을 정리합니다.

---

✅ 프로젝트 생성 및 이미지 추가

1. 프로젝트 생성

flutter create flutter_store_app

2. 이미지 다운로드 및 추가

• 아래 링크에서 bag.jpg와 shoes.jpg 이미지를 다운로드합니다.
  • https://github.com/this-is-spartaa/flutter-store-app/tree/main/assets
• 프로젝트 내에 assets 폴더를 만들고 위의 이미지를 복사합니다.

3. pubspec.yaml 수정

flutter:
  assets:
    - assets/bag.jpg
    - assets/shoes.jpg

flutter pub get을 실행해서 적용합니다.

---

✅ 기본 코드 설정

1. main.dart 초기화

Flutter는 main() 함수에서 앱이 시작되며, runApp() 함수로 앱 루트 위젯을 실행합니다.

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: StorePage(),
    );
  }
}

2. StorePage 생성

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

---

✅ 주요 위젯 사용법 및 구현

1. Column 위젯

세로 방향으로 위젯을 배치할 때 사용

body: Column(children: [])

2. Row 위젯

가로 방향으로 위젯을 배치할 때 사용

Row(children: [ 위젯1, 위젯2, ... ])

3. Text 위젯

문자열을 표시하는 데 사용

Text("문자열", style: TextStyle(...))

4. SafeArea 위젯

StatusBar 등의 디바이스 UI 영역을 피하도록 해줌

SafeArea(child: Column(...))

5. Spacer 위젯

Row/Column에서 간격을 유동적으로 설정할 때 사용

Spacer()
Spacer(flex: 2)

---

✅ 코드 예제: UI 기본 구성

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),
              ],
            )
          ],
        ),
      ),
    );
  }
}

---

✅ Flutter DevTools 사용

1. Command Palette 실행: Ctrl + Shift + P 또는 Cmd + Shift + P
2. Flutter: DevTools Widget Inspector 선택
3. Toggle Select Widget 버튼으로 위젯의 배치 및 공간 확인 가능

---

위 예제를 따라 하며 Flutter의 기본 구조와 핵심 위젯 사용법을 익힐 수 있습니다. 다음 글에서는 이미지와 리스트 구성 등을 통해 앱을 더욱 완성도 있게 꾸며볼 예정입니다.