Visual Studio Code で Flutter 開発しよう
Flutter
Visual Studio Code (以下 VS Code) は、軽くて使い勝手のいいエディタです。Flutter も公式サポートされています。Android Studio で開発することもできますが、個人的には VS Code で開発する方が好みです。
この記事では、VS Code で Flutter 開発する方法を紹介します。
ちなみに、この記事は以下のFlutter公式ドキュメントページを参考にしています。
もくじ
セットアップ
拡張機能をインストールする
Flutter と Dart の２つの拡張機能をインストールします。
プロジェクト作成
新しくプロジェクトを作成する
以下の手順で作成します。
- 「コマンドパレットを開く」(
Ctrl+Shift+P,Cmd+Shift+Pon macOS) - 「Flutter: New Project」を入力してEnterキーを押す
- 「Application」を選ぶ
- プロジェクトの保存場所を選ぶ
- プロジェクト名を決める
既存のプロジェクトを開く
プロジェクトフォルダを開くだけです。
コードの編集
エラーの確認・修正
エラーやワーニングがある場合は、「問題」に表示されます。Ctrl+Shift+M (Cmd+Shift+M on macOS)で「問題」を表示することができます。
エラーの箇所をダブルクリックすると、該当のソースコードにジャンプするので、すぐに修正できます。
また、電球マークを押すと修正案も提案してくれます。以下のように、使用していない変数をその場で削除してくれたりもします。
問題がなくなれば、以下のような表示になります。
アプリケーションの実行
デバイスを起動する
Flutterアプリを実行するデバイスを起動します。
VS Codeウィンドウの右下のステータスバーのデバイス（下記画像の iPhone 14 Pro Max と表示されている箇所）をクリックします。
すると、画面上部に下記画像のようなデバイス選択画面が表示されます。使用したいデバイスを選んで起動させます。デバイスは、WebアプリならChromeを、ネイティブアプリならiPhoneかAndroidを選べばOKです。
iPhone 14 Pro Max デバイスを選んだ場合は、以下のような iPhone のシミュレーターがMacの画面上に表示されます。
実行する
F5を押すか、「実行」メニューから「デバッグの開始」を選ぶだけです。
以下のように起動しているデバイスでアプリが実行されます。
アプリケーションのデバッグ
開発に便利なデバッグ機能を紹介します。
ブレイクポイントを指定する
プログラムを途中で止めて、処理の内容を確認したい場合はブレイクポイントを指定します。ブレイクポイントを指定した箇所で、プログラムを一時的に止めて、変数の値を確認したり、どこから呼ばれたかを確認することができます。
ブレイクポイントは、行番号の左隣をクリックすれば設定できます。
実行中にブレイクポイントの箇所にいくと、そこで実行が一時停止します。
「実行とデバッグ」パネルを表示すると、変数の値やコールスタック（呼び出し履歴）を確認できます。
デバッグを再開したり、ステップオーバー（１つ処理を進める）、ステップイン（関数の中に入る）などをする場合は、表示されているメニューバーで行えます。
製品モードで実行する
デフォルトで flutter は３つの実行モードが用意されています。
- Debug : デバッグ用途（普段の開発で使う。ホットリロードなどのデバッグ機能を使える）
- Release : 製品用途（最終の製品で動作するモード。デバッグ機能は使えない）
- Profile : 計測用途（製品相当だけど、計測に必要なデバッグ機能だけ使える）
モードは以下の箇所で切り替えることができます
まとめ
VS Code を使って Flutter を開発する方法を簡単にまとめました。