Flutterの環境構築(MacOs 2022年8月1日現在)

# はじめに
未経験からエンジニアに転職して4ヶ月ほど経ちました。
毎日壁にぶつかりながらも楽しく働いています。

普段はrailsを扱っていますが、最近Flutterも触ってみたいなーと思って休日はDartを勉強しております。

今回はFlutterの環境構築についてまとめました。

※Xcodeは元々実務で2ヶ月程Swiftを触っておりましたので元々インストール済みでした。
そのインストール方法は割愛しております。


## flutterのインストール
基本的には公式に沿って進めます。

https://flutter.dev/

上記にアクセスします。


**Get start**をクリックします。
![スクリーンショット 2022-07-30 12.54.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/ed557861-58c4-c334-01b7-de4d13b20ab6.png)

私はMacなので**macOS**を選択します。
![スクリーンショット 2022-07-30 12.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/e5097773-7f3d-a3be-b8e4-eec14e253a32.png)

SDKをインストールします。
M1チップ非搭載なので**flutter_macos_3.0.5-stable.zip**をクリックします。
![スクリーンショット 2022-07-30 12.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/ec919def-7d7d-3738-672a-dbf0ed420668.png)

インストール出来たら展開します。
![スクリーンショット 2022-07-30 13.05.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/aa9e4a1e-1c2c-1cb3-d654-add359b430d1.png)

## パスを通す
ホームディレクトリーにflutterファイルを移動します。
```
mv ~/Downloads/flutter ~
```

コマンドが使える様にパスを通します。
```
echo export PATH="$PATH:/Users/＊＊＊＊＊＊＊＊＊/flutter/bin" >> ~/.zshrc
```

flutterとターミナルに入力して
```
zsh: command not found:　flutter
```
とならなければOkです。

## flutter docterの実行
パスが通っていることを確認したらセットアップを完了する為にインストールする必要があるものがあるかどうかを確認します。　　

以下のコマンドを実行して下さい。
```
flutter doctor
```

実行結果は以下の通りでした。
```terminal
$ flutter doctor
Running "flutter pub get" in flutter_tools...                      13.5s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale
    ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.62.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
```

## Android Studioのセットアップ

先程の結果では**Android Studio not installed**となっているので
今度はAndroid Studioをインストールしに行きます。
  
下記にアクセスします。

https://developer.android.com/studio/install?hl=ja

赤丸をクリックします。
![スクリーンショット 2022-07-30 14.40.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/9fe2be40-b9ca-45ed-fd65-dfad3879981e.png)

**Download Android Studio**をクリックします。
![スクリーンショット 2022-07-30 14.42.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/000800de-ec40-137d-51b2-f4cb6a4d8239.png)

利用規約に同意します。
チェックを入れて私はM１チップ非搭載なので**Mac with Intel chip**をクリックします。
![スクリーンショット 2022-07-30 14.44.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/62438e66-4ffa-26a6-5346-5e306d023d6f.png)

インストールが終わったらApplicationフォルダにドラッグアンドドロップします。
![スクリーンショット 2022-07-30 14.51.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/a8004fd8-b81d-785f-ec63-6bca81a53272.png)

Do not import settingsにチェックを入れてOKを押します。

![スクリーンショット 2022-07-30 14.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/253a0c19-16d6-f3bf-edca-65cfeefb5e33.png)

**Next**をクリック
![スクリーンショット 2022-07-30 14.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/772d5738-d3bb-b8e9-ef87-e01e8daccc12.png)

**Next**をクリック
![スクリーンショット 2022-07-30 14.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/11510d19-6c85-0907-332f-c97055b914bb.png)

お好きなカラーテーマを選択して**Next**をクリック。
私は**Darcula**を選択しました。
![スクリーンショット 2022-07-30 14.58.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/78eafc66-2803-5e59-1d68-9d18be352e45.png)

**Next**をクリック
![スクリーンショット 2022-07-30 15.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/801b0d0a-2a76-3c88-4604-0ae724ed2aa6.png)

**Accept**にチェックを入れて**Finish**を押します。
![スクリーンショット 2022-07-30 15.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/db8cdeaf-be37-266f-bcc7-5363a2674149.png)

ダウンロードが開始されます。
![スクリーンショット 2022-07-30 15.05.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/3eba7140-7314-2b80-5660-dd19eff3047b.png)

ダウンロードが完了したら**Finish**をクリックします。
![スクリーンショット 2022-07-30 15.05.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/f5a9e596-4fe8-3207-f4d9-cef4b484f50f.png)

この画面になったらPluginsをクリックします。
![スクリーンショット 2022-07-30 15.07.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/21d39d3b-fee8-3b44-b27f-3d1e68961541.png)

**dart**と検索して**Dartプラグイン**をインストールします。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3932303331322f31663766633162632d323631362d633238372d643433332d3264333139643730326532302e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/8fa41ee6-95c8-3162-524b-614b736d1af4.png)

**flutter**と検索して**Flutter**プラグインをインストールします。
![スクリーンショット 2022-07-30 15.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/97c0a550-1c9b-1ab7-8342-6791392a56c3.png)

**Accept**します。
![スクリーンショット 2022-07-30 15.19.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/09a67854-626e-d9b5-80c7-2bef34ed5868.png)

あともうちょっとです。
**Android SDK Command-line tools**をインストールします。
**More Actions**をクリック
![スクリーンショット 2022-07-30 15.28.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/83d551ed-dab7-0b62-d61e-bb4133de2503.png)

**SDK Manager**をクリック
![スクリーンショット 2022-07-30 15.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/50c80201-1fec-4d43-2d60-1fb1b006f03b.png)

**SDK Tools**をクリック
![スクリーンショット 2022-07-30 15.34.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/234764da-4539-acf5-5627-e0de14888a9f.png)

**Android SDK Command-line Tools**にチェックを入れてOKをクリックします。
![スクリーンショット 2022-07-30 15.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/e3121734-b5aa-89a8-5c02-7d7fde644c12.png)

**OK**をクリックします。
![スクリーンショット 2022-07-30 15.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/642d3ce7-a47d-c9da-334f-ab6a9610f79d.png)

ダウンロードが開始されます。
![スクリーンショット 2022-07-30 15.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/6dc32a6f-3ef4-08e9-818d-d3160cc7df78.png)

ダウンロードが終わったら**Finish**をクリックして完了です。
![スクリーンショット 2022-07-30 15.38.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/0a3cb926-71ac-5a26-9d1e-1af0381ac012.png)

ここで一回**flutter dockter**を実行します。
```
flutter doctor
```
実行結果は以下の通りでした。
```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale
    ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.62.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.
```

まだ一個問題がありました。。。
ここは上記のご指摘に従って下記の実行します。
```
flutter doctor --android-licenses
```
上記を実行すると何回か**yes**か**no**で答える質問が来るので全てyesで回答します。

再度実行します。
```
flutter doctor
```
下記の通り問題なく終了することが出来ました！

```
$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.62.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

```

これでflutterの環境構築は完了です。
Xcodeがインストールされていなかった方は別途インストールする必要があるかと思いますので別途検索をお願いします。

ここまで読んで頂いてありがとうございました！