MacでAndroid Flutterの環境構築

# 1.はじめに
MacでAndroid Flutterの環境構築したので、備忘録として残しています。

# 2.前提条件
Android Stdioがすでにインストールしている事。
Android Stdioのインストール手順、環境構築は割愛しています。

:::note alert
注意（2024.02.20時点）
Flutter（SDK、プラグイン）をインストール後、最新のAGP（8.2）にアップデートすると以下のメッセージが表示されFlutter（プラグイン）がインストール出来ないです。

<font color="Red">Plugin 'Dart' (version '223.8977') is not compatible with the current version of the IDE, because it requires build 223.* or older but the current build is AI-231.9392.1 Plugin 'Flutter' cannot be loaded because it depends on plugin 'Dart' which failed to load</font>

その場合の対応方法
一度、Android StudioからDart、Flutterプラグインをアンインストールしてから、再度、Dart、Flutterプラグインの順番でインストールすれば問題なくFlutterプロジェクトが作成出来るようになります。

:::


# 3.Mac環境構築

以下のサイトを参考にして作業を実施しています。（2024.02.20時点）

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

https://zenn.dev/heyhey1028/books/flutter-basics/viewer/getting_started_mac


<BR>
Flutter SDKのインストール<BR>Androidアイコンを選択する。

![Flutter図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/0ca8830d-1c7e-43b5-df3e-4f0688914e30.png)


<BR>
Appleメニューから「このMacについて」を選択し、以下の表記によりダウンロードzipを選択する。

:::note info
* 「プロセッサ」の欄にIntelを含む記載があれば、「Intel Processor」のzip
* 「チップ」の欄にAppleを含む記載があれば、「Apple Silicon」のzip
:::


![Flutter図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/8560c6e8-34cd-0d6b-7cc3-f03586939bdb.png)


<BR>
zipファイルを解凍後、flutterフォルダが出来る。（解凍方法はコマンドでもダブルクリックのどちらでも良い。）
flutterフォルダをユーザーフォルダ直下に開発用フォルダを作成し、その中に配置する。
公式では開発用フォルダを「development」にしている。


![Flutter図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/ea03b7d7-bcf9-840e-5797-13d84bfae197.png)


<BR>
設定ファイルの作成<BR>ターミナルから以下のコマンドを実行し、使っているSHELLを確認する。（大文字じゃないと認識されない）


```
echo $SHELL
```
/bin/zshなら zsh、/bin/bashなら bash を使っています。
ここから先は、zshを元に説明していきます。

既に環境設定ファイルが存在すれば既存設定ファイルにパスを追加する。
環境設定ファイルは、zshrc ファイル ではなく、<font color="Red">zshenv</font> ファイルです。
（公式サイト参照）
環境設定ファイルが存在しない場合、ターミナルから以下のコマンドを実行し、<font color="Red">zshenv</font> ファイルを新規作成します。

```
touch ~/.zshenv
```
<font color="Red">zshenv</font> ファイルを新規作成すると、ユーザーフォルダ -> 【ユーザー名】フォルダ の直下に作成されると思います。別な箇所にファイルが作成された場合、ファイルを移動すれば大丈夫です。
![Flutter図18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/f7b707fd-baa3-9518-c36c-77894d96a53e.png)



<font color="Red">zshenv</font> ファイルに以下のPATHを追加します。
追加する方法は、コマンドでもテキストエディターのどちらでも構いません。
PATHは、zipファイルを解凍後に開発用フォルダ「development」に配置したflutterフォルダの場所です。

```
//相対パスの場合
export PATH=$HOME/development/flutter/bin:$PATH

//絶対パスの場合
export PATH=/Users/ユーザー名/development/flutter/bin:$PATH
```
もしくは、Finderからflutterフォルダをドラッグ&ドロップでターミナルに置くことでもパス確認は出来きます。
PATH を通したら設定の有効化をします。<font color="Red">zshenv</font> ファイルを閉じて、ターミナルも再起動します。

再起動後に下記コマンドを実行し、PATHが表示されれば設定成功です。
```
which flutter
```
以下のコンソールは、絶対パスで設定した場合のパスです。
![Flutter図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/d39500ec-a864-b0bf-beed-da39221cf0e5.png)


Androidライセンスに同意する為、以下のコマンドを実行する。（公式サイト参照）
```
flutter doctor --android-licenses
```

成功時には、以下のメッセージが表示されます。
![Flutter図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/14ed5357-9b6c-20f9-40c9-4be3c649dfab.png)


失敗時には、以下の様なメッセージが表示されます。<BR>（個人の環境によって表示されるエラーが異なる為です。）
![Flutter図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/d099e6c9-a36a-d9cc-caa8-f982c4d42697.png)

上記のエラーの場合、Android SDKをアップデートすれば解決します。<BR>メニューバーから、Tools -> SDK Manegar を選択します。
![Flutter図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/12af2188-0482-7026-0844-79c1e06e4383.png)


:::note warn
注）<font color="Red">この画面は既にAndroid SDKがアップデート後なのでステータスがInstalledになっています。</font>
:::
Android SDK の 「SDK Platforms」タブを選択します。

![Flutter図8 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/c1104b6e-4731-fbd7-cafb-8ef7c272e836.png)


アップデートは「Check for Updates 」を選択する。<BR>メニューバーから、Android Studio の Check for Updates... を選択します。
![Flutter図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/471e0695-55ec-6bd1-e8e7-443a6ed99e28.png)

:::note warn
注）<font color="Red">この画面は既にAndroid SDKがアップデート後なのでステータスがInstalledになっています。</font>
:::

Android SDK の 「SDK Platforms」タブを選択します。
![Flutter図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/b8076082-6ddb-75a4-a370-d665f7146390.png)

SDKToolsからも必要なツールを選択してインストールします。
何が必要かは公式サイトに記載してあります。
![スクリーンショット 2024-02-22 9.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/a389fb87-8a9c-5852-7a73-3a4c83578874.png)

<BR>Android SDK の 「SDK Tools」タブを選択します。
![Flutter図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/1e78690b-d1aa-ee00-a9a9-72ea41ed2a4d.png)

<BR>
必要なSDK、Toolsをインストール後、再度、ターミナルから
次のコマンドを実行して、ライセンスへの署名を有効にします。

```
flutter doctor --android-licenses
```


成功すると、「review licenses that have not been accepted」メッセージが表示されます。
すると下記の通り、いくつかのライセンス契約書を確認する様に求められるので y を入力した後 Enter を押して進みます。
通常のターミナルに戻ったら設定完了です。

![Flutter図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/1937d800-8467-ae9d-eef0-eab145412153.png)


# 4.Flutterプラグインのインストール
:::note warn
注）<font color="Red">プラグインをインストールしないと、「New Flutter Project...」メニューがAndroid Studioに表示されないです。</font>
:::

メニューバーから、Android Studio の Settings... を選択する。<BR>Plugins の Flutterを選択します。
![Flutter図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/0dda9422-0c9d-7533-eb5c-5f73ec949002.png)

後は確認ダイアログがいくつか表示されるので許可します。
![Flutter図14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/b4cfdb63-0c77-fe37-d8f1-a7ac4c637674.png)


 Flutterプラグインのインストールが完了すると、「New Flutter Project...」メニューがAndroid Studioに表示されます。これでFlutterプロジェクトの作成が可能になります。



# 5.Flutterプロジェクトの新規作成
メニューバーから、File -> New ->  New Flutter Project... を選択します。
 ![Flutter図15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/7a0d76c6-27a0-377b-8c93-0c5526cb87ab.png)

左メニューから、「Generators」 -> 「Flutter」 を選択します。
![Flutter図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/9faf7b8d-45e4-3f94-ce73-f83483a1f0ef.png)

プロジェクト設定画面でプロジェクト名、プロジェクトフォルダの作成場所を入力し作成します。
作成方法は公式サイトに記載があります。<BR>Choose your IDE -> Android Studio and IntelliJ のタブです。

https://docs.flutter.dev/get-started/test-drive?tab=androidstudio

![Flutter図17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/fd3969f1-0109-fada-8a6b-89df623b4b09.png)


# 6.Flutterプロジェクトの実行
後は、今まで通りのAndroid Studioの実行と同じです。<BR>メニューバーから、Run -> Run を選択します。


![スクリーンショット 2024-02-22 9.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3688845/03de7f86-0a96-71d6-de52-4264138118ef.png)


<BR>
説明は以上となります。<BR>
間違っているなど、ご意見ご要望があれば、お気軽にコメントください。