0から行うFlutterの環境構築

# はじめに

- エンジニア半年の備忘録
- Macbook Air M2
- 今更flutter

# やりたいこと

- iosモバイルアプリケーションを作りたい
- けどiosアプリのデプロイには金がかかるのでAndroidでスモールデプロイしていきたい
- flutterの環境構築をしたい
- Android studioでflutterアプリを作っていけるようにしたい

# 環境構築

### 1. Flutter SDKをダウンロード

https://docs.flutter.dev/get-started/install/macos#get-sdk

Apple silicon用のSDKがあるのでそれをダウンロード、解凍する。

![スクリーンショット 2023-09-09 14.04.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/b2ecdd3c-79ba-fcd0-3093-f54107b38a7e.png)

### 2. 管理フォルダを作ってhomeディレクトリに置く

![スクリーンショット 2023-09-09 14.12.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/692b069d-e579-8152-5b85-30ebc274dd89.png)

どこのディレクトリでも問題ないですが、管理しやすいように`development`フォルダを作成して構築を行います。

フォルダを作成したら直下に解凍したflutterフォルダを設置しましょう

### 3. パスを通す

```jsx
> touch .zshrc
```

`.zshrc`ファイルを作成（最初からある可能性もあるので気をつけて）

<aside>
💡 ” ⌘ + Shift + . “を押して隠しファイルを表示させることができます。

</aside>

`.zshrc`ファイルに以下を追記します。

```jsx
export PATH="$PATH:[flutterフォルダまでのパス]/bin"

// 私の場合
export PATH="$PATH:/Users/kento/development/flutter/bin"
```

確認してみましょう

```jsx
> which flutter
```

![スクリーンショット 2023-09-09 14.38.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/e0b28836-30cc-ce32-7ae0-08cef725312d.png)


パスが表示されていればflutterの構築完了です。

### 4. flutter doctorの実行

```jsx
> flutter doctor
```

実行してみましょう。

gitが入っていない場合は自動的に導入してくれます

現時点ではこんな感じになってると思います。

![スクリーンショット 2023-09-09 14.54.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/4f35e734-2abd-6b06-0f02-025d6fe54a21.png)


もし、`”Bad CPU type in executable”` と表示されたら[これ](https://blog.flutteruniv.com/flutter-entrance/#:~:text=%E3%82%92%E8%A1%8C%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,M1%20Mac%20%E7%89%B9%E6%9C%89%E3%81%AE%E8%A8%AD%E5%AE%9A,-%E5%8B%95%E7%94%BB%E3%81%AE%E8%A9%B2%E5%BD%93)を参考にしてください。

これより、今バツマークが付いてる`Android`と`ios`の開発環境を構築していきます。

### 5. iosアプリケーション開発環境のセットアップ

Apple Storeで`Xcode`と検索してインストールします。（時間かかります）

https://apps.apple.com/jp/app/xcode/id497799835?mt=12

![スクリーンショット 2023-09-09 14.50.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/2d33a672-34f0-29c5-fba0-70bbefb8a8f5.png)


待ち時間にCocoaPodsを入れておきましょう（色んなライブラリに必須になります）

```jsx
> brew install cocoapods
> pod setup
```

`Setup completed`って出たら成功です。

### 6. androidアプリケーション開発環境のセットアップ

Xcodeはインストールにもクソ時間がかかります。

待ち時間に以下を進めておきましょう

公式のページど真ん中のインストールボタンから、「Mac with Apple chip」を選択します。

https://developer.android.com/studio

インストールを進めていきます。

![スクリーンショット 2023-09-09 15.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/6e5b5199-586b-9f37-708f-db4b146f7d0d.png)


過去にインストールしている場合はその時のConfigを適応することもできます

![スクリーンショット 2023-09-09 15.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/c0eaf1fa-f281-7d50-5f6d-17b6394aef07.png)


Nextをクリック

![スクリーンショット 2023-09-09 15.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/c332a524-b225-c32f-90d2-7626381491c1.png)


今回はStandardを選択

![スクリーンショット 2023-09-09 15.17.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/26ba0fb1-ecff-1cc2-8e4a-91d3099ba564.png)


好きな方を選択

![スクリーンショット 2023-09-09 15.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/89b66a24-b8ab-fb79-5c65-4f7b96a59366.png)


Next

![スクリーンショット 2023-09-09 15.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/8be45662-d89b-4327-8cb6-084a16417111.png)


android-sdk-licenseとandroid-sdk-arm-dbt-licenseの規約を見てAcceptを選択

![スクリーンショット 2023-09-09 15.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/fe8ec32d-f061-1a2d-99c2-6637e641a84d.png)


ダウンロードが始まります。ちょっと待ちましょう

![スクリーンショット 2023-09-09 15.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/1fe5f3c8-848a-bac7-01d0-928d68e70ccc.png)


ここまできたらandroid studioのインストールは終了です！

![スクリーンショット 2023-09-09 15.25.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/9d6e612b-40b2-02cf-0ac6-b8b297649ab2.png)


続いて、flutter用のプラグインを導入します。

左の項目からPlugins → Flutter → install

![スクリーンショット 2023-09-09 15.27.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/cabe1ea9-b594-142f-ddea-9ebdb0ddbb7e.png)


Dartのpluginが入っていない場合は入れましょう

![スクリーンショット 2023-09-09 15.27.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/83b2a1bf-f065-0abe-326e-d9acf4cdd17e.png)

インストールが終わったら再起動を求められるのでIDEを再起動します。

![スクリーンショット 2023-09-09 15.27.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/5d9bf22b-56fd-eb11-4b07-7823cb1c79c6.png)


再起動して、New Flutter Project の項目が出ていれば完成です！！！

![スクリーンショット 2023-09-09 15.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/644374f9-6e44-0590-8211-891e4f5abd49.png)


試しに、flutterのプロジェクトを作ってみましょう

先ほどのNew flutter Project → flutter → next

![スクリーンショット 2023-09-09 15.28.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/abb0a851-fcae-bae1-8760-2a3553c975a4.png)


ここでproject nameや説明、ファイルパス、Organization、使用言語、プラットフォームなどを設定できます。

今回は初期設定で行きます

![スクリーンショット 2023-09-09 15.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/c7831e66-1edf-0db1-156a-97793a676d0d.png)


左側のタブから「Project」を選択

基本的にここで開発を行う形になります

![スクリーンショット 2023-09-09 15.32.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/66c94d29-cc02-5bc4-e18b-4d5007bdcd2c.png)


### 7. 各シュミレータ, エミュレータ起動方法

iOSシュミレータを起動してみましょう

真ん中のタブ → `Open iOS Simulator`を選択

![スクリーンショット 2023-09-09 15.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/32be9d06-42a7-3270-7647-dab1d8efd699.png)


左の起動しているデバイスがあるのを確認して、再生ボタンをクリック

![スクリーンショット 2023-09-09 16.03.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/733e7388-a3c3-4ea6-ac70-86072864c898.png)


少し待つとシュミレータが起動し、開発したios appを実際に使うことができます。

（私の環境ではちょっと重かった）

![スクリーンショット 2023-09-09 15.55.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/9c812bdf-4816-d376-0e39-84e9398a7ea6.png)


Xcodeのエラーが出る場合は、Xcodeでの利用規約を確認していない可能性があります。

初回起動をしてAgreeを押しておきましょう。

![スクリーンショット 2023-09-09 15.48.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/53d9a5da-d88c-1346-3ade-f9d1c02ee721.png)


続いて、Androidエミュレータを起動してみましょう。

今回はiOS開発環境しか使用しないので簡単にまとめます。

Device Managerを開きます。

![スクリーンショット 2023-09-09 16.25.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/248a61a0-252c-b605-ade2-1bfc8a071597.png)


Create Deviceから開発したいサイズのハードを選択します。

![スクリーンショット 2023-09-09 16.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/b923f7c0-5221-a94f-0c06-6cec94ee0240.png)


![スクリーンショット 2023-09-09 16.26.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/a13ca4bb-089e-20ef-111a-874bea0d68c4.png)


システムイメージを選択（今回はやりません）

![スクリーンショット 2023-09-09 16.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/27b18da9-e53a-0330-3d81-c0124642cb2f.png)


ダウンロードが完了したら以下のようになるので、エミュレータを以下のボタンからスタート

![スクリーンショット 2023-09-09 16.27.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/9088307a-5a2a-7615-87b2-21ab1ac58f0f.png)


iOSシュミレータと同じように再生ボタンを押すことで実行ができます。

![スクリーンショット 2023-09-09 16.03.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/f45b6e4b-e9df-13ab-468f-9a84792bc481.png)


長い環境構築お疲れ様でした！

# エラーに対する備忘録

```jsx
> flutter doctor
```

で最終的な確認をしておきましょう。

![スクリーンショット 2023-09-09 16.45.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/4737f17b-808f-dab9-8790-166031d45822.png)


あれ…? Android関連のエラーが出てる…?

```jsx
**cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.**
```

これは必要なSDKが無いため出るエラーとなります。

Android studioを起動 → More Actions → SDK Manager

![スクリーンショット 2023-09-09 16.51.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/51ae8869-ba50-332a-16ee-de332461ceaa.png)


 Android SDK → SDK Tools →  Android SDK Command-line Toolsを導入

![スクリーンショット 2023-09-09 16.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/ff0df986-7074-140c-8745-c2696b517880.png)


https://zenn.dev/imasaka0909/articles/00ebfaf74f9cea

これで、`cmdline-tools component is missing`は消えたはずです。

![スクリーンショット 2023-09-09 17.00.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/87b906e5-936e-031b-f786-7d3796f7f918.png)


次は、

`Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses`

が出てきた…ライセンス関連？

```jsx
> flutter doctor --android-licenses
```

を実行してライセンスを確認しましょう。

よくわからんけどy押しまくってヨシ！！！

![スクリーンショット 2023-09-09 17.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/aa5a264c-0e67-b165-cbc7-094c2a2807ea.png)


再度flutter doctorを実行するとNo issues found!となっていました。お疲れ様でした！！！

https://taro3se.com/p/826

# 参考

https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc

↓Appleシリコン用環境構築方法

https://blog.flutteruniv.com/flutter-entrance/

https://akira-watson.com/android/adt-mac.html