00021. [APP-00003] AI 음식 영양 분석 앱 개발기 #2 – Flutter 프로젝트 세팅 및 UI 기본 구성

이번 편에서는 AI 음식 영양 분석 앱의 Flutter 프로젝트를 세팅하고, 간단한 홈 화면 UI를 구성해보자. 초보자도 따라올 수 있게 단계별로 안내할게.

---

🛠️ 1단계: Flutter 프로젝트 생성

flutter create app_00003_nutrition_ai
cd app_00003_nutrition_ai

pubspec.yaml에서 필요한 패키지를 미리 준비해두자:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4
  http: ^0.13.5
  shared_preferences: ^2.2.2

💡 이후 flutter pub get으로 패키지 적용!

---

🧱 2단계: 기본 폴더 구조 설계

/lib
  ├── main.dart
  ├── screens/
  │     └── home_screen.dart
  ├── services/         # API 호출 관련
  └── widgets/          # 공통 위젯

---

🖼️ 3단계: 홈 화면 UI 구성

lib/main.dart

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

void main() => runApp(const NutritionApp());

class NutritionApp extends StatelessWidget {
  const NutritionApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI 음식 영양 분석',
      theme: ThemeData(primarySwatch: Colors.orange),
      home: const HomeScreen(),
    );
  }
}

lib/screens/home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AI 음식 영양 분석')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('음식 사진을 업로드하세요.'),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 이미지 선택 기능 연결 예정
              },
              child: const Text('갤러리에서 이미지 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

---

✅ 실행 결과 요약

• 오렌지 테마의 앱 바와 버튼
• 이미지 업로드 유도 메시지
• 이후 API 연결을 위한 구조 완성

---

다음 에피소드 예고

00022. [APP-00003] AI 음식 영양 분석 앱 개발기 #3 – 이미지 선택 및 화면 표시 구현

• 갤러리 접근 권한 설정
• 선택한 음식 사진 화면에 띄우기
• image_picker로 파일 가져오기