FVM で Windows上での Flutter の開発構築のメモ（＋ Androidアプリの開発環境も）

## はじめに
以下の記事で書いていた Flutter・Androidアプリの開発環境に関わる話です。

●Flutter・Androidアプリの開発環境を作った時のメモ（Mac） - Qiita
　https://qiita.com/youtoy/items/434020813fc4dde00131

上記では Mac で環境を作っていましたが、今回は Windows での環境構築です。

## FVM のインストール
今回、Flutter のバージョン管理を行える FVM を利用します。

冒頭の記事は Mac での環境構築でしたが、FVM のインストールに Homebrew を使っていました。
今回の Windows上では、以下の記事でも登場しているパッケージ管理システムの「Chocolatey」を利用します。

●Windows 11 の PowerShell で Chocolatey をインストールした際のメモ - Qiita
 https://qiita.com/youtoy/items/ef213c7ee6d47f0e304b

コマンドは、以下の公式ドキュメントに書かれているものです。

●Installation – FVM
 https://fvm.app/documentation/getting-started/installation

![2025-01-25_22-42-30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/09b85c11-5f02-a87b-9886-43e9a3539c74.jpeg)

FVM をインストールするためのコマンドを実行する際には、ターミナル／PowerShell を管理者権限で起動しておく必要があります。
管理者権限でのターミナル／PowerShell の起動方法は、上でも掲載していた記事の中の「[管理者権限で PowerShell を起動する](https://qiita.com/youtoy/items/ef213c7ee6d47f0e304b#%E7%AE%A1%E7%90%86%E8%80%85%E6%A8%A9%E9%99%90%E3%81%A7-powershell-%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B)」を参照してください。

### インストールコマンドの実行
インストールコマンドとなる `choco install fvm` を実行します。

![2025-01-25_22-16-51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c2762979-c750-4cc6-cec9-4e1ff6d25299.jpeg)

:::note warn
ターミナル／PowerShell が管理者権限ではない場合、以下のように管理者権限で実施するようにというメッセージがでます。これはとりやめて、あらためて管理者権限で実行してください。

![2025-01-25_21-53-40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/93cd8efd-f448-96d8-07b3-073e0497359b.jpeg)
:::

上記の処理を管理者権限で実行できていたら、この後に「Do you want to run the script?([Y]es/[A]ll - yes to all/[N]o/[P]rint):」と聞かれます。

そこで「Y」を入力して決定すれば、後は以下のようになってインストール完了です。

![2025-01-25_22-29-36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/72003423-d6e7-5b36-0fff-12fc6761c9e4.jpeg)

### 完了できたかを確認する

確認のため `fvm -v` を実行して、バージョン番号が表示されるか確かめると良いです。

![2025-01-25_22-30-43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cba353b9-a232-1664-21cb-67f807f1e95c.jpeg)

## Flutter  のインストール
FVM を使って Flutter をインストールしていきます。

インストール可能な Flutter のバージョンや安定版は、以下のように `fvm releases` コマンドで確認できます。 

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6377be9b-8a47-b64e-6377-23819cf883ff.jpeg">

### 特定のバージョンを指定してインストール

今回、上記の中の 3.27.3 をインストールしてみます。
コマンドは以下のとおりです。

```powershell
fvm install 3.27.3
```

以下のように表示されていればインストール完了です。

![2025-01-25_22-48-37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2ac17ba2-15a8-2b41-d10a-d2ed8b7166b5.jpeg)

ひとまず、システム全体で使える（グローバルで使える）バージョンを上記に設定します。
そのために実行するコマンドは、以下のとおりです。

```powershell
fvm global 3.27.3
```

`fvm global` コマンドはシステム全体へ影響するものであるため、管理者権限のターミナル／PowerShell で実行する必要があります。

#### 完了しているかを確認する
以下のコマンドを実行して、Flutter のバージョンを確認できます。

```powershell
fvm flustter --version
```

また `fvm list` を実行すると、以下のように現状の設定状況を確認できます。

![2025-01-25_23-07-45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f94e912a-f0fd-5c37-c37d-f0de5ce97651.jpeg)

## 環境構築の続き

ここで以下のコマンドを実行して、環境構築の状態を確認してみます。

```powershell
fvm flutter doctor
```

自分の場合、以下の内容が表示されました。

![2025-01-25_23-06-23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0a210fb9-5f28-a5a9-a207-f24cbb10dc81.jpeg)

今回、Androidアプリの開発環境を作ろうと思うので、それに該当する部分の対応を行います。

### Android Studio のインストール

Android Studio をインストールします。

以下からダウンロードページへと進み、Android Studio をインストールするための EXEファイルをダウンロードします。

●Android Studio とアプリツールのダウンロード - Android デベロッパー  |  Android Developers
　https://developer.android.com/studio/releases?hl=ja

そして、EXEファイルを実行して Android Studio をインストールし、インストール後は以下のウィザードを進めていきます。
このあたりの話は色々なところで書かれていると思うので、ここでは詳細は省略します。

![2025-01-25_23-15-56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ca0f73a3-7412-ee09-73e0-af70de3e4a67.jpeg)

基本的にデフォルト設定で進めていきました。

以下のコンポーネントのダウンロードの完了後、Android Studio を起動できるかとおもいｍ

![2025-01-25_23-18-12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/244ee071-2366-4188-278e-f9f2676771ab.jpeg)

### Android Studio関連の作業の続き

#### プラグインのインストール
Android Studio上で、Flutter用のプラグインをインストールします。

左メニューの「Plugins」を選び、その右で「Flutter」が選択された状態で、一番右の部分にある「Install」を押しましょう

![2025-01-25_23-21-38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/20a7dfa0-0cbb-687b-efa9-1bd3d0144a80.jpeg)

インストール後に Android Studio の再起動を求められるので、再起動します。

再起動後は、以下のように Flutter用のプロジェクト作成のアイコンが表示されると思います。

![2025-01-25_23-24-22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5a619923-5e11-265a-a6d7-12e107de9d88.jpeg)

#### コマンドラインツールの追加
ここでトップ画面の「More Actions」から、「SDK Manager」を選びます。

![2025-01-25_23-28-59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2d53936a-3b8b-0c23-e4ac-b870646ee14c.jpeg)

そして、SDK Manager の「Android SDK」で以下をインストールしました。

![2025-01-25_23-31-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1779e5fd-f682-6fba-76ff-084fe9f0638f.jpeg)

#### ターミナル／PowerShell での設定まわり
ターミナル／PowerShell に戻り、また以下のコマンドを実行してみます。

```powershell
fvm flutter doctor
```

そうすると、自分の場合は adb関連のダイアログが表示されたので、これを許可しました。

また、以下を実行してライセンスの承諾を進めていきます。

```powershell
fvm flutter doctor --android-licenses
```

「Accept? (y/N):」に対して「y」で承諾を進めていくと、「All SDK package licenses accepted」と表示され、ライセンスの承諾は完了になります。

ここで　`fvm flutter doctor` を実行した際に、以下のようになっていれば OK です。

![2025-01-25_23-34-41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/57ff107b-2e2a-d0f7-6c75-acf0660db550.jpeg)

## Flutterアプリのビルドなど

それでは Flutterアプリのビルドなどを試していきます。

### Flutter の SDK に関する設定
Flutter の新規プロジェクトを作成します。
そして、以下で SDK のパスの入力を求められます。

![2025-01-25_23-54-15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/99ab3fcb-e81c-4e87-e9e2-74052678da95.jpeg)

今回、グローバルで設定したものを使う場合は以下を指定します。

```
C:\Users\【Windowsのユーザー名】\fvm\default\
```

なお今の設定で、上記の実体は以下となるようです。

```
C:\Users\【Windowsのユーザー名】\fvm\versions\3.27.3\
```

### プロジェクトの設定

その後の画面では、適当なプロジェクト名で Android のみを対象としたような、以下のプロジェクトを作成しました。

![2025-01-25_23-55-44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d085265a-d1b3-2268-8e82-b6d68522d228.jpeg)

以下の表示が右下に出たものは「Automatically」を選びました。

![2025-01-25_23-37-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fbdf394f-e840-e9fa-cb59-c8f4ff88c342.jpeg)

その後、[Mac でのセットアップを行った記事](https://qiita.com/youtoy/items/434020813fc4dde00131)でも書いていた、[プロジェクトでの Android SDK の設定](https://qiita.com/youtoy/items/434020813fc4dde00131)を行いました。

そのために、以下を開きます。

![2025-01-26_00-04-54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5046bbff-4840-60fd-eb0f-dea58e200370.jpeg)

以下の「No SDK」となっている部分は、Androio の SDK を選択します。

![2025-01-26_00-06-12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c809a03a-e558-54de-a764-9389ed30e8f8.jpeg)

### Androidの実機の設定

この後、Androidの実機でビルドしたアプリを動かしていきます。

Android端末へビルドしたアプリをインストールするための準備・設定は、色々な記事で書かれていますので、ここでは省略します。

それが完了している状態で、以下のように実機がインストール先になっているのを確認して、ビルドを行いました。

![2025-01-26_00-07-39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/33a6586e-b210-a57d-9787-f8e69b7dddca.jpeg)

#### 実機でアプリを動かす

ビルドが無事成功し、以下のように実機でアプリを動かすことができ

https://x.com/youtoy/status/1883173116916154666