MacでFlutter開発環境を構築する

## この記事の概要
公式サイトを参考に、Mac上にFlutter開発環境を構築します。

＜環境＞
・MacBook Air（15インチ、M2、2023）
・Sonoma 14.6.1

## 事前準備
https://docs.flutter.dev/get-started/install

公式サイトの手順を参考にインストールしますが、以下を事前にインストールしておきます。
- Rosetta 2
- Xcode
- Android Studio
- Git
- VScode

### Rosetta 2
ターミナルを開いて以下コマンドを叩く。
```
$ sudo softwareupdate --install-rosetta --agree-to-license
```

### Xcode
App Storeを開いて検索ボックスに「Xcode」を入力する。
ダウンロードするだけでも約3GBあるためしばし待つ。
インストール＆起動まで行っておき、設定は後で実施する。

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

こちらも公式サイトを参考にインストールします。

1. 「ダウンロード」タブあるいは、以下リンクからダウンロード画面を開く。
「Android Studio XXXXXX をダウンロード」をクリックする。
https://developer.android.com/studio?hl=ja
![CleanShot 2025-01-06 at 17.53.00@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/7198b127-c8d2-c2cb-47ea-7c7295430e71.png)


1. 利用規約の同意にチェックを入れ、「Apple chip」側のボタンをクリックしてダウンロード開始する。
1.2GBあるため、こちらもしばし待つ。
![CleanShot 2025-01-06 at 17.54.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/e39d14fb-82ea-7d30-c775-98d7040dea72.png)

1. ダウンロードしたdmgファイルをダブルクリックで起動する。
1. 表示されている「Android Studio」アイコンをApplicationフォルダにドラッグ＆ドロップする。
![CleanShot 2025-01-06 at 18.21.59@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/21cc9bc7-7750-b1f6-61cd-f5fb07707b5d.png)

