【Flutter】環境構築したときの手順

所要時間は1時間程度。

# 前提
* Macを使っている（macOS Catalina version 10.15.1）
* Xcodeインストール済み（version 11.2）
* Android Studioインストール済み（version 3.5）

※Flutterディレクトリを`/Applications`配下に置いたので、その前提でコマンドを書いています

# 手順
## Flutter本体のインストール

* 公式サイトから.zipをダウンロード  [macOS install  - Flutter](https://flutter.dev/docs/get-started/install/macos)
* 解凍して、任意の場所に配置（今回は`/Applications`配下に置いた）
* パスを通してflutterコマンドを使えるようにする

```sh
$ export PATH=“$PATH:/Applications/flutter/bin”`
```
* 必要な準備できているかを確認 

```shell
$ flutter doctor
```

## `flutter doctor`でチェックがつかなかった項目への対応
「Xcodeも入れてるし、Android Studioも入れてるから、ほぼ設定終わってるのでは？」と思っていたら、5個中4つチェックがつかなかったので一つ一つ対応した。
<img width="788" alt="スクリーンショット 2019-11-16 12.37.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/5bc05742-fd9d-2d7c-a181-a35cd8b1e303.png">

### Android toolchain
```
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      —android-licenses
```

書いてある通りのコマンドを実行

```shell
$ flutter doctor —android-licenses
```

「“idevice_id”は、開発元を検証できないため開けません。」という警告ダイアログが出たので、[こちら](https://yaba-blog.com/flutter-idevice_id/)のサイトを参考に以下のコマンドを叩く

```shell
$ sudo xattr -d com.apple.quarantine /Applications/flutter/bin/cache/artifacts/libimobiledevice/idevice_id`
```

再度`flutter doctor —android-licenses`をすると何度も`Accept? (y/N): `と聞かれるので、ひたすら`y`で答える
→`All SDK package licenses accepted`と出てクリア:tada:


### Xcode
```
[!] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer
```

Xcodeのダウンロードは済んでいるので、書いてある通りのコマンドを実行

```shell
$ sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer
```

再度`flutter doctor`をしてみると、文言が変わっている↓

```
[!] Xcode - develop for iOS and macOS (Xcode 11.2)
    ✗ Xcode requires additional components to be installed in order to run.
      Launch Xcode and install additional required components when prompted.
```
[こちら](https://qiita.com/Atsushi_/items/1670abaa1b497fa57990)のサイトを参考に以下のコマンドを叩く

```shell
$ sudo xcodebuild -runFirstLaunch
```

再度`flutter doctor`をしてみると、チェックマークがつきクリア:tada:

### Android Studio
```
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
```

Android Studio > Preferences > PluginsのMarketplaceタブから、`Flutter`プラグインをインストール。
`Dart`プラグインも一緒にインストールするか聞かれるので、Yesをクリック。

<img width="316" alt="スクリーンショット 2019-11-16 13.03.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/d8e1375f-36a2-0712-50c5-cbbbfd0c1d03.png">

緑のボタンを押して再起動。
再度`flutter doctor`をしてみると、チェックマークがつきクリア:tada:

## Flutterを起動する
最後に念のため起動してみる。

`flutter doctor`で全てにチェックがついたことを確認。
<img width="803" alt="スクリーンショット 2019-11-16 13.07.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/86b729e1-959e-9c46-aa51-53aced0693b3.png">

Android Studioを起動してみると、`Start a new Flutter project`というボタンが追加されている。
<img width="589" alt="スクリーンショット 2019-11-16 13.11.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/5bcce161-8ba1-3294-3df6-ea32e86e7a7a.png">

プロジェクト設定をポチポチしていくと、無事にFlutter開発ができるところまでたどり着いた。
<img width="1369" alt="スクリーンショット 2019-11-16 14.18.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/16330510-158d-8904-2d52-03582ee48c97.png">