【Flutter】スクリーンショットを取る方法

はじめに

個人開発でスクリーンショットの機能がほしく、サンプルコードを実装しメモとして記します。今回はscreenshotパッケージを使用して、Widget のスクリーンショットを撮影する方法を解説します。

実装例

サンプルコード

https://github.com/muranakar/screenshot_sample

ライブラリ

https://pub.dev/packages/screenshot

スクリーンショットの基本実装

まず、スクリーンショットを撮影するための基本的な実装です。ScreenshotControllerを使用して、Widget のキャプチャを管理します。

main.dart

// コントローラーとキャプチャした画像を保持する変数の準備
ScreenshotController screenshotController = ScreenshotController();
Uint8List? imageFile;

// キャプチャ処理の実装
void _captureScreenshot() async {
  final image = await screenshotController.capture();
  setState(() {
    imageFile = image;
  });
}

ScreenshotControllerは、Widget のキャプチャを制御するためのクラスです。capture()メソッドを呼び出すことで、指定した Widget の現在の状態をUint8List形式の画像データとして取得できます。

キャプチャ対象の Widget 実装

次に、実際にキャプチャする Widget の実装方法です。

main.dart

Screenshot(
  controller: screenshotController,
  child: // 省略
)

キャプチャしたい Widget をScreenshotウィジェットでラップすることです。これにより、ScreenshotControllerがその Widget の領域を特定し、キャプチャすることができます。

非表示 Widget のキャプチャ

画面に表示されていない Widget もキャプチャできる機能を実装です。これは、カスタマイズされたプレビュー画像を生成する際などに便利です。

main.dart

void _captureInvisibleWidget() async {
  final image = await screenshotController.captureFromWidget(
    // 省略
  );
  setState(() {
    imageFile = image;
  });
}

captureFromWidgetメソッドは、実際に UI に表示されていない Widget もキャプチャできる機能です。このメソッドは、指定された Widget を一時的にメモリ上でレンダリングし、そのイメージを取得します。これにより、現在の画面状態に依存せずに、画像を生成することができます。

以上です。