Flutter - 이미지 선택

앱을 만들다 보면 갤러리(사진첩)에서 이미지를 선택해야 할 일이 생깁니다.

이 경우를 알아보겠습니다.

우선 필요한 패키지는 image_picker 입니다.

 

https://pub.dev/packages/image_picker

image_picker | Flutter Package

 

선택하는 방법 자체는 아주 쉽고 간단합니다.

 

  static Future<XFile?> PickImage() async {
    return await ImagePicker().pickImage(source: ImageSource.gallery);
  }

 

당연하게도 비동기 메소드이고 source 에서 카메라/갤러리를 선택해 주시면 됩니다.

 

Xfile은 크로스 플랫폼 파일입니다.

Android, IOS 모두 사용할 수 있는 파일 객체 입니다.

Xfile.path를 참조하면 해당 파일을 경로를 얻을 수 있으므로 이후 처리는 path 를 얻어 처리하면 됩니다.

 

 

 

또하나 연결되는 패키지는 image_cropper 입니다.

https://pub.dev/packages/image_cropper

image_cropper | Flutter Package

보통 이미지를 선택했으면 원하는 영역만 자르게 되는데 그떄 필요합니다.

 

await ImageCropper().cropImage(
  sourcePath: imagePath,
  aspectRatioPresets: [
    CropAspectRatioPreset.original,
    CropAspectRatioPreset.ratio16x9
  ],
  uiSettings: [
    AndroidUiSettings(
        initAspectRatio: CropAspectRatioPreset.ratio16x9,
        lockAspectRatio: false),
    IOSUiSettings(
      title: 'Cropper',
    ),
  ],
);

 

여기서 중요한것은 uiSettings 입니다.

플랫폼마다 별도로 처리 해 주어야 하며 안드로이드는 lockAspectRatio 항목이 있어서 비율 유지 처리가 여기서 이루어 지게 됩니다.

또한 안드로이드는 AndroidManifest.xml 에서 뷰를 추가해 주어야 합니다.

그렇지 않으면 에러가 뜨게 되는데 자세한 사항 해당 사이트에 자세히 나와 있습니다.

 

이미지 선택과 이미지 자르는것 역시 모두 비동기 함수이고 image_cropper가 String으로 된 path만 받아오면 되기 때문에 둘간의 연계는 아주 쉽습니다.

 

다만 주의 해야 할 점으로는 image_picker, image_cropper모두 취소가 가능한 상태라서 취소에 대한 처리도 잘 해주어야 합니다.