플러터에서 screenshot 패키지를 사용하여 이미지 생성 후 share_plus로 공유하기

 

Flutter 앱에서 특정 화면이나 위젯을 이미지로 저장하고, 이를 공유하는 기능을 구현하는 방법을 알아보겠습니다.

이를 위해 screenshot 패키지로 화면을 캡처하고, share_plus 패키지로 공유하는 기능을 추가합니다.

1. 패키지 추가하기

먼저 pubspec.yaml 파일에 아래 두 가지 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  screenshot: ^3.0.0
  share_plus: ^10.1.4

 

터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. ScreenshotController 초기화하기

screenshot 패키지를 사용하려면 ScreenshotController를 생성하고, 해당 컨트롤러로 캡처할 위젯을 감싸야 합니다.

import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
import 'package:share_plus/share_plus.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ScreenshotExample(),
    );
  }
}

class ScreenshotExample extends StatefulWidget {
  @override
  _ScreenshotExampleState createState() => _ScreenshotExampleState();
}

class _ScreenshotExampleState extends State<ScreenshotExample> {
  // Screenshot을 관리하는 컨트롤러
  ScreenshotController screenshotController = ScreenshotController();

  // 스크린샷을 캡처하고 공유하는 함수
  Future<void> captureAndShare() async {
    try {
      // 위젯을 이미지로 변환
      final image = await screenshotController.capture();

      if (image == null) return;

      // 임시 저장할 경로 가져오기
      final directory = await getTemporaryDirectory();
      final imagePath = File('${directory.path}/screenshot.png');

      // 이미지 파일로 저장
      await imagePath.writeAsBytes(image);

      // 공유 기능 실행
      await Share.shareFiles([imagePath.path], text: '내 캡처 화면을 공유합니다!');
    } catch (e) {
      print('오류 발생: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screenshot & Share Example')),
      body: Center(
        child: Screenshot(
          controller: screenshotController,
          child: Container(
            padding: EdgeInsets.all(20),
            color: Colors.blueAccent,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  '이 화면을 캡처하여 공유할 수 있습니다!',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 20),
                Icon(Icons.camera_alt, size: 50, color: Colors.white),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: captureAndShare,
        child: Icon(Icons.share),
      ),
    );
  }
}

3. 코드 설명

(1) ScreenshotController 생성

fianl ScreenshotController screenshotController = ScreenshotController();

• 캡처할 위젯을 관리하는 ScreenshotController를 생성합니다.

(2) Screenshot 위젯으로 감싸기

Screenshot(
  controller: screenshotController,
  child: Container(
    color: Colors.blueAccent,
    child: Column(
      children: [
        Text('이 화면을 캡처하여 공유할 수 있습니다!'),
      ],
    ),
  ),
),

• Screenshot 위젯을 사용하여 특정 부분을 감쌉니다.
• 이렇게 감싼 위젯을 screenshotController.capture()를 이용해 캡처할 수 있습니다.

(3) 캡처 후 공유 기능 구현

final image = await screenshotController.capture();

• capture()를 호출하면 Uint8List 타입의 이미지가 생성됩니다.

final directory = await getTemporaryDirectory();
final imagePath = File('${directory.path}/screenshot.png');
await imagePath.writeAsBytes(image);

• path_provider 패키지를 이용해 임시 디렉터리 경로를 가져옵니다.
• 캡처된 이미지를 파일로 저장합니다.

await Share.shareFiles([imagePath.path], text: '내 캡처 화면을 공유합니다!');

• share_plus 패키지를 사용하여 이미지와 함께 텍스트를 공유합니다.

4. 실행 결과

1. 앱을 실행하면 파란색 배경과 텍스트, 아이콘이 있는 화면이 표시됩니다.
2. 화면 하단의 공유 버튼(📤)을 누르면 해당 화면이 캡처됩니다.
3. 캡처된 이미지를 공유할 수 있는 팝업이 나타납니다.
4. 원하는 앱(카카오톡, 메일, 메시지 등)으로 공유할 수 있습니다.

5. 마무리

이제 screenshot 패키지를 활용하여 특정 위젯을 이미지로 변환하고, share_plus 패키지로 이를 공유하는 기능을 구현할 수 있습니다.

이 기능은 결과 화면 공유, 성취 인증, 메모 저장 등 다양한 용도로 활용할 수 있습니다.

 

📌 다음 기능도 추가할 수 있어요!

• 캡처한 이미지를 기기 갤러리에 저장하기
• 다양한 UI 디자인 적용하기
• 캡처 후 편집 기능 추가하기

이제 여러분의 Flutter 앱에도 캡처 & 공유 기능을 추가해보세요! 🚀

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 12 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