Flutterインストール手順


1.JetBrains ToolBoxをインストールし、最新のAndroid Studioをインストール
https://www.jetbrains.com/ja-jp/toolbox-app/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/f015fb23-516b-4c4c-3c7b-054d5d96674f.png)

2.Flutterプラグインのインストール

AndroidStudioのPluginメニューで"Flutter"と検索してヒットするものをインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/50ced6d4-f962-4ae5-7b7f-6f4779a660eb.png)


3.Flutter SDKのダウンロード

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/6bc0b922-d49e-19c4-920c-efecc95189d9.png)

↑自分のPCのOSを選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/b30b5bde-2ae1-28ca-0871-409e61426651.png)

↑recommendedを選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/7b57663b-4dbd-d6dc-30c3-cd62f96c2810.png)

↑自分のSiliconタイプを選ぶ

zipファイルを展開し、ホームディレクトリに"development"というディレクトリを作ってそこに配置

> ~/development/flutter

※Apple Siliconの場合は以下の実行も必要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/a4980871-258c-fecc-5f9f-58f292aa9b91.png)

```
sudo softwareupdate --install-rosetta --agree-to-license
```

4.Flutterパスの環境変数の設定

```
echo $SHELL
```

で自分のPCのシェルがzsh(ゼッシュ)かbash(バッシュ)かを確認

zshの場合、

```
~/.zshrc
```

に以下をコピペする（ファイルがなければtouch ~/.zshrcで作成する）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/8a481d96-58ce-2f53-2dd3-07cc9787168a.png)

```
export PATH=$HOME/development/flutter/bin:$PATH
```

zshを読み込み直す必要があるため、
> source ~/.zshrc

を打ち込む

```
flutter --version
```

でバージョンが表示されたら設定は効いている

5.FlutterCLIツールでの確認

```
flutter doctor
```

を実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/6a15c9a8-8cb6-5fb9-ab0b-0d1cc3ebe6b1.png)

❌印がついているものは問題がある箇所。

一つ目の問題点のcmdline-toolsのインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/e5858d00-73c5-51fa-1a69-2765ef06df4f.png)

再度flutter doctorを実行すると内容が変わる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/a0a2a9e5-57df-de44-0e6f-cf6d0d90ff55.png)

警告が出ている部分は
```
flutter doctor --android-licenses
```

を実行するように記載されているので実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/0f7dc536-e504-d2d7-7ffa-6ca496e7720f.png)

利用規約の承認を求められるのでyを選択

再度flutter doctorを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/499358dd-c916-384b-353c-5f236f79d9d5.png)

最後のエラーはCocoaPodsがインストールされていないという指摘

```
pod --version
```

でインストールされていないことを確認

```
brew install cocoapods
```

の前にHomebrewがインストールされていない場合は以下を実行

https://brew.sh/ja/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/3029c045-cc0c-083e-2b86-a74df45c6594.png)

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

再度以下2つを実行
```
brew install cocoapods
pod --v
```

バージョンが表示されたらOK

再度flutter doctorを実行すると内容が変わった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/5fefa262-abb6-f89d-b232-0725fc6a8b53.png)

指示通り

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

を実行するとエラーが消えた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/aa3cf447-df1f-068d-1149-798c769e4399.png)

Flutterプロジェクトの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/3a7e9976-8fc7-5186-97ae-bbcfbea96d0c.png)

以下にはホームディレクトリ配下development/flutterを指定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/f744d66a-1630-b721-7d31-3c5aefb72087.png)

Organization + Package name
= Androidパッケージ名/iOSバンドルIDになる。

以下ルールが存在するのでAndroid/iOS両方のストアで公開するならこれらに当てはまらない文字を指定する

- Androidは大文字使えない
- Androidは数字から始まってはいけない
- iOSは_が利用できない



Platformは動作させたいOSを指定。モバイルのみならAndroidとiOSのみチェックをつける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/76245d29-4efa-1f2b-772c-a55f8d40d35e.png)

iOSシミュレータの起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/0d4c09ad-65fb-5052-e4d1-fc61ac3d4d4d.png)

もしiOSの他の端末にも転送したいなら、以下からシミュレータを追加できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/84c74aff-47e9-3916-053e-b4206960aec8.png)

以下のボタンで実行できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/81c3803d-4466-897f-24b1-20b7ecc09e00.png)

以下でシミュレータが起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/08f062f9-0a8b-1ab9-0dae-fe7eb53980a6.png)

Androidの場合

SDK Manager起動し、以下でエミュレータを追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/5158fa63-2276-ad12-780b-ca7dc61949ef.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/624adc79-f669-d09c-3644-4fa5d6074d99.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/f1f3ef60-2fc5-f143-098c-f9e5e1d73cb1.png)

system imageの選択。今回はSにする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/0ae056a2-c9f1-7a40-1de6-2c0b35b6de36.png)

先ほどダウンロードしたものを選択している状態で次へ進む

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/620ceb33-b7be-da97-d5d9-3e8cd9585681.png)

以下の▶︎ボタンを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/d4cfeff5-722f-6566-5a33-64839203edaf.png)

起動したら、iOSのときと同様、端末を選んでmain.dartをデバッグ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/74e97b91-40b4-f12c-3a8e-98fb8fe9907c.png)

以下で起動が確認できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/cecaa7e3-bf79-e8fe-9de2-1b3e5dd00611.png)

Android Studio内で起動すると小さくて見づらいなら、一旦エミュレータを停止し、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/5b95ec8f-de11-f337-c3ac-9a040123112c.png)

Android Studio > Setting > Emulator > Launch in the RunnningDevies tool window
のチェックを外すことで独立したwindowで起動するよう設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/2e895961-1c0e-7243-3ed8-984373fdf4fe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136142/426c40ff-f01b-a0d1-5140-55238d48cc53.png)