Flutter備忘録: DartPadでブログ内にFlutter/Dartコードをページ幅で表示する方法
最近、 FlutterのAPIドキュメント を良く眺めていますが、ドキュメントのページ内に含まれるサンプルコードの一部はブラウザ上で実際に実行して結果を確認出来る仕様になっています。 例： AnimatedList 、 FutureBuilder 、 PhysicalShape クラスなど 少し気になったので仕組みを検索した処、Webページのソースに『 DartPad 』というJavaScriptで書かれたオープンソースのスクリプトを組み込む事でFlutter/Dartで書かれた任意のコードがブラウザ上で実行可能になるそうです。 このサイトで、これまでに、いくつかのFluterコードを含む備忘録をメモしているので、今後のメモに使えるのではと思い、『 DartPad 』を使ってみました。 DartPadのWikiの 組み込みガイド にはGitHubのgistを表示する方法(①)と、タグ内にコードを埋め込む方法(②)の2つが紹介されていますが、この備忘録では後者の②を使った方法を簡単に紹介しています。 悲報: ②サポート終了 ②の方法はページが比較的重くなるという理由で廃止になった様です。 組み込みに使うスクリプト「inject_embed.dart.js」が削除されているので、以前②の方法でDartPadを表示していた場合は読み込みエラーになるのでDartPadは表示されなくなっています。 でも 、上記のガイドの通りにするだけだと、実際にページ内に表示されるDartPadの幅が300px程度しかなく、小さすぎて使い物になりませんでした。 そこで、CSSやJSを使って修正を加えたらDartPadをページ幅で表示が出来たので、 解決方法 もこの記事で紹介しています。 キーワード : #DartPadが小さい #DartPadをページ幅で表示する方法 [目次] DartPad組み込みガイド Converting code blocks to DartPad (コードブロックをDartPadに変換)
