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

#3. 이미지 선택 및 화면에 표시하기

이번 편에서는 사용자가 갤러리에서 이미지를 선택하고 화면에 표시하는 기능을 구현해볼게. 초보자도 쉽게 따라올 수 있게 하나하나 설명할게!

✅ 사용할 패키지

• image_picker: Flutter에서 이미지 선택 기능을 가장 간단하게 구현할 수 있는 대표적인 패키지야.

🔧 1단계: pubspec.yaml에 의존성 추가

pubspec.yaml 파일의 dependencies: 항목 아래에 다음을 추가해줘.

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4

💡 버전은 최신 버전을 사용하거나 pub.dev에서 확인해봐.

그리고 꼭 flutter pub get 해줘야 패키지가 적용돼!

🔒 2단계: Android/iOS 권한 설정

Android

android/app/src/main/AndroidManifest.xml에 아래 권한 추가:

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

또한 android/app/build.gradle 파일의 minSdkVersion을 21 이상으로 설정하는 것도 확인해줘.

iOS

ios/Runner/Info.plist에 아래 항목 추가:

<key>NSPhotoLibraryUsageDescription</key>
<string>갤러리 접근을 허용해야 이미지를 선택할 수 있습니다.</string>

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

lib/screens/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 pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      setState(() {
        _image = File(pickedFile.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('사진 기반 식물/동물 인식'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _image != null
                ? Image.file(
                    _image!,
                    height: 200,
                  )
                : const Text('이미지를 선택해주세요.'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: const Text('갤러리에서 이미지 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ 실행 결과

• 버튼 클릭 → 갤러리 열림
• 이미지 선택 시 화면에 바로 표시됨

---

다음 에피소드 예고

#4. 이미지 전송 및 AI API 연동 준비하기

• 이미지 Base64 인코딩하기
• Plant.id 또는 Clarifai API 요청 형식 맞추기
• 테스트 API 키 발급 및 환경 변수 설정