[Flutter] google_maps_flutterのマーカーアイコンを自由にカスタマイズしたい!

長くなるので記事参照。

アイコンのサイズを変更したい!

アイコン自体はBitmapDescriptor.fromAsset("image_path") で指定のPNG画像とかに変えられるが、サイズを変更できない。

やり方としては、BitmapDescriptorにはBitmapDescriptor.fromBytesとしてByteデータを指定することもできるため、一度Byteデータに変換する。そうすればサイズを自由に変更できるようになる。

参考(https://cloud6.net/so/google-maps/176216)

単体画像だけでなく、そもそもアイコン自体をもっとカスタマイズしたい!

例えば1,000通りの数字をピンに含めたいという場合、全ての画像を用意するのは現実的ではない。。

そこでもっと柔軟にアイコンをカスタマイズしたくなってくるが、なんとWidgetを指定する方法が存在する。

方法は同じくByteデータに変換する方法で、FlutterではKeyを指定したWidgetからByteデータを生成することができるため、それを活用する。

Widgetは1000個作る必要はなく、中の数字だけsetStateで入れ替えてByteデータを生成していけばよい。

参考(The Resultが最終的なコード)(https://medium.com/swlh/using-material-icons-as-custom-google-map-markers-in-flutter-3e854de22e2)

boundaryはそのままだとRenderObject型と認識されてtoImageメソッドでそんなメソッドねーよと怒られるので、RenderRepaintBoundary型でキャストしよう。

final boundary = iconKey.currentContext.findRenderObject() as RenderRepaintBoundary;