Flutterで画像を作成してファイルに保存する

Flutterで画像を描画して画像ファイルとして保存することができます。ウィジェットに描画したものを保存するなどはよく情報がありそうですが、今回はウィジェットで画面に表示せず、プログラム内のみで完結できる方法です。

下記はプログラム内でたくさん画像を作成し、その後それらを単に画像表示ウィジェットで表示している画面です。

今回はこのように、下記のような形で画像を作成します。

• Canvasを使って図形を描画
• 図形だけでなく、assetsの画像を読み込みんで描画する
• pngファイルとして保存する

Canvasの図形だけであれば簡単ですが、画像読み込み、保存を行う場合は、適切な型に揃える必要があるためすこしハマりどころがあります。

具体的なやり方としてはCanvasに描画を行います。CustomPainterで利用するものと同じものです。この描画処理をPictureRecorderから呼び出すことで画像に変換することができます。画像はバイトデータに変換し、Fileクラスを利用して保存します。

Canvas上に描画する画像も同様に、読み込んだらバイトデータからImageインスタンスを作成することで描画できるようにします。

一応上記の説明で調べればやり方は見つかりますが、具体的なコードは下記になります。