본문 바로가기

Flutter

위젯을 캡쳐하고 공유하기

 

Flutter의 화면 내에서 특정 위젯을 캡쳐하고 해당 사진을 갤러리에 저장 및 공유를 해보겠습니다.

 

풀코드는 아래에 남겨두겠습니다.

flutter pub add screenshot //캡쳐
flutter pub add path_provider //저장 경로 설정
flutter pub add share_plus //공유
flutter pub add gallery_saver_plus //사진 갤러리에 저장

 

 

 

먼저 스크린샷컨트롤러를 선언해줍니다

 

그 다음 캡쳐할 위젯을 스크린샷 위젯으로 감싸고 컨트롤러를 추가합니다.

이러면 위젯을 캡쳐할 준비는 끝났습니다. 이제 캡쳐 후 저장 및 공유를 코드를 작성해보겠습니다.

 

캡쳐, 저장, 공유

 

2~3줄 : 사진을 저장할 경로를 가져오기

4~5줄:  캡쳐본의 이름설정 (이름+ 시간난수로 저장)

 

9~10줄: 위젯 캡쳐 및 임시 경로로 저장

11줄: 설정한 경로로 캡쳐 이미지 저장

 

15~16줄: ipad용 공유하기 위치 설정 다른 기종은 생략 가능

17~19줄: 스마트폰 공유하기 기능 실행

실행 결과

 

다음과 같이 잘 실행됩니다. 추가로 캡쳐에도 임시 저장하지않고 바로 데이터로 반환하는 등에 추가 기능이 있는데 해당 기능은 직접 패키지 참고하시면 될 것 같습니다.

 

그 외로 사진 저장은 저장 관련 권한이 필요하기 때문에 권한 거부 상태 일 경우 추가적인 예외처리가 필요합니다.

 

전체 코드는 깃허브를 참고해주세요

 

Flutter_Blog/lib/screen_shoot at master · beomsuong/Flutter_Blog

Contribute to beomsuong/Flutter_Blog development by creating an account on GitHub.

github.com

 

그외 추가 기능은 패키지를 참고하세요 특히 스크린샷패키지와, 갤러리세이브 패키지를 참고하시면 됩니다.

 

screenshot | Flutter package

Flutter Screenshot Package (Runtime). Capture any Widget as an image.

pub.dev

 

 

path_provider | Flutter package

Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data directories.

pub.dev

 

 

share_plus | Flutter package

Flutter plugin for sharing content via the platform share UI, using the ACTION_SEND intent on Android and UIActivityViewController on iOS.

pub.dev

 

 

gallery_saver_plus | Flutter package

Saves images and videos from network or temporary file to external storage. Both images and videos will be visible in Android Gallery and iOS Photos.

pub.dev