Flutter開発でAndroid Studioを使っていると、Freezedなどのコード生成ライブラリによって生成されるファイルがプロジェクトツリーに散らばって見づらくなることがありますよね。 今回は、File Nestingを使った自動生成ファイルの整理方法と、その他の便利なAndroid Studioのtipsを紹介します。
File Nestingで自動生成ファイルを整理する 課題 Flutterでモデルクラスを作成する際、Freezedを使うと .freezed.dart や .g.dart といった自動生成ファイルが作られます。 これらのファイルが増えてくると、プロジェクトツリーが煩雑になり、目的のファイルを探すのが大変になってしまいます。
例えば、user.dart というファイルを作ると、以下のようなファイルが生成されます:
user.dart user.freezed.dart user.g.dart これが複数のモデルファイルで発生すると、ファイルツリーが非常に見づらくなります。
File Nestingの設定方法 Android StudioのFile Nesting機能を使うと、自動生成ファイルを元のファイルの配下にネストして表示できます。
プロジェクトツリーの右上にある歯車アイコン(設定アイコン)をクリック メニューから「File Nesting」を選択 ダイアログが表示されるので、以下のパターンを追加します: 親ファイルのパターン: .dart 子ファイルのパターン: .freezed.dart; .g.dart
これで設定完了です。
結果 File Nestingを設定すると、自動生成ファイルが元のファイルの配下に階層表示されるようになります。
user.dart user.freezed.dart user.g.dart ファイルツリーがスッキリして、プロジェクトの見通しが良くなります。 自動生成ファイル用に別ディレクトリを作る必要もなくなるので、ファイル構成もシンプルに保てます。
Widgetを別のWidgetで囲む 既存のWidgetを別のWidgetで囲みたいとき、手動で書くのは面倒です。 Android Studioには便利なショートカットが用意されています。
使い方:
囲みたいWidgetにカーソルを合わせる Option + Enter (Mac) / Alt + Enter (Windows/Linux) を押す 「Wrap with widget」を選択 囲みたいWidget名を入力(例: Container, Padding, Center など) よく使うパターンとして以下もあります:
「Wrap with Padding」- Paddingで囲む 「Wrap with Center」- Centerで囲む 「Wrap with Container」- Containerで囲む 不要なWidgetを削除する 逆に、親Widgetを削除して子Widgetだけを残したいこともあります。
Read more