00011. [APP-00002] 사진 기반 식물/동물 인식 앱 개발기 #2

#2. Flutter 프로젝트 세팅 및 기본 UI 구성

이번 시간에는 실제로 개발을 시작해보자.

📌 대상자: Flutter를 처음 접해보는 사람도 따라할 수 있게 쉽게 설명합니다.

✅ 준비물

항목설명

Flutter SDK	https://flutter.dev/docs/get-started/install
Android Studio	Flutter 개발 시 가장 많이 쓰이는 도구. (iOS도 Xcode로 가능)
VS Code	코드 편집기로 경량화된 Flutter 개발도 가능
Android Emulator or Physical Device	앱 실행 및 테스트 용도

🔧 1단계: Flutter 프로젝트 생성

터미널 또는 Android Studio에서 다음 명령어 실행:

flutter create app_00002_plant_detector

디렉토리로 이동:

cd app_00002_plant_detector

🗂️ 2단계: 폴더 구조 설계

초보자도 보기 쉽게 디렉토리를 나눠줄 거야.

/lib
  ├── main.dart              # 앱 진입점
  ├── screens/               # 각 화면별 위젯 파일들
  │     └── home_screen.dart
  ├── widgets/               # 공통 위젯들
  └── services/              # API 호출 관련 코드

🎨 3단계: 기본 UI 틀 만들기

lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Plant Detector',
      theme: ThemeData(
        primarySwatch: Colors.green,
        useMaterial3: true,
      ),
      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('사진 기반 식물/동물 인식'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('이미지를 선택해주세요.'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 이미지 선택 기능 구현 예정
              },
              child: const Text('갤러리에서 이미지 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ 결과 화면 미리보기 (기획)

• 간단한 화면: 타이틀 + 버튼 1개
• 향후 기능 확장: 이미지 표시, 인식 결과 출력 등

---

다음 에피소드 예고

#3. 이미지 선택 및 표시 구현하기

• 갤러리 접근 권한 처리
• 이미지 가져오기 및 화면에 표시
• image_picker 패키지 사용법