### Git
1. brewでインストールする。
```
brew install git
```
brewが未インストールの場合は以下のコマンドでインストールできます。
```
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
詳細は公式サイトを参照。

https://brew.sh/ja/

### VScode
https://code.visualstudio.com/
1. 公式サイトからダウンロードする。
1. ダウンロードしたzipファイルを解凍する。
1. 出てきた「Visual Studio Code」をアプリケーションフォルダに移動する。
1. ダブルクリックで起動確認まで行っておく。

## Flutterインストール
公式サイトのインストール手順に従って実施します。
1. VScodeを起動し、```Shit+Command+P```でコマンドパレットに```flutter```を入力する。
![CleanShot 2025-01-06 at 18.26.51@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/73e5a4a7-480d-8fb3-8cb1-8dbe24687d9e.png)
「New Project」を選択すると、右下に「Download SDK」が表示されるためクリックする。
![CleanShot 2025-01-06 at 18.27.44@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/9c6cb94f-9c25-fd94-ca98-be0d2ead5ad4.png)
手順には「Consider ~/development/」の記載があるが、ホームディレクトリ直下にdevelopmentディレクトリを作成するなど考慮せよってことだと思われる。
それに従い、developmentディレクトリを作成してその直下にダウンロードした。

1. 自動的にインストールが行われ、完了するとこれまた自動的に```flutter doctor -v```の結果が表示される。
![CleanShot 2025-01-06 at 18.40.19@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/ddecb524-bd47-2396-9349-eea7c4f0171e.png)
1. SDKのパスをターミナルに設定するため、「Copy SDK path to Clipboard」をクリックし、SDKのパスをコピーする。
1. ホームディレクトリの```.zshenv```ファイル があれば追記、なければ新規作成する。
```
（例）
export PATH=$HOME/development/flutter/bin:$PATH
```

## iOSシミュレータ起動まで
### Xcodeの設定
Flutterの手順でいうところの「Configure iOS development」のセクションです。
Xcodeはインストール済みのため、以下コマンドを叩く。
```
$ sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
```
実行結果は何も表示されず、プロンプトが戻ってくるのみ。
つづいて、Xcodeライセンスに同意する。
```
$ sudo xcodebuild -license
```
ずらっと英文が表示されるため、最後に```agree```を入力して同意する。
![CleanShot 2025-01-12 at 20.00.45@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/16fa55fb-bd0c-7f53-a7f3-69fa4a222050.png)

### iOSシミュレーターの設定
iOSシミュレーターをインストールするため以下コマンドを叩く。
事前インストールで入っている場合は文言が表示されるのみ。
```
$ xcodebuild -downloadPlatform iOS
Finding content...All available platforms are downloaded
```
続いてシミュレーターを起動する。
```
$ open -a Simulator
```
起動中はアップルロゴの表示。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/484d0355-b66d-6a51-cecd-db1870c5140f.png">

起動完了するとホーム画面が表示される。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/e6551e22-873a-24fc-84a6-a415ac4fbf34.png">

別のバージョンがよければ変更可能。
![CleanShot 2025-01-12 at 20.10.01@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/a3f00dbd-f926-21be-b1c5-ba86c8059c12.png)

:::note info
実機を使う場合は別の手順が必要なため別途追記します。
:::

### CocoaPodsをインストールする
https://cocoapods.org/
※Google翻訳した結果↓
>CocoaPods は、Swift および Objective-C Cocoa プロジェクト用の依存関係マネージャーです。102,000 を超えるライブラリがあり、300 万を超えるアプリで使用されています。CocoaPods は、プロジェクトをエレガントに拡張するのに役立ちます。

インストールするため、以下コマンドを叩く。
```
$ sudo gem install cocoapods
```
インストール最中にエラー出た。
```
ERROR:  Error installing cocoapods:
	The last version of securerandom (>= 0.3) to support your Ruby & RubyGems was 0.3.2. Try installing it with `gem install securerandom -v 0.3.2` and then running the current command again
	securerandom requires Ruby version >= 3.1.0. The current ruby version is 2.6.10.210.
 ```
rubyのバージョンが古いことが原因のため、最新バージョンをインストールします。
こちらの記事を参考にさせていただきました。

https://qiita.com/gostachan/items/c3c9b88f120d0c2dce96

インストール後、もう一度cocoapodsのインストールを試みる。

cocoapodsのインストール後、```~/.zshenv```にPATHを追加する。
```
export PATH=$HOME/.gem/bin:$PATH
```

### flutter doctorを実行する
```
$ flutter doctor
```
![CleanShot 2025-01-13 at 00.39.46@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/2629e7f0-032d-fa17-39e8-09c0284ed384.png)
Xcodeの手順が足りなかったのか！がついているため、記載されているコマンドを2つ実行する。
```
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
```
再度fullter doctorを実行するとAndroid以外はOKになった。
![CleanShot 2025-01-13 at 00.40.33@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/e29044a0-5394-a6aa-2f32-feb1721aaf0d.png)

## Androidシミュレータ起動まで
### Androidシミュレーターの設定
Android SDKが正しくインストールされていないとこの先に進めないため、インストールがされていなかったらこちらの記事を参考にしてください。

https://qiita.com/k-nabe-o/items/5e19c0a86dea65d685f6

Android Studioを起動し、「Virtual Device Manager」をクリック。
![CleanShot 2025-01-13 at 14.38.58@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/097dd7dc-9c78-bfb7-22e2-de4fcfa867b4.png)

「Create virtual device」をクリック。
![CleanShot 2025-01-13 at 14.40.08@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/1cccf53b-187c-1aeb-b1ea-2077a212e853.png)

適当に選ぶ。
![CleanShot 2025-01-13 at 14.40.55@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/82669485-0468-763d-51a1-34f6c527b490.png)

デバイスイメージが、本当はここで一覧が表示されるはずが表示されない。
エラーメッセージの通り、ネットワークに問題がある（私の環境ではMcAfeeのファイヤーウォールが影響していた）ため、ファイヤーウォールを無効化して更新ボタンをクリック。
![CleanShot 2025-01-13 at 14.41.34@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/f48b3331-23fd-e597-6238-182ac2cde65f.png)

一覧が表示された。
![CleanShot 2025-01-13 at 14.41.57@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/cccca15e-2e70-58ad-16f5-14de5f404121.png)

適用したいイメージがダウンロードされていない場合は、ダウンロードボタンをクリックしてダウンロードさせる。
![CleanShot 2025-01-13 at 14.48.59@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/eaa7fca3-4d75-462f-9154-e80b5acc9060.png)

![CleanShot 2025-01-13 at 14.50.30@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/59bc29eb-3124-8f40-1075-07e66016860e.png)

ダウンロードが完了すると、「Next」ボタンがクリックできるようになる。
![CleanShot 2025-01-13 at 14.51.48@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/cd25d259-dc8f-884a-2b26-96bdbc24981c.png)

![CleanShot 2025-01-13 at 14.52.38@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/37d5a5e0-d61c-b56f-a1d5-37d8c791a1f6.png)

再生ボタンをクリックすると起動する。
![CleanShot 2025-01-13 at 14.52.46@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/b37496fc-3076-ee96-8e57-e376b29d7039.png)

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/44071447-8118-7fc9-2433-14beab8f7e4f.png">

### flutter doctorを実行する
![CleanShot 2025-01-13 at 14.58.09@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/06b4cee7-c04e-0c30-eb04-34cd2baceba4.png)
Android SDKのインストール先をデフォルトから変えているため、それを指定せよと出ている。
以下のコマンドで指定してあげる。
```
$ flutter config --android-sdk /Users/hogehoge/development/Android/sdk 
```
再度flutter doctorで確認すると、今度はcommand-line toolsが足りないため、Settingsからインストールする。
![CleanShot 2025-01-13 at 15.04.57@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/82d1a393-1f3b-2538-1efa-c9f3641cc31b.png)

![CleanShot 2025-01-13 at 15.10.06@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/f1dbc8c0-28f3-78ec-22c8-73055d8ae08f.png)


再度flutter doctorで確認すると、ライセンスに同意せよと出ているため、表示されているコマンドを叩く。
![CleanShot 2025-01-13 at 15.13.45@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/064b13c8-ef3d-a4ff-5947-646fbb71e788.png)
```
$ flutter doctor --android-licenses
```
途中聞かれるが、全てyを入力すると「All SDK package licenses accepted」になる。
![CleanShot 2025-01-13 at 15.15.59@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/765bb82e-cd9d-a48c-4369-cd2cdbd647d4.png)

再度flutter doctorで確認すると、オールクリアになりました。
![CleanShot 2025-01-13 at 15.16.48@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/3b75e539-8997-aca4-dbe5-73bd27666efe.png)

以上。
長かった。。

サンプルアプリの実行は別記事を作成しました。

https://qiita.com/k-nabe-o/items/3dfefa478a6d441b4908