いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

Flutterメモ-18 (VSCodeでPreview Flutter Ui Guidesを有効にする)

概要

忘れないうちにここにメモメモ・・・。

たまに、Flutterの記事あげてらっしゃる方々のソースを見ると、VSCodeでウィジェットの階層がキレイなガイドラインで表示されているのをよく見ます。

こんなの。

https://codereis.com/images/blog/vscode/flutter_ui_example.png

私のVSCodeには、こんなキレイなガイドライン出てないんだけど・・・って思ってましたw

んで、以下の記事を発見。

codereis.com

その記事内に、「設定で Preview Flutter UI Guides を有効にしな」って書いてありました。

探してみると、確かにその設定項目がありました。

f:id:gsf_zero1:20210924185312p:plain

まだ、実験的な設定みたいですね。

dartcode.org

ちなみに、設定する前はいつも通り、こんな感じ。

f:id:gsf_zero1:20210924185410p:plain

設定して、ウィンドウを再読み込みしてやると有効になります。こんな感じになりました。

f:id:gsf_zero1:20210924185524p:plain

ガイドラインが出るようになった!

参考情報

dartcode.org


過去の記事については、以下のページからご参照下さい。

  • いろいろ備忘録日記まとめ

devlights.github.io

サンプルコードは、以下の場所で公開しています。

  • いろいろ備忘録日記サンプルソース置き場

github.com

github.com

github.com