MacでFlutterの環境構築とバージョン管理~Visual Studio Code~

[NEXTSCAPEアプリチーム](https://app.nextscape.net/)の横井です。
今回は、MacでVisual Studio Codeを用いたFlutterの環境構築を行いたいと思います。
Flutterの環境は、Visual Studio Code・Android Studioの２つの選択肢があります。
NEXTSCAPEアプリチームでは、Android Studioで基準となる環境を整備していくことが多いですが、Visual Studio Codeの方が動作が軽いため、両方の環境を使いわけて開発をおこなっているメンバーもいます。
また、実際の開発では複数のプロジェクトを並行してこなすこともあります。そのため、複数のFlutter環境を並行して構築できるようバージョンを管理すると便利です。今回はFlutterのバージョン管理ツールであるFVMについても併せてご紹介します。

## 環境
macOS Monterey 12.4 
Xcode 13.3.1
Visual Studio Code 1.70.0(Universal)
Flutter 2.10.4
FVM 2.4.1
Homebrew 3.5.10
## 環境構築手順
### Flutter SDKのインストール
[公式サイト](https://docs.flutter.dev/get-started/install/macos
)よりFlutterSDKをインストールします。
今回インストールしたバージョン：https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.10.4-stable.zip
ダウンロードしたZIPファイルを適当な場所に展開します。
今回は、ユーザーフォルダ配下にdevelopmentフォルダを作成して展開します。
>/Users/●●●/development/flutter
### PATHの設定
設定ファイルを開きます。
```
open ~/.zshrc 
```
PATHを設定します。(先ほどFlutterSDKを展開したフォルダ/flutter/bin)
```
export PATH="$PATH:/Users/●●/development/flutter/bin"
```

### Visual Studio Codeのインストール
[公式サイト](https://code.visualstudio.com/download)よりVisual Studio Codeをインストールします。
今回インストールしたバージョン：https://update.code.visualstudio.com/1.70.2/darwin-universal/stable
### Flutter Pluginをインストール
「View>Command Palette」を選択します。
入力欄に「Install Extensions」を入力します。
「Extensions:Install Extensions」を選択します。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323730343139392f34353538613334342d616139662d663536632d326338382d6636336436623132313033392e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/b1b1aafd-63ea-7310-2792-00af6dccc6e7.png)


「Install」を選択します。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323730343139392f63326238666336642d653763332d653334652d336636622d3132383966663236643963372e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/d5a169c2-f10a-8c05-644c-c595985d590e.png)

Terminalを開きます。
![スクリーンショット 2022-09-04 13.05.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/7c9b8ae7-7a93-8808-973c-52a8ac09295a.png)

Terminalで次のように入力します。
```
flutter doctor
```
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323730343139392f30643539653734332d316534612d343066612d616435652d6361323936363933643636362e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/cfe97fb7-7fed-f819-f018-7b3958f143ab.png)

赤枠の項目が緑のチェックマークになっていれば、環境構築は完了です。
(※今回はVSCodeのためAndroid Studioの項目はチェックがついていなくても可)
## 動作確認
### プロジェクトの作成
FlutterのSample Projectを動かして動作を確認します。
「View>CommandPalette」から 「Flutter: New Project」を選択します。
![スクリーンショット 2022-09-04 13.16.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/7344f15a-b7d7-6a72-9f46-f8a0df565421.png)
プロジェクトを保存するフォルダとプロジェクト名を決定すると、プロジェクトが立ち上がります。
![スクリーンショット 2022-09-04 13.21.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/dc050fe8-f7cb-31fd-06e8-732af14bfec6.png)

### iOS Simulatorでの再生
VSCode下部にある「Dart DevTools」横の赤枠内を選択すると、VSCode上部に「Select a device to use」が表示されます。「Start iOS Simulator」を選択します。
![スクリーンショット 2022-09-04 13.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/91f2b894-8b45-76ef-bedb-45941d1e8cf5.png)
仮想デバイスが立ち上がったら、右上の再生アイコンをクリックします。
![スクリーンショット 2022-09-06 14.23.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/fd19c150-8fa2-7a89-1d53-43c3da5ecd97.png)
Sampleが動きます。
![スクリーンショット 2022-09-04 12.35.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/49ff27d1-eea4-b791-d503-7566b997fe2d.png)

## 複数のFlutter Versionを管理する
### FVMのインストール
Terminalで次のコマンドを入力します。
```
brew tap leoafarias/fvm
brew install fvm
```
### Flutterバージョンのインストール
次のコマンドで使用するFlutterバージョンをインストールできます。
```
fvm install バージョン名
```
### Flutterバージョンの切り替え
次のコマンドでFlutterバージョンの切り替えを行えます。
```
fvm use バージョン名
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/69be91f9-f25c-37d6-b6ce-1bc3014b6ef4.png)

fvm useとだけ入力するとインストール済みの使用可能なバーションが選択できます。
![スクリーンショット 2022-09-26 8.40.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704199/7a38c6c5-7ed7-c454-5bb7-5a7a4865cd22.png)

これで複数のバージョンのFlutterを共存させることができました!!

## 最後に
ネクストスケープでは多様なスマートフォンアプリ開発をおこなっています♪
興味のある方は↓HPを覗いてみてください！
https://app.nextscape.net/