開発

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

こんにちは。

スマホアプリをメインに開発しているロッキーカナイです。

Flutter関連の記事を載せさせてもらっている関係で、何か面白いことができないかとネットを漁っていたら、こんな記事を見つけました。

Flutter Widget to Image

なんと「Widgetを画像に出力できるよ」という内容なのです。

スクリーンキャプチャならぬウィジェットのキャプチャができまっせという感じ。実用方法はぱっと思いつきませんが、面白そうだったので、記事にしてみました。

 

やること紹介

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

 

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

こんな感じ。

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

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

 

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

↓初期画面

↓フローティングボタンを押下で、

キャプチャした画像が表示されました。

ちなみに猫の画像は、新宿のカフェアルルさんの入り口にあるオブジェです。

 

最後に

今後もFlutterのまじめな記事や今回のような面白そうな記事があったらまた紹介したいと思います。

 

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