はじめに

VSCodeでFlutteのAndroid用のプロジェクトを作成する際に必要な手順をまとめます。

環境

インストール

VSCode

VSCodeは、アプリのコードを作成したり実行する際に必要になります。

インストール

こちらからダウンロードできます。

日本語化

Japanese Language Pack for Visual Studio Code という拡張機能を追加します。

Flutterの拡張機能の追加

Flutterの拡張機能も追加します。
(こちらからもインストールできます。)

インストールすると、Dartの拡張機能も自動で追加されます。

FlutterSDKのインストール、環境変数の割り当て

拡張機能がインストールされると、右下にSDKのダウンロードの催促を促すような通知が表示されるので、
「Download SDK」ボタンをクリックして、ダウンロード先を選択してダウンロードします。

インストールが完了すると、環境変数を追加するか確認されるので、
Add SDK to PATHで追加します

手動で環境変数を割り当てる手順も紹介しておきます。

1. Windowsキーを入力して、検索バーにenvと入力
   
2. システム環境変数の編集を開く
   
3. PATHの項目をクリック
   
4. ここに、Flutterのパスを追加する
5. FlutterのSDKがインストールされた場所を開き、binフォルダのパスを指定する
   

Flutter環境の確認

doctorコマンドで環境に問題ないかを確認できます。

1. VSCodeを開き、作成したプロジェクトを開く
2. Ctrl + Shift + @ で、ターミナルを開く
3. flutter doctor と入力

コマンドを入力すると、このように結果が表示されます。

! Doctor found issues in 1 category.

なお、VisualStudioの箇所でエラーが発生している可能性がありますが、Windowsアプリをビルドしない場合は問題ないので、無視で大丈夫です！

Android Studio

Android Studioは、Androidの端末を持っていなくても動作を確認できる、エミュレータを使用するために必要です。

インストール

こちらからダウンロードできます。

日本語化

こちらからプラグインをダウンロードします。

プラグインのバージョンは、Android Studioに対応しているものを選択してください！

Android Studioの左下の歯車マーク / バージョン情報 をクリックして、対応バージョンを確認できます。

今回使用しているバージョンは、#AI-241なので、241のものを選択します。

ダウンロードしたzipファイルをAndroidStudioに追加します。

1. Plugins / Install Pugin from Disk… をクリック
2. インストールしたzipファイルを選択
3. 追加したプラグインのRestart IDE をクリックして、AndroidStudioを再起動

SDKのインストール

その他のアクション / SDK Manager を選択して、SDKの管理画面を開けます

下記のSDKをインストールします。

また、実機デバイスで起動させたい方は、こちらもインストールします。

エミュレータの追加

PC上でAndroid端末を表示させて、操作できるエミュレータを追加します。
(実機で確認したい方は、こちらの手順をスキップしていただいても構いません。)

1. その他のアクション / Virtual Device Manager を選択
   
2. 中央の Create virtual device… をクリック
   
3. 適当なデバイスを選択して、「次へ」
   
4. API35を選択、インストールしていない場合は、 インストールアイコンをクリックして、そのイメージをインストールする
   
5. 適宜設定項目をいじる
   

実機デバイスでの実行

実際に所持しているAndroid端末で実行させたい場合、Android端末側で設定が必要です。

開発者モードの有効化

1. 設定 / デバイス情報
2. ビルド番号という項目を7回タップ
3. PINを入力して完了

USBデバッグの有効化

1. 設定 / システム / 開発者向けオプション
2. USBデバッグ を有効化

(引用元：https://developer.android.com/codelabs/basic-android-kotlin-compose-connect-device?hl=ja#2)

プロジェクトの作成、実行

プロジェクトの作成

1. VSCodeを開く
2. F1キーを入力
3. [flutter new]と入力してEnter
   
4. Applicationを選択
   
5. プロジェクトの作成先フォルダを選択
   
6. アプリ名を入力して作成
   
   • アプリ名は重複できません
   • アプリ名は、小文字しか利用できないっぽいです

実行

エミュレータを使用する場合

まず、エミュレータを起動する必要があります。

1. VSCodeを開き、Flutterプロジェクトを開く
2. VSCodeの右下のところの、No Device を選択
   
3. Start XXX API 35 をクリックして、指定のエミュレータを起動する
   
4. Androidの画面が表示されることを確認する
   
5. F5キーを入力して、アプリを実行する
6. 実行できたら成功！
   
   

実機を使用する場合

1. Android端末をWindowsとUSB接続する
2. 下図のようなダイアログが表示されたら、ファイルを転送 を選択
   
3. デバイスを選択して、自分の端末を選択
   
4. F5で実行

まとめ

初期セットアップ

プロジェクト毎に必要なセットアップ

最初の方はちょっと面倒ですが、毎回設定する必要はないです。
プロジェクトごとのセットアップ作業も、慣れればそこまで大変ではなさそうです。

当記事が参考になれば幸いです！

参考サイト

• Start building Flutter Android apps on Windows
• Android Studio をインストールする
• Android Studio Koala | 2024.1.1 日本語化
• Android Emulator のハードウェア アクセラレーションを設定する