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

# Flutterとは
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/61299eca-6404-2c57-29ba-571fcc88c701.jpeg" width="400">

**Flutter**とは、Googleによって開発された**モバイルアプリケーションSDK** (Software Development Kit)です。
クロスプラットフォームに対応していて、1つのコードで複数のプラットフォーム(iOS,Androidなど)に対応したアプリケーションを開発することができます。

# 開発環境構築手順
MacでFlutterの開発を始める為に開発環境を構築していきましょう。
*※所要時間約1時間(ダウンロードやインストールをするので時間かかります。)*

## 1.Flutterをダウンロードする
下記の公式サイトからFlutterをダウンロードします。
https://flutter.dev/docs/get-started/install/macos

### Apple Silicon Macの場合

:::note warn
重要: Apple Silicon Macにインストールする場合、いくつかの補助ツールでRosetta翻訳環境を利用できるようにする必要があります。これを手動でインストールするには、以下を実行します：
```shell
sudo softwareupdate --install-rosetta --agree-to-license
```
:::

**flutter_macos_arm64_3.7.11-stable.zip** をクリックしてダウンロードします。 
*※3.7.11の部分はアップデートされると変わります。*

### Intel Macの場合
**flutter_macos_3.7.11-stable.zip** をクリックしてダウンロードします。 
*※3.7.11の部分はアップデートされると変わります。*

## 2.ファイルを解凍して、PATHを通す
作業ディレクトリを作成して、ダウンロードしたzipを解凍
*※作業ディレクトリ名や作成場所は好きなところに作ってください。*

```shell
mkdir ~/development
cd ~/development

# Apple Silicon Macの場合
unzip ~/Downloads/flutter_macos_arm64_3.7.11-stable.zip

# Intel Macの場合
unzip ~/Downloads/flutter_macos_3.7.11-stable.zip
```

次にPATHを通します。
**[PATH_TO_FLUTTER]**
ここには解凍したFlutterのディレクトリを書いてください。
**bashの場合**

```shell
echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.bash_profile
source ~/.bash_profile
```

**zshの場合**

```shell
echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
source ~/.zshrc
```

flutterコマンドが使えるようになっていれば成功です。

## 3.実行環境に必要なものを確認する
Flutterは

```shell
flutter doctor
```
コマンドを実行することで

- 問題ないところには✔︎マーク
- 不足しているものには✖︎印
- 問題があるところには！マーク

が表示されて実行環境に何が足りないのか教えてくれますので、次は足りないものをインストールしていきましょう。

## 4.Android Studioをインストールする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/9d0736c2-f1a9-c477-5bd1-7ed23ede1c24.png" width="400">

下記の公式サイトからAndroid Studioをダウンロードします。
https://developer.android.com/studio/index.html
**DOWNLOAD ANDROID STUDIO** をクリックし、利用規約に同意してダウンロードします。 

ダウンロードが終わったらAndroid Studioを起動し、表示にしたがってインストールをします。
*※いろいろと聞かれますが、基本的には全部Next,FinishをクリックすればOKです。*

**Welcome to Android Studio**の画面が出れば成功です。

## 5.Android Studioにプラグインを導入する
Android Studioに**Flutter**と**Dart**のプラグインをインストールします。
起動画面から 
1. **Configure->Plugins**を選択
2. 検索ボックスに**Flutter**と入力
3. 出てきた**Flutter**という名称のプラグインをインストール
*※DartプラグインはFlutterプラグインのインストールと同時にインストールされます。*

## 6.デバイスのエミュレータを導入する
Android Studioでデバイスのエミュレータを導入していきます。

起動画面から 
1. **Start a new Flutter project**を選択
2. **Flutter Application**を選択して**Next**をクリック
3. **Project name**は任意の名前で入力し**Next**をクリック
4. **Company domain**は任意の名前で入力し**Finish**をクリック
5. エディタが表示されたら、メニューバーの**Tools->AVD Manager**を選択
6. **Create Virtual Device**をクリック
7. **Category->Phone**を選択されていることを確認し、任意のDeviceを選択して**Next**をクリック(自分はPixel 3aを選択しました)
8. 任意のOSを**Download**をクリックしてダウンロード(自分はAndroid10.0を選択しました)
9. ダウンロードした項目を選択し、**Next**をクリック
10. 設定画面が出てきますが、何もせずに**Finish**をクリック

これでデバイスのエミュレータを導入することができました。

## 7.Androidのライセンスを許可する
Androidのライセンスを許可しないと**flutter doctor**を実行した際に！マークが出るので許可していきます。

```shell
flutter doctor --android-licenses
```
上記コマンドを実行するとライセンスに許可するかどうかを聞かれるので **y**を入力し、**Enter**を押して許可をしていきましょう。

**flutter doctor**を実行し、**Android toolchain**の部分に✔マークがついていれば成功です。

## 8.Xcodeをインストールする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/34d240e5-9a30-e5c0-fff9-a0ccd9e8c4de.png" width="200">

XcodeはAppStoreからダウンロードできますのでダウンロードしましょう。
最新のMacOSを利用していない場合はダウンロードできない可能性がありますので以下を参考にダウンロードしてください。
[Xcode - インストール可能 対応バージョン macOS 一覧 / Install Support macOS Version Lists](https://qiita.com/thinkalot/items/1dfdba642906c1bf1fd2) 

インストールをすすめて
**Welcome to Xcode**の画面が出れば成功です。

## 9.CocoaPodsをインストールする
**CocoaPods**というプラグインも必要なのでインストールします。

```shell
sudo gem install cocoapods
```

パスワードを聞かれますので自分のMacのパスワードを入力しましょう。

## 10.最後にflutter doctorで確認する

```shell
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.14.6 18G6020, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 4.0)
```
上記にような表示になっていれば環境構築完了です。

以上、これでFlutterでアプリを開発を始めることができます！


# 番外編 VSCodeで開発する場合
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/13e3d8d6-5ff1-7108-dad6-656f250be635.png" width="180">

VSCodeで開発したい場合は、更に設定が必要なのでやっていきましょう。
*※VSCodeのインストールは省略します。*

## 1.VSCodeにFlutterの拡張機能をインストールする

1. **Shift+Command+X**で拡張機能を表示
2. 検索ボックスに**Flutter**と入力
3. 出てきた**Flutter**の拡張機能をインストール

## 2.VSCodeでFlutter新規プロジェクトを作成

1. **Shift+Command+P**でコマンドパレットを表示
2. 検索ボックスに**Flutter**と入力
3. **Flutter:New Project**をクリック
4. 任意のプロジェクト名を入力
5. プロジェクトを作成するディレクトリを聞かれるので任意の作業ディレクトリを指定する

## 3.VSCodeでデバイスのエミュレータを起動する

1. プロジェクトを作成するとVSCodeの右下あたりに**No Device**と表示されるのでクリック
2. **Start iOS Simulator**または**Start Pixel3a API 29**をクリック *※Androidのエミュレータは設定したデバイスによって違います。*

## 4.最後にflutter doctorで確認する
```shell
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.14.6 18G6020, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.0)
[✓] Connected device (1 available)

• No issues found!
```
上記にような表示になっていればVSCodeの設定完了です。