ブログにDartPadを埋め込んでFlutterを実行

Flutterの紹介をブログでするのにDartPadGoogleが提供しているFlutterのDartPadを埋め込もうとしたところ、Error compiling to JavaScriptとエラーが表示されてしまいました。

理由はFlutterで採用されたNull Safetyが原因でした。簡単に解説していきます。

埋め込むDartPad
https://dartpad.dev/?null_safety=true&id=e75b493dae1287757c5e1d77a0dc73f1
Flutterで開発している人にはお馴染みのカウンターのサンプルプログラムです。
Null Safetyを採用して記載されています。

エラーが表示されるDartPadの埋め込み
「Run」ボタンをクリックするとError compiling to JavaScriptと表示されてUIが表示されません。

ちゃんと動作するDartPadの埋め込み
「Run」ボタンをクリックすると右側にカウンターの画面が表示され無事動作します!

上手くいった理由は?
iframeに指定するURLにnull_safety=trueを加えたことで解決しました!

<iframe src="https://dartpad.dev/embed-flutter.html?null_safety=true&id=e75b493dae1287757c5e1d77a0dc73f1&amp;split=80&amp;theme=dark" width="100%" height="400px"></iframe>

Flutterを紹介している記事もよかったらご覧ください!