Flutter: How to load, crop, split , share an image in flutter 플러터에서 사진을 불러오고 원하는 갯수로 분할후 저장과 공유 (인스타분할처럼)

플러터에서 갤러리나 카메라로부터 찍힌 사진을 가져와서 원하는 갯수로 분할하고 분할된 사진들을 각각 저장 그리고 sns에 공유하는 기능을 구현해 보았습니다. 생각보다 까다로웠습니다. 

아래는 기능구현 시험영상입니다. 

 

 

 

1. 사진 불러오기

먼저 사진을 불러오기 위해서 image_picker라는 패키지를 사용합니다. 여기서 갤러리에서 불러오거나 아니면 카메라로 사진을 찍은 후 그 사진을 바로 업로드 할 수 있습니다. 

Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.

 

https://pub.dev/packages/image_picker

image_picker | Flutter Package

<IOS>

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

• NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.
• NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.
• NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor

<Android>

 

2. 사진을 정사각형으로 만들기

불러온 사진을 GFAvatarShape.square property를 사용하여 정사각형으로 만들어 줍니다. 

 

3. 사진을 분할하기 

 

아래의 패키지를 사용하여, 사진의 데이터 타입을 바꾸어 주고 또한 분할을 합니다. 

 

https://pub.dev/packages/image

image | Dart Package

 

 

참고 자료들:

 

https://stackoverflow.com/questions/58363167/how-to-split-divide-image-in-parts-in-flutter

How to split/divide image in parts in Flutter

https://stackoverflow.com/questions/44665720/how-do-i-crop-an-image-in-flutter

How do I crop an image in Flutter?

 

https://stackoverflow.com/questions/57601908/can-we-crop-an-image-with-point-and-size-in-flutter

Can we crop an image with point and size in Flutter?

4. 불러온 사진 그리고 분할된 사진을 저장하기

 

gallery_saver라는 아래의 패키지를 이용합니다. 

 

https://pub.dev/packages/gallery_saver

gallery_saver | Flutter Package

아래는 코드구현입니다. 

 

 

5. 사진을 공유하기

 

사진 sns 공유는 share_plus라는 패키지를 사용합니다. 

https://pub.dev/packages/share_plus

share_plus | Flutter Package

 

아래는 코드구현입니다. 

6. 분할된 사진 저장

 

분할된 사진을 갤러리에 저장하는 로직은 이렇습니다

1. 사진을 분할하는 함수를 불러서 List<image> a 라는 변수에 저장을 하고, 

for loop 함수안에서 분할된 사진 index 갯수만큼 스크린샷을 찍고 그것을 저장합니다. 

 

아래는 코드 구현입니다.