#Dart | #Flutter | #Android Studio

November 30, 2025

Flutter開発で使えるAndroid Studioのtips

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機能を使うと、自動生成ファイルを元のファイルの配下にネストして表示できます。

  1. プロジェクトツリーの右上にある歯車アイコン（設定アイコン）をクリック
  2. メニューから「File Nesting」を選択
  3. ダイアログが表示されるので、以下のパターンを追加します：

親ファイルのパターン: .dart 子ファイルのパターン: .freezed.dart; .g.dart

これで設定完了です。

結果

File Nestingを設定すると、自動生成ファイルが元のファイルの配下に階層表示されるようになります。

  • user.dart
    • user.freezed.dart
    • user.g.dart

ファイルツリーがスッキリして、プロジェクトの見通しが良くなります。 自動生成ファイル用に別ディレクトリを作る必要もなくなるので、ファイル構成もシンプルに保てます。

Widgetを別のWidgetで囲む

既存のWidgetを別のWidgetで囲みたいとき、手動で書くのは面倒です。 Android Studioには便利なショートカットが用意されています。

使い方:

  1. 囲みたいWidgetにカーソルを合わせる
  2. Option + Enter (Mac) / Alt + Enter (Windows/Linux) を押す
  3. 「Wrap with widget」を選択
  4. 囲みたいWidget名を入力（例: Container, Padding, Center など）

よく使うパターンとして以下もあります：

  • 「Wrap with Padding」- Paddingで囲む
  • 「Wrap with Center」- Centerで囲む
  • 「Wrap with Container」- Containerで囲む

不要なWidgetを削除する

逆に、親Widgetを削除して子Widgetだけを残したいこともあります。

使い方:

  1. 削除したいWidgetにカーソルを合わせる
  2. Option + Enter (Mac) / Alt + Enter (Windows/Linux) を押す
  3. 「Remove this widget」を選択

親Widgetが削除され、子Widgetがそのまま残ります。

Live Templatesでコードスニペットを登録

よく使うコードパターンをLive Templatesに登録しておくと、タイピング量を大幅に削減できます。

設定方法:

  1. Preferences (Mac) / Settings (Windows/Linux) を開く
  2. Editor → Live Templates を選択
  3. + ボタンをクリックして新しいテンプレートを追加

例: Freezedモデルクラスのテンプレート

Abbreviation: freezed

import 'package:freezed_annotation/freezed_annotation.dart';

part '$FILE_NAME$.freezed.dart';
part '$FILE_NAME$.g.dart';

@freezed
abstract class $NAME$ with _$$$NAME$ {
  const factory $NAME$({
    $END$
  }) = _$NAME$;

  factory $NAME$.fromJson(Map<String, dynamic> json) =>
      _$$$NAME$FromJson(json);
}

変数の設定:

  • $FILE_NAME$: ファイル名を自動取得（Expression: fileNameWithoutExtension()）
  • $NAME$: クラス名を入力
  • $END$: カーソルの最終位置

これで freezed と入力して Tab キーを押すだけで、Freezedモデルクラスの雛形が生成されます。必要なimport文やpart文も自動的に設定されるので、すぐにプロパティの定義を始められます。

Dartfmtの自動実行

コードを保存するたびに自動的にフォーマットする設定をしておくと、チーム開発でコードスタイルを統一しやすくなります。

設定方法:

  1. Preferences (Mac) / Settings (Windows/Linux) を開く
  2. Languages & Frameworks → Flutter を選択
  3. 「Format code on save」にチェックを入れる

これで保存時に自動的に dart format が実行されます。

Extract Widgetでコードを整理

長くなったWidgetツリーを分割してコードを整理したいとき、Extract Widget機能が便利です。

使い方:

  1. 抽出したいWidget部分を選択
  2. Command + Option + W (Mac) / Ctrl + Alt + W (Windows/Linux) を押す
  3. または右クリックして「Refactor」→「Extract」→「Extract Flutter Widget」を選択
  4. 新しいWidget名を入力

選択した部分が自動的に新しいWidgetクラスとして抽出され、元の位置にはそのWidgetの呼び出しが配置されます。 コンストラクタの引数も自動的に作成してくれるので、リファクタリングが非常に楽になります。

ちなみに「Extract Widget」だとbuildHogeとして関数が定義されます。

Flutter Inspectorでレイアウトをデバッグ

レイアウトの問題をデバッグするときは、Flutter Inspectorが非常に強力です。

起動方法:

  1. アプリをデバッグモードで実行
  2. 下部の「Flutter Inspector」タブを開く

便利な機能:

  • Select Widget Mode: 画面上のWidgetをクリックして選択できる
  • Toggle Platform: iOS/Androidの表示を切り替え
  • Debug Paint: Widgetの境界線を表示
  • Paint Baselines: テキストのベースラインを表示
  • Slow Animations: アニメーションをスローモーションで確認
  • Show Performance Overlay: FPSやGPU使用率を表示

特に「Debug Paint」は、なぜレイアウトが思い通りにならないのか視覚的に確認できるので、レイアウト調整の際には必須です。

Bookmarksで重要箇所にすぐアクセス

大きなプロジェクトでよく編集するファイルや重要な箇所にブックマークをつけておくと、すぐにジャンプできます。

使い方:

  • ブックマーク追加: F3 (Mac/Windows/Linux)
  • 数字付きブックマーク: Command + F3 (Mac) / Ctrl + F3 (Windows/Linux) を押してから数字キー
  • ブックマーク一覧表示: Command + F3 (Mac) / Ctrl + F3 (Windows/Linux)
  • 数字ブックマークへジャンプ: Ctrl + [数字] (Mac/Windows/Linux)

数字付きブックマークを使えば Ctrl + 1 などですぐにその場所にジャンプできます。

Structure Viewでクラス構造を把握

大きなファイルの中で特定のメソッドやフィールドを探すとき、Structure Viewが便利です。

表示方法:

  • Command + F12 (Mac) / Ctrl + F12 (Windows/Linux)
  • または左サイドバーの「Structure」タブ

クラスのメソッド、フィールド、コンストラクタなどが一覧表示され、クリックでジャンプできます。 検索ボックスで絞り込みもできるので、大きなファイルでも目的のメソッドにすぐアクセスできます。

File Watcherでbuild_runnerを自動実行

Freezedやjson_serializableを使っている場合、ファイルを保存するたびに自動的に build_runner を実行する設定ができます。

設定方法:

  1. Preferences (Mac) / Settings (Windows/Linux) を開く
  2. Tools → File Watchers を選択
  3. + ボタンをクリック
  4. 以下のように設定：
    • Name: Build Runner
    • File type: Dart
    • Scope: Project Files
    • Program: $ProjectFileDir$/flutter
    • Arguments: pub run build_runner build --delete-conflicting-outputs
    • Working directory: $ProjectFileDir$

これでDartファイルを保存すると自動的にコード生成が実行されます。 ただし、ファイル数が多いプロジェクトでは実行時間がかかるので、手動実行と使い分けるのがおすすめです。

Similar articles:

© AAkira 2023