Flutter on the Web でモバイルの時だけいろいろ消える

あらすじ

Flutter on the Web でアプリケーションを作成して、Serverにアップロードしました。
モバイルとデスクトップで挙動が違いましたが、ビルド設定を変えたら対応できました。

詳細

PC版Chromeでは正常に見れましたが、モバイルでいくつかのWidgetが消えてました。
モバイル版でも、「PC版サイトを見る」ボタンまたはチェックボックスを使うと、ちゃんと動きました。
具体的に消えていたのは、Appbar の Bottom に入れた Tab のタイトルや、Appbar title のSVG画像などです。

コマンド

flutter の build コマンドで、canvaskit を指定すると正常に表示されることが分かりました。

flutter build web --web-renderer canvaskit --release

canvaskit の代わりに html や auto を指定すると表示されなくなりました。
vscodeでのビルドタスクを見ると、
下記のようにデフォルトでは autoになっています。

.vscode/tasks.json

{
	"tasks": [
		{
			"type": "flutter",
			"command": "flutter",
			"args": [
				"build",
				"web",
				"--web-renderer=auto"
			],
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"problemMatcher": [],
			"label": "flutter: flutter build web"
		}
	]
}

これでいいと思う

• auto を canvaskit に変える
• args に --release を足す
• "group": {"kind": "build","isDefault": true},で、ショートカットキーが使える
  • Win : Ctrl+Shift+B
  • Mac : Shift+⌘+B

.vscode/tasks.json

{
	"tasks": [
		{
			"type": "flutter",
			"command": "flutter",
			"args": [
				"build",
				"web",
				"--web-renderer=canvaskit",
				"--release"
			],
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"problemMatcher": [],
			"label": "flutter: flutter build web"
		}
	]
}

参考

Webレンダラー | Flutter

まとめ

• まだbetaだけど、今のところsvgでしかバグに遭遇してない
• SVGがちょっとめんどい（別記事を書こうかな）
• 副産物というかcanvaskitにするとちょっと速い
• そして--releaseにするとちょっと速い
• flutter 最高
• flutterでサボろうクロスプラットフォームしよう！

Excelsior!