【Flutter】Android StudioやVSCodeの便利機能を活用して開発効率UP！

はじめに

株式会社メンバーズ Cross Application カンパニーの柴田です。

本記事では、効率的にFlutterアプリ開発を行うためのTipsを紹介します。Flutterアプリ開発特有の便利な機能に加え、IDEや拡張機能が提供する様々なツールやショートカットを活用することで、単純作業を減らして開発効率を向上させることができます。

本記事に加えて、FlutterのDevToolsを活用することも開発効率UPにつながります。DevToolsに関して詳しくはこちらもご確認ください。

それでは、さっそく見ていきましょう。

動作確認環境

本記事では以下の環境で動作確認を行なっています。

❯ flutter --version
Flutter 3.29.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 35c388afb5 (9 days ago) • 2025-02-10 12:48:41 -0800
Engine • revision f73bfc4522
Tools • Dart 3.7.0 • DevTools 2.42.2

❯ studio --version
Android Studio Ladybug | 2024.2.1 Patch 2
Build #AI-242.23339.11.2421.12550806

❯ code --version
1.96.4
cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba
arm64

❯ sw_vers
ProductName:		macOS
ProductVersion:		14.7.1
BuildVersion:		23H222

Copy

開発効率UPのためのTips

1. リファクタリング

Android Studioであれば option + return、 Visual Studio Code（以下VSCode）であれば command + . というショートカットを呼び出すと様々なリファクタリングが簡単にできます。現在カーソルがあっているコードによって、表示されるメニューが異なります。以下はその場面ごとに表示されるメニューを紹介します。

lintエラーが出ている箇所

一部のlintエラーはDart Analysisによるlint自動修正が可能です。波下線があればとりあえず開いて確認してみましょう。

FlutterのWidget

適当なFlutter Widget上でこのショートカットを呼び出すことで以下のようなメニューが表示されます。さらに細かい条件によって表示されるメニューに変化はありますが、条件が複雑なため本記事では割愛させていただきますが、使っていく中で法則がわかってくると思います。

• Wrap with ~
  自身の親にWidgetを追加することができます。この機能を使うことで、「カッコが足りてなくてエラー？」「カッコが多くてエラー？」という事態を回避できます。ここに表示されていないWidgetを追加した場合は、「Wrap with widget…」を選択して、「widget」の部分を書き換えてください。また、riverpodのConsumerのように引数にbuilderを持つWidgetは、一度「Wrap with Builder…」を選択し、それを元に必要な修正を行なっていくことをおすすめします。

  

• Remove this widget
  自身を削除することができます。childにWidgetが設定されている場合は、このオプションが表示されます。

• Swap with ~
  親もしくは子と自身の位置を入れ替えることができます。

関数の「 { 」または関数の「 => 」

「Convert to Block Body」または「Convert to expression Body」と表示されます。関数内の記述が1文のみの時に関数の書き方を短縮形式にしたり、通常の形にしたりすることができます。

StatelessWidgetやStatefulWidget

「Convert to StatelessWidget」または「Convert to StatefulWidget」が表示されます。StatelessWidgetとStatefulWidgetの変換ができます。

三項演算子の?前の条件部分

「Invert conditional expression」が表示されます。条件を反転することができます。なんとorやandがあってもド・モルガンの法則に従い正しく条件を反転できます。

マウスで適当な領域をドラッグにて選択

「Surround with ~」が表示されます。選択した領域を囲むように、ifやtry等を追加することができます。選択範囲が複数行にわたる場合に閉じカッコを見失わないので便利です。

文

VSCodeだと「Extract Method」「Extract Local Variable」「Extract Widget」が表示されます。メソッドや変数、Widgetクラスに切り出すことができます。Android Studioでも、右クリック > Refactorで同等の機能が実現できます。どちらも似た動きをしますが、Android Studioの方が対応しているコードの種類や複雑さの観点で優れています。

ライブテンプレート

ライブテンプレートとはインタラクティブなコードスニペットです。定型文の作成はこの機能を使うことで楽をすることができます。

StatelessWidget StatefulWidget

「stless」「stful」と入力しtabを押すことでStatlessWidgetやStatefulWidgetのライブテンプレートを呼び出すことができます。その後クラス名とコンストラクタ名にカーソルが合っている状態になるので、そのままクラス名を入力することで、コンストラクタも一度に作成可能です。

プラグイン

普段メインで使用しているのがAndroid Studioなので、Android Studioのプラグイン のみを紹介しますが、Visual Studio Codeにも似たような拡張機能があると思います。
詳しくは説明しませんが、それぞれ便利なライブテンプレートが用意されています。詳細は各プラグインのREADME等をご確認ください。

1. Flutter Enhancement Suite
Flutter全般のライブテンプレート。他にもアップデート可能なパッケージをpubspec.yamlで強調表示する等多機能なプラグイン。
https://plugins.jetbrains.com/plugin/12693-flutter-enhancement-suite

2. Flutter Riverpod Snippets
riverpod向けのライブテンプレート
https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets

3. Flutter Freezed Snippets
freezed向けのライブテンプレート
https://plugins.jetbrains.com/plugin/18258-flutter-freezed-snippets

debugモード時にコード実行

debugモードでブレークポイントでアプリが停止している時に、その場所での変数の値、式の評価等をリアルタイムで確認することができる機能があります。
この機能を使うことで、printデバッグでの何度もプログラムを再実行する手間から解放されます。
Android Studioであればコード上で右クリックをし「Evaluate Expression」を選択すると呼び出すことができます。VSCodeではDEBUG CONSOLEの一番下の「>」にDartの式を入力することでこの機能を利用できます。

以下の画像では、buildメソッド内にブレークポイントを設置してアプリを停止させ、contextを用いて画面幅を「MediaQuery.of(context).size.width」で確認しています。

その他のショートカット・便利機能

Rename

Android Studioでは Shift + F6、 VSCodeではF2で呼び出すことができます。MacではF2やF6を呼び出す際にデフォルトの状態ではfnキーも同時に押す必要がありますのでご注意下さい。このショートカットを利用すると変数、クラス名、メソッド名、ファイル名等を構文を解析した上で一括編集できます。余計な場所を置換してしまう事故は発生しません。

定義元・参照先ジャンプ

cmd(⌘)キーを押しながら変数やクラス名をクリックすると定義元のファイルに移動することができます。
似たような機能ですが、Android Studioだと以下の画像のように抽象クラス、インターフェースの左隣に青い丸ボタンが表示されます。このボタンをクリックすると実装先に絞って一覧表示がされます。おそらくVSCodeにはない機能です（私が知らないだけかもしれません）。依存性逆転(DIP)を多く行なっているコードでは非常に便利な機能です。

ファイル名で検索

Android Studioではshiftを2回押し、VSCodeではcommand + Pでファイル名でファイル検索が可能です。

プロジェクトファイル全体で文字列検索

Android Studio・VSCode共通してcommand + shift + Fで全ファイルの文字列検索が可能です。Text Widgetの文字を手がかりに該当ファイルを探す時や、使用されているWidget名に心当たりがある時に活用できます。
こちらの記事にある絞り込み設定を行うと、より検索がしやすくなります。Android Studio用の記事ではありますが、VSCodeでも同様の絞り込みは可能です。

表示中のファイルの場所表示

VSCodeであれば、現在表示中のファイルの場所が自動でExploerに表示されますが、Android Studioでは自動では表示されません。代わりに赤枠で囲ったボタンをクリックするとファイルの場所を確認できます。

まとめ

今回は、Flutterアプリ開発を効率的に進めるための様々なTipsを紹介しました。ぜひ、今日から取り入れてみてください。紹介した機能は多いですが、一つずつ習得して単純作業を減らし開発効率を高めていきましょう！