Flutter環境構築(M2Mac)

## はじめに
表題通り、Flutterの環境構築をしていきます。

## スタート
下記サイトでインストール方法が記載してます。

https://docs.flutter.dev/get-started/install

### 1. Flutter SDKのダウンロード
今回はM2 Macのため、Appleシリコンをインストールします。
![スクリーンショット 2023-12-03 15.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/9a7ca0ff-e56f-efe6-9710-aaf3f9a7e835.png)

### 2. zipを解凍
zipを解凍します。解凍時に処理が走っているので、コマンドで実行しましょう。

```shell:
unzip ~/Downloads/flutter_macos_arm64_3.16.2-stable.zip
```

:::note info
その場で解凍するとDownloadになります。必要に応じてディレクトリを移動してください。
:::

### 3. Pathを通す。
zshの場合、`~/.zshrc`に下記を追記しておくのが良いでしょう。

```shell
export PATH="$PATH:~/develop/flutter/bin"
```
:::note info
インストール先は書く個人で異なると思うので、必要に応じて変更してください。
:::

### 4. flutterのインストール確認

```shell:flutterのインストール確認
~/develop$ flutter --version
Flutter 3.16.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9e1c857886 (3 days ago) • 2023-11-30 11:51:18 -0600
Engine • revision cf7a9d0800
Tools • Dart 3.2.2 • DevTools 2.28.3
```

### 5. flutterで必要なツールの確認
flutterで利用するツールがインストールされているか確認しましょう。`flutter doctor`のコマンドで確認できます。

```shell:flutter doctor実行
~/develop$ flutter doctor
Found an existing Pub cache at /Users/kawamurakouji/.pub-cache.
It can be repaired by running `dart pub cache repair`.
It can be reset by running `dart pub cache clean`.
Found an existing Dart Analysis Server cache at /Users/kawamurakouji/.dartServer.
It can be reset by deleting /Users/kawamurakouji/.dartServer.
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.2, on macOS 13.4 22F66 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the
        Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.84.2)
[✓] VS Code (version 1.81.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.
```
→結構、ないやつがあるようですね。`Android toolchain`,`Xcode`,`Android Studio`。
これからinstallしていきます！！！

### Xcodeのインストール
下記に記載の通り、実行していきましょう。
```shell:
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the
        Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
```

#### コマンド実行
```shell
 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 sudo xcodebuild -runFirstLaunch
```

・CocoaPodsのインストール
CocoaPodsとは、iOSアプリのライブラリ管理ツールです。
`brew`コマンドでインストールしましょう。

```shell:cocoapodsインストール
brew install cocoapods
```

:::note alert
Cocoapodsの公式サイトのインストール方法ではインストールに失敗しました。
AppleSilicon製のMacではcocoapodsのインストール方法だとうまくできないようです。
公式サイトを下記に添付しますが、失敗前提で見ておくといいかもです。
:::

https://guides.cocoapods.org/using/getting-started.html#installation

### Android Studioのインストール
`Android toolchain`、`Android Studio`はAndroidStudioのインストール時に自然に解決されるようだ。
そのため、Android Studioのインストールをします。

#### 1.Android Studioのダウンロード

![スクリーンショット 2023-12-03 16.12.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/6db0447b-71e9-0a75-39ee-4aa0a26e3d9f.png)

![スクリーンショット 2023-12-03 16.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/b4a01edd-e0d3-3ecf-40c3-654026baf7e7.png)

https://developer.android.com/studio?gclid=Cj0KCQiAyKurBhD5ARIsALamXaERfTc4m4dA993hbcCl86IVR_BHXVIl0eCu62aBLTukDr5DvueiidUaAokTEALw_wcB&gclsrc=aw.ds&hl=ja

#### 2.Android Studioのインストール
![スクリーンショット 2023-12-03 16.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/b2bab0a9-af60-243a-f094-4f08c20e44bc.png)

![スクリーンショット 2023-12-03 16.15.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8600084b-f55b-f231-f880-7f3bcaabb505.png)

#### 3.Android Studioのセットアップ
3-1. Android Studioを開き、`SDK Manager`を開きます。
![スクリーンショット 2023-12-03 16.19.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bee6d60b-4f3b-233c-e6fe-a8a753bc3dd3.png)

3-2. `SDK Tools`タブの`Androdi SDK Command-line Tools(latest)'にチェックを入れ、OKボタンを押します。 
![スクリーンショット 2023-12-03 16.20.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/56bfc504-1b0a-f4b8-6345-219a856137e5.png)

3-3. 再度OKボタンを押す。  
![スクリーンショット 2023-12-03 16.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/b2e93c12-26c1-f0d7-a666-e0a9eba7e5ab.png)

3-4. Instrallerが動き出す。
![スクリーンショット 2023-12-03 16.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/6922f190-dfcc-1c1e-da04-4154a0b1bb59.png)

3-5. ライセンスに同意する。
3-4の状態でも十分なんですが、flutter doctorを動かした際にWarningが発生。
下記コマンドでyes連打で解決。
`flutter doctor --android-licenses`

### 最終確認
`flutter doctor`実行時、全てチェックが入っていれば解決です。
環境構築お疲れ様でした〜〜〜〜〜〜〜〜〜〜〜〜〜〜🥳

```shell: インストール状態確認
~$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.2, on macOS 13.4 22F66 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.2)
[✓] VS Code (version 1.81.1)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!
```