FlutterでCanvasで作った図形をビットマップ画像に変換する

FlutterでGoogleMapを使用するためのパッケージ google_maps_flutter を設定するにあたり、マーカーを独自に設定する必要がありました。
ビットマップイメージに変換する事に馴染みがなく、思いのほか手こずったので、共有したいと思います。

使用しているツールのバージョン

• Dart SDK version: 2.10.4
• Flutter version: 1.22.5
• google_maps_flutter: ^1.0.6

やりたいこと

• Canvasで作った図形をマーカーとして表示したい

難しかったこと

• Canvasで作った図形は、マーカーとして直接指定できない
• GoogleMapに渡すには、画像データに変換する必要がある

main.dart

import 'dart:ui' as ui;

// Canvasの図形をビットマップにして返す
Future<BitmapDescriptor> getMarker() async {

  // Canvasの命令をレコーディングするPictureRecorderを宣言
  final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();

  // Canvasにレコーダーを設定
  final Canvas canvas = Canvas(pictureRecorder);

  // 塗り潰しを設定
  final Paint paint = Paint()
    ..isAntiAlias = true
    ..color = Colors.orange
    ..strokeWidth = 1.0
    ..style = PaintingStyle.fill;

  // 図形を描いていく
  var path = Path();
  path.moveTo(xxx, xxx);
  path.lineTo(xxx, xxx);
  .......
  canvas.drawPath(path, paint);

  // レコーディング完了、Imageに変換
  final image = await pictureRecorder.endRecording().toImage(xxx, xxx);
  // PNGのバイトデータに変換
  final data = await image.toByteData(format: ui.ImageByteFormat.png);
  // バイトの配列に変換
  final Uint8List bytes = data.buffer.asUint8List();
  // バイトをビットマップに変換
  return BitmapDescriptor.fromBytes(markerIcon);
}

BitmapDescriptor は google_maps_flutter に定義されているクラスで、マーカーの定義クラスです。