Flutter Web モバイルブラウザでグラフを表示できない問題

2023/03/03に公開

Flutter Web

2年前からFlutterを使い始めて、web開発、デスクトップアプリ開発等に対応し始めて、もはや凄いとしか言えない代物になったが、実際に使っているとまだまだな部分が存在している。
今回Flutter Webを使った開発に参画し、一つの問題にぶち当たった。

ビルドしてホスティングした際にグラフが見れない問題

結論から言えば、この問題はビルドする際に以下のオプションをつけてしまえばいいだけの話ではある。

flutter build web --web-renderer canvaskit

その際に使用したパッケージとバージョン情報

fl_chart: ^0.61.0

CanvasKitでビルドした場合、Skia(Flutterの2Dグラフィックライブラリ)をWebAssemblyにビルドしてくれるらしい。
ただ、転送データが2MBが増えるためそこを考慮して、オプションを入れなかった場合、モバイルはHTMLレンダラー、デスクトップではCanvasKitが自動的に選択されるようになっている。

メモとして書き残しておきます。

Discussion