Flutter Webでフォントや画像表示がおかしい場合の修正方法

1.25.0-17.2.pre(2021/2/5)からのアプデで、PCでFlutterWebで作られたアプリをみるとフォントがおかしくなってしまいました。絵文字も出たり出なかったり。そしてFirebase Storageに保存した画像が表示できなかったり。

ちなみにstableの2.0.0でも再現します。

正しい状態

おかしい状態

原因

多分例のバージョンからWebレンダラーの種類が追加されてHTML rendererとCanvasKit rendererのどちらかを選ぶようになった模様。

https://flutter.dev/docs/development/tools/web-renderers

で、Command line optionsに書かれているのは以下で、

auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.

何も書かない場合は、スマホだとHTMLレンダラー、PCだとCanvasKitになるらしい。

記事的には、autoにするのが最適って書いてあるけど、表示おかしくなるのでCanvasKitはダメそう。

改善方法は「--web-renderer html」をつけること

optionでhtmlレンダラーを指定すれば良いです。

コマンドでビルドする場合、こんな感じ↓

flutter build web --web-renderer html

また、Android　Studioならこんな感じでoptionをつけると良さそう↓

以上。