Flutterの環境構築（Mac）

## はじめに
Flutterの環境構築(Mac:Intel)をまとめたものになります。
2023年5月時点のものになります。
環境構築にあたり、誤りがございましたらご指摘いただけると幸いです。

## 1.Flutter SDKのインストール
### (1)[公式](https://docs.flutter.dev/get-started/install/macos)から最新のSDKをダウンロードする
お使いの機種に合わせて、IntelかApple Siliconか選択してください。

`Appleシリコン搭載の場合`
「この Mac について」に「チップ」という項目があり、チップの名前が表示されます。

`Intelプロセッサ搭載の場合`
「この Mac について」に「プロセッサ」という項目があり、Intel プロセッサの名前が表示されます。

:::note info
「この Mac について」を開くには、Apple メニュー  >「この Mac について」の順に選択します。
:::
![A21BADAF-A0F7-4653-A6F4-AEA4CE1F2CA8_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658262/76257259-3270-6b76-944a-7c18e7558d51.jpeg)

### (2)解凍したファイルを任意のディレクトリに配置します。
今回はホームディレクトリにSDK（flutter）を配置。

## 2.パスの設定
flutterコマンドを使用できるようにするため、解凍したファイルのbinフォルダまでpathを通します。
### (1)pwdをコピーしておく
##### ①ダウンロードしたSDKのbinディレクトリ（flutter/bin）を右クリック
##### ②その状態でoptionキー押すと「コピー」が「”bin”のパス名をコピー」に変わるのでそれをクリック。
##### ③一時的にメモしておく。
![pwd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658262/1ab76b13-a0fc-987b-8855-35b189878bda.gif)

### (2)ターミナル開く
##### ①解凍したファイルのbinフォルダまでpathを通します。
`zsh`の場合
```zsh
echo export PATH="$PATH:****" >> ~/.zshrc
```
****は先程メモしておいたbinのパス名を入れる

今回はホームディレクトリのため以下のようになります。
```zsh
echo export PATH="$PATH:/Users/****/flutter/bin" >> ~/.zshrc
```

`bash`の場合

上記のzshecの箇所を`bash_profile`に変更

##### ②エンター押して何も変わってなければOK

##### ③一度ターミナル終了する。

### (3)一旦flutterの状態を確認する
flutterには環境構築に必要なものが入っているかを表示するコマンドが存在します。
ターミナルで　`flutter doctor`と入れると以下のようにチェック項目が出る。
![スクリーンショット 2022-08-10 11.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658262/f87e1d98-7fa4-f322-17c3-4283153d25d3.png)
問題が存在するときは[!]、[x]が表示されるので解消していきます。

## 3.Android Studioのセットアップ
### (1)Android Studioのインストール
https://developer.android.com/studio
### (2)Android Studioを開く
最初のダウンロードは時間かかります。辛抱強く。
### (3)プラグインインストール
Pluginsから「flutter」と検索すると、Flutterプラグインが出てくるのでインストールします。
インストールしたらアプリを再起動
### (4)Android toolchain について
##### ①Android Studioの「More Actions」もしくは、添付画像の「・・・」からSDK Managerを開く。
![スクリーンショット 2023-03-20 13.27.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658262/0852c8c2-2112-8476-f8df-50e4296095fe.png)
##### ②「SDK Tools」 から「Android SDK Command-line Tools」にチェックを入れてApplyを押す。
確認画面が出ますがOKで。
![EFEA1FBB-7006-46EE-B81F-CECC7D911890.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658262/b8ba8715-6607-75f3-bfbe-c106c9303279.png)
### (5)flutterの状態を確認する
`Android licenses`の項目が「✅」になっていると思います。

#### ※もしまだ「×」であれば以下の可能性あるので試してください。
##### ①Android licenses not accepted. To resolve this, run: flutter doctor —android-licenses
と表示されていれば、そのまま`flutter doctor --android-licenses` 
コマンドを実行すれば解決すると思います。
実行するとYES/NOで聞かれるので、全てYES
##### ②もし、JDKが入っていないというようなエラーが出ていれば、「jdk oracle」みたいにググってJDKのインストールする。
※最新すぎるとFlutterとの相性によりエラーが生じるので、推奨はSE8
例：jdk-8u361-macosx-x64.dmgをダウンロード
https://www.oracle.com/jp/java/technologies/downloads/#java8-mac
![スクリーンショット 2023-03-18 7.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658262/276633de-4ad1-9737-87db-1c1c2c6cb12e.png)
## 4.Xcodeのセットアップ
### (1)Apple StoreでXcodeインストール
「xcode」で検索すれば出てきます。
容量が大きいので時間かかります。辛抱強く。
### (2)Xcodeを開く
とりあえず今は開くだけでOK。
### (3)flutterの状態を確認する
「Xcode」の項目が「✅」になっていると思います。
なっていなかったらターミナルで`flutter doctor`で状態確認し、何が足りていないのか確認すること。
#### ※もしまだ「×」であれば以下の可能性あるので試してください。
##### ①Xcode installation is incomplete〜の場合
ターミナルで`flutter doctor`で状態確認すると、
Xcode installation is incomplete〜と表示されていれば、合わせて下記も表示されているかと思うので実行します。
`sudo xcode-select —switch〜＊＊＊`
`sudo xcodebuild -runFirstLaunch`
##### ②Cocoapodsインストールされていないとエラーが出ている場合
ターミナルで`flutter doctor`で状態確認すると、
Cocoapodsインストールされていないとエラーが出ていたら、ターミナル上に、
`To install: sudo gem install cocoapods`と表示されていると思うので、
`sudo gem install cocoapods`を実行します。
## 5.VSCodeにFlutterをインストールする
VSCodeでFlutterを作業する場合はプラグイン必要なので、左メニューのextensionsを開いて「flutter」と検索してインストールする。
## 6.プロジェクトの作成
※以下一例です。
### (1)プロジェクトの作成
作業ディレクトリに移動して`flutter create プロジェクト名`
```zsh
flutter create my_app
```
上記コマンドでは作業ディレクトリにmy_appが作成されます。

### (2)シミュレーターを起動します。
今回はターミナルで以下実行します。
```zsh
open -a Simulator
```
Simulatorが起動したら、Mac画面上部のメニューバー内＞File＞New Simulator＞シミュレーターとして利用したい端末をクリック。

### (3)プロジェクトに移動
コマンドで起動するにはFlutterプロジェクトに移動する必要があります。
```zsh
cd my_app
```
### (4)flutter起動
以下のコマンドで起動状態にあるデバイスで実行が行われます。
```zsh
flutter run
```

お疲れ様でした！