【Flutter】VSCodeでアウトラインを表示する神設定

結論

VSCodeの設定歯車＞settings＞flutter uiで検索＞「Dart: Preview Flutter Ui Guides」にチェックを入れる＞VSCodeを再起動（閉じて開く）

VSCodeでFlutterウィジェットの階層構造を視覚化する方法

Flutter開発において、ウィジェットが複雑にネストすると、コードの可読性が落ちがちです。しかし、VS Codeの設定を一つ変更するだけで、ウィジェットの階層構造をアウトラインとして視覚的に表示し、コードを読みやすくすることができます。

設定手順 (3ステップ)

Flutterコードの構造を一目で把握できるようにする設定方法は非常に簡単です。

1. 設定画面を開く: VS Codeの左下にある設定（歯車アイコン）をクリックし、「Settings」を選択します。
   
2. 設定を検索: 検索バーに「flutter ui」と入力します。
   
3. チェックを入れる: 検索結果に表示される「Dart: Preview Flutter Ui Guides」の項目にチェックを入れます。
   

反映と効果

設定を有効にした後、VSCodeを再起動（一度閉じてから開く）してください。

再起動後、Flutterウィジェットのコード（特にbuildメソッド内）を見ると、ネストされたウィジェットの開始タグと終了タグの間に、階層を示す縦線のアウトラインが表示されるようになります。

これにより、どのウィジェットがどのウィジェットの子要素なのかが視覚的に明確になり、複雑なUIの構造を素早く、正確に理解できるようになります。開発効率の向上にぜひ役立ててください。