M1環境でFlutterアプリを動かすまで

# はじめに
Mac M1環境でFlutterアプリを動かすまでの流れを書き留めたものです。
2022年4月現在の情報です。動かそうとしたらUIが変わってたりすることがあるかもしれません。

# この記事のゴール
- AndroidStudioを使用して、Androidエミュレーター上でFlutterアプリを起動させる
    - 今回はXCodeはインストールしなくて大丈夫です。
- FlutterSDKに[fvm](https://fvm.app/)を使用する
    - [asdf](https://github.com/asdf-vm/asdf)という手もありますが、fvmを使うことにします。

# 大まかな流れ
- Android Studioをインストール・初期設定をする
- [fvm](https://fvm.app/)をインストールする
- Flutterアプリを作る
- Android Studioでアプリ動かす

# Android Studioをインストール・初期設定をする
Android Studioをインストールした上で、Flutter向けに初期設定をしていきます

## ダウンロード・インストール
さっそくですが簡単なのではしょります :pray: 
以下を参考にインストールしてください。

https://developer.android.com/studio/install

## 初回起動・初期設定
Android Studioを起動して設定をしていきます
### 初回起動設定
#### Import Android Studio Settings
過去に環境構築をしていない限りは、「Do not import settings」で進めます。

#### Data sharing
任意で

#### Welcome Page
`Next`
  <img width="300" alt="Welcome画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/f66d5add-172b-9315-ba35-a4f7286b1719.png" />

#### Install Type
`Standard`

#### Select UI Theme
好みのUIを選択して `Next`

#### Verify Settings
`Next`
色々ダウンロードされるので少し時間がかかります

#### License Agreement
内容を確認して`Accept`し、最後のページで`Finish`
  <img width="300" alt="License Agreement" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/a74f8f14-31ee-d70a-e6b0-c2975f3c7d4a.png" />

#### Downloading Components
すべて終わったら`Finish`

これで初回起動完了です

## Flutter Pluginのインストール
このままではAndroidアプリしか作れないので、Flutterのプラグインを追加します
- サイドバーの`Plugins`を選択
- 画面に表示される検索バーに`flutter`と入力するとFlutter Pluginが出てくるので`Install`してください
  <img width="500" alt="License Agreement" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/c8f934ed-1814-d046-20fe-39b009b731a3.png" />
- しばらくすると、`Restart IDE`と表示されるので、そちらを押下してIDEを再起動します

これでFlutterアプリが`New Project`から作れるようになりますが、今回はターミナルからアプリを作るので使いません。

## Command line toolインストール
Flutter SDKで必要になるので、先にインストールしてしまいましょう

### SDK Managerを開く
起動時の画面に出ている `More Actions` -> `SDK Manager`を選択します
  <img width="500" alt="起動画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/65515b2e-174b-e833-15f0-a37208f0fac1.png" />
### SDK Toolsタブに移動
タブで`SDK Platforms`が選択されているので`SDK Tools`に移動します
### Command-line Toolsをインストール
**Android SDK Command-line Tools(latest)** にチェックを入れて`OK`を押下します
   <img width="500" alt="License Agreement" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/fd0700b3-31c9-ab97-f4ac-5aa0f3145ca5.png" />
インストールが終わったら `Finish`で終了します
  <img width="500" alt="License Agreement" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/3e50658a-8da4-6680-a0fd-14959eb3e180.png" />

Android Studioの下準備完了です :tada: 

# fvmをインストールする
fvmをインストールしてFlutter SDKを選択出来る状態にしていきます。
brewを使いますので必要に応じて用意しておいてください。公式ページも参考にしてください。

https://fvm.app/docs/getting_started/installation

## インストール
```bash
$ brew tap leoafarias/fvm
$ brew install fvm
```
## インストール確認
```bash
$ fvm --version
2.3.1
$ dart --version # Dartもインストールされます。
Dart SDK version: 2.16.2 (stable) (Tue Mar 22 13:15:13 2022 +0100) on "macos_arm64
```

これでFlutterのアプリの初期化ができるようになりました :tada: 

# Flutterアプリを作ってみる
`$HOME/flutter/hello_world`に初期状態のアプリを生成してみましょう。
ここからはfvmコマンドを使用していきます。

## Flutter SDKのバージョンを決める
stableのSDKを使っていきたいと思いますので、リリース情報を調べてみます。
stableの2.10.4で進めていきます。

```bash
$ fvm releases
Feb 10 22  │ 2.10.1
Feb 16 22  │ 2.11.0-0.1.pre
--------------------------------------
Feb 16 22  │ 2.11.0-0.1.pre    dev
--------------------------------------
Feb 19 22  │ 2.10.2
Mar 3 22   │ 2.10.3
Mar 18 22  │ 2.12.0-4.1.pre
Mar 18 22  │ 2.12.0-4.1.pre
--------------------------------------
Mar 28 22  │ 2.10.4            stable
--------------------------------------
Apr 6 22   │ 2.12.0-4.2.pre
--------------------------------------
Apr 6 22   │ 2.12.0-4.2.pre    beta
--------------------------------------
```

## Flutterアプリの初期化
```bash
$ cd
$ mkdir flutter
$ cd flutter
$ mkdir hello_world
$ cd hello_world
$ fvm use 2.10.4 --force
$ fvm flutter create .
```

合わせてfvmのsdkキャッシュをgitにあげないように設定を追加しておきましょう
```bash:.gitignore
.fvm/flutter_sdk
```

## flutter doctorの実行
doctorを実行して、現状の状態を確認します。
```bash
$ fvm flutter doctor
fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-arm, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] Xcode - develop for iOS and macOS
...
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.65.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.
```

`flutter doctor --android-licenses`を実行するようにと警告が出ているので実行します。
```bash
$ fvm flutter doctor --android-licenses
4 of 7 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)? y # yで継続
Accept? (y/N):　y # 長文に合わせて、何度か出るのでyで継続
All SDK package licenses accepted
```

再度doctorを実行します。
```bash
$ fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✗] Xcode - develop for iOS and macOS
...
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.65.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.
```

Androidのエラーが無くなっていればOKです！
これでFlutterアプリの準備が出来ましたので続いて、Android Studioで実行していきます。

# Android Studioでアプリ動かす
大まかな流れは以下のようになります。
- Android Studioでアプリを開く
- IDE上でSDKの設定を行う
- IDE上でAndroidエミュレーターを起動する
- IDE上でFlutterアプリを実行する

## Android Studioでアプリを開く
Android Studioを開き、`Open`というボタンがあるので選択します
  <img width="500" alt="Welcome画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/730909b5-ed07-a61a-a05f-79177f674cd0.png" />
ディレクトリ選択では`$HOME/flutter/hello_world`のディレクトリを選択して`Open`を選択するとIDEが表示されます
  <img width="500" alt="Project" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/4b764182-65ac-7dc5-a82e-12e0f4f834c9.png" />
    - IDEに`Android`のコードしか出てこない場合は、`Project`で表示を切り替えてください
      <img width="300" alt="Project" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/893d8a7d-90af-5fad-d48c-6204715c3f28.png" />

## SDKの設定
初期状態ではfvmのSDKを参照するように設定されてないので、設定を変更していきます。

### 設定画面を開く
「Command + ,」でPreferencesを開く
### DartのSDK設定
「Languages & Frameworks」 → 「Dart」を選択
- Dart SDK pathをプロジェクト内のSDKを参照するように変更します
  `${プロジェクトのディレクトリパス}/.fvm/flutter_sdk/bin/cache/dart-sdk`
  <img width="500" alt="Preferences DartSDK" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/92cc3adc-2df1-8849-3b57-c429c6eaa765.jpeg" />
- 「Apply」を押下

### FlutterのSDK設定
続いて、「Languages & Frameworks」 → 「Flutter」を選択
- Flutter SDK pathをプロジェクト内のSDKを参照するように変更します
  `${プロジェクトのディレクトリパス}/.fvm/flutter_sdk`
  <img width="500" alt="Preferences FlutterSDK" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/1e7c21fe-1cba-5634-8507-750c982dfc91.jpeg" />
- `Apply`を押下
- `OK`で設定画面を閉じて設定完了！

次はエミュレーターを起動していきます。

## Androidエミュレーターを起動する
AndroidStudioからAndroidのエミュレーターを起動していきます。

### Device Managerを開く
IDE画面右上のほうにある「Device Manager」を押下するとタブが出てきます
<img width="300" alt="Device Manager1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/d9f88a4b-6f20-016a-5c48-ea6216420baf.png" />

### エミュレーターを起動する
既にデバイスが一つ作られているはずなので、▶を押下してみます
<img width="300" alt="Device Manager2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/7024372a-24f7-799a-2636-acb5044ed0b1.png" />
  ※なければ「Create device」で適当に作ってください :pray: 

### エミュレーター起動確認
しばらくするとタブの下のほうにAndroidのエミュレーター画面が出てくればOKです :tada: 
<img width="300" alt="Device Manager3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/b00cd082-4315-55af-0997-6a6c27e0dfa0.png" />
  ※Android Studioのバージョンによっては別画面でエミュレーターが起動するかもしれないです

エミュレーターが起動したので、Flutterアプリを実行してみます。

## Flutterアプリを動かしてみる
先程起動したAndroidエミュレーターでアプリを動かしてみましょう！

### アプリを起動する
IDEの上部に「sdk gphone64 …」と表示されている状態で横にある▶を押下してください
※虫のマークはDebugモードです。今回はどちらでも構いません。
  <img width="500" alt="Run app" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/a621f961-4050-4457-3b61-dc8477f8032e.png" />
コンパイルが始まるのでしばらく待ちましょう
  <img width="500" alt="Compile" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/47df5c60-c331-8eec-4908-a26b5649ceab.png" />
暫く経つと`Syncing files to device sdk gphone64 ...`とログが出てアプリの起動します 
  <img width="500" alt="Compile" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169462/450e4308-a475-73f9-d529-a46a4096b365.png" />

無事に動かすところまで到達しました:tada:

# 動かすことが出来ました
`lib/main.dart` をいじると、画面に反映されますので色々試してみてください
いったん動かす所までが目標なのでここまで…
また機会があればiPhoneシミュレーターを使うところも書いていたいと思います。