【Flutter】WidgetからImageを生成する方法（Widgetのキャプチャ）

2020/02/01

WRITER

ロッキーカナイ

SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。

やること紹介

画像が表示される画面を作って、それをキャプチャして下部に表示されるものを作ってみる。

できあがったコードの紹介

こんな感じ。

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';


void main() {
  runApp(MaterialApp(home: MyHomePage()));
}


class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {

  // グローバルキー
  GlobalKey _globalKey = GlobalKey();
  // イメージ
  Image _image;

  @override
  Widget build(BuildContext context) {

    return RepaintBoundary(
      key: _globalKey,
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'キャプチャテスト',
          ),
        ),
        body: Container(
          child: Column(
            children: <Widget>[

              /*
               * 画像表示エリア
               */
              Expanded(
                child: Center(
                  child: Image.network(
                    "https://www.egao-inc.co.jp/wp-content/uploads/2018/12/aruru02-1.jpg",
                  ),
                ),
              ),

              /*
               * キャプチャ表示エリア
               */
              Container(
                color: Colors.yellow,
                height: 200.0,
                child: Center(
                  child: _image != null
                      ? _image
                      : Container(),
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {

            // キャプチャ開始
            _doCapture();
          },
        ),
      ),
    );
  }

  /*
   * キャプチャ開始
   */
  Future<Null> _doCapture() async {

    var image  = await _convertWidgetToImage();

    setState(() {
      _image = image;
    });
  }

  /*
   * _globalKeyが設定されたWidgetから画像を生成し返す
   */
  Future<Image> _convertWidgetToImage() async {
    try {
      RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      var pngBytes = byteData.buffer.asUint8List();
      return Image.memory(pngBytes);

    } catch (e) {
      print(e);
    }

    return null;
  }
}

RepaintBoundaryの子供になっているウィジェットが画像に変換される対象にしていますので、今回だとScaffold全体が画像になります。

それ以外にボタンだけとか対象のウィジェットだけ画像にするというのも可能です。

こんな感じにできました。

↓初期画面