[Flutter Favorite] image_picker 예시코드

안녕하세요? image_picker를 간단하게 구현해보겠습니다. 대부분 앱이라면 image_picker 기능 정도는 담고 있습니다. 

이 글을 통해 갤러리에서 사진을 선택하여 추가하는 방법과 카메라를 열어서 사진을 추가하는 방법을 알아봅니다. 

 

Version

// pubspec.yaml에 추가합니다. 포스팅 당시 제가 사용한 버전은 ^0.8.5+3 입니다. 
  image_picker: ^0.8.5+3

 

android 기본설정

0.8.1 version 부터는 multiple image picker가 지원되는데 Andoid 4.3이거나 그보다 더 높아야 합니다. 

 

ios 기본설정

1. 0.8.1 version 부터 ios 버전 14이거나 그보다 높은 버전이 필요합니다. 

2. <project root> - ios - Runner - Info.plist 에 추가해줍니다. 

// dict태그 아래에 들여쓰기 맞춰서 넣어주세요
    <dict>
	<key>NSPhotoLibraryUsageDescription</key> // 포토 라이브러리 권한 
	<string>PhotoLibraryUsagePermission</string>
	<key>NSCameraUsageDescription</key> // 카메라 권한
	<string>CameraUsagePermission</string>
	<key>NSMicrophoneUsageDescription</key> // 동영상 마이크 권한
        <string>MicrophoneUsagePermission</string>
	...
    </dict>

 

android 기본설정

별도로 설정해줄 것은 없습니다. 하지만 메모리 사용량이 많을 경우 안드로이드 시스템에서 이미지 피커를 사용할 때 앱 자체를 임의로 종료시킬 가능성이 있기 때문에 방지하기 위한 코드가 필요합니다. 

Future<void> getLostData() async {
  final LostDataResponse response =
      await picker.retrieveLostData();
  if (response.isEmpty) {
    return;
  }
  if (response.files != null) {
    for (final XFile file in response.files) {
      _handleFile(file);
    }
  } else {
    _handleError(response.exception);
  }
}

 

 

앨범에서 사진 선택하기 코드

void _getImageFileFromPhotoLibrary() async {
    try {
      final ImagePicker _picker = ImagePicker();
      // Pick an image
      final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
      if (image == null) return;

      final imageTemp = File(image.path);
      setState(() => this.image = imageTemp);
    } on PlatformException catch (e) {
      print('Failed to pick Image: $e');
    }
  }

ElevatedButton(
  onPressed: () async {
    await _getImageFileFromPhotoLibrary();
  },
  child: Text('Pick image')),

 

카메라 선택하기 코드

//카메라 선택하기 기능은 시뮬레이터에서는 작동하지 않습니다.
ElevatedButton(
      onPressed: () async {
        await _picker.pickImage(source: ImageSource.camera);
      },
      child: Text('Pick photo')),

 

구현 화면