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

이번 편에서는 사용자가 갤러리에서 음식 사진을 선택하고, 선택한 이미지를 화면에 띄우는 기능을 구현해볼 거야. 앱의 핵심 입력 포인트지! 🍔📸

---

📦 1단계: image_picker 설정

pubspec.yaml에 image_picker가 추가되어 있는지 확인:

dependencies:
  image_picker: ^1.0.4

이후 flutter pub get 실행 필수!

📱 Android 권한 설정

android/app/src/main/AndroidManifest.xml에 추가:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

🍎 iOS 권한 설정

ios/Runner/Info.plist에 추가:

<key>NSPhotoLibraryUsageDescription</key>
<string>이 앱은 갤러리에서 사진을 선택하기 위해 접근 권한이 필요합니다.</string>

---

🧩 2단계: 이미지 선택 기능 구현

home_screen.dart 수정:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  File? _image;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final picked = await picker.pickImage(source: ImageSource.gallery);
    if (picked != null) {
      setState(() {
        _image = File(picked.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AI 음식 영양 분석')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _image != null
                ? Image.file(_image!, height: 200)
                : const Text('음식 사진을 선택하세요.'),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: _pickImage,
              child: const Text('갤러리에서 이미지 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

---

✅ 결과 요약

• 갤러리에서 사진 선택 가능
• 선택한 음식 이미지를 바로 화면에 표시

---

다음 에피소드 예고

00023. [APP-00003] AI 음식 영양 분석 앱 개발기 #4 – Clarifai API를 이용한 음식 인식

• 이미지 Base64 인코딩
• Clarifai API로 음식 이름 예측
• 예측 결과를 화면에 출력