Flutter開発環境構築（MAC)


## はじめに
Flutterを始めてみました。
やったこと忘れそうなので、Flutterの開発環境構築手順(MAC)について、整理してみました。

1. Flutterをインストール
2. Xcode をインストールする
3. アプリをシミュレータで実行する

[参考にしたサイト]
https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
https://qiita.com/nomadmonad/items/c19996b1b817ea8182c0
https://qiita.com/ryosomiya/items/9502bdcba202dae1d876
https://github.com/flutter/flutter/issues/41291

## 1.Flutterをインストール
Flutterの公式サイトにある`「Get started」`のボタンから、公式ガイドでのインストールの手順を参照できます。

https://flutter.dev/

![スクリーンショット 2019-09-27 18.46.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263738/7d3c499f-0682-ce5a-1d7b-78a441e3b30d.png)

今回は、Macで環境を構築するので、macOSをタップします。
![スクリーンショット 2019-09-27 18.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263738/72a0a2fc-ef8d-998f-4dc3-2768a2ca98c0.png)


`flutter_macos_v1.9.1+hotfix.3-stable.zip`のボタンをタップして、ダウンロードします。

![スクリーンショット 2019-09-27 18.48.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263738/b8823e32-941f-fc90-7f88-24b287456f31.png)


ターミナルを起動し、フォルダーを作成し、その配下にダウンロードしたファイルを展開します。

```
$mkdir ~/development
$cd ~/development
$unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.3-stable.zip
```

上記を実行すると、
~/development/flutter というディレクトリが作成され、その下にFlutterのファイルが展開されます。
<br>次に、Flutterのコマンドを簡単に利用できるようにするために、環境変数 PATH にFlutterインストール先を設定して行きます。

flutter配下に移動し、下記を実行します。

```console
$cd /flutter
$vi ~/.bash_profile 
```
~/.bash_profile に以下の行を追加します。 [YOUR_NAME] はご自身のユーザー名に置き換えてください。

```console
export PATH="$PATH:/Users/[YOUR_NAME]/development/flutter/bin"
```

sourceコマンドで、現在のセッションにも反映させます。

```console
$source ~/.bash_profile
```

Flutterには環境をチェックする doctor というコマンドがあります。このコマンドを実行することで、Flutterが必要とするDart SDKなどがダウンロード・セットアップされます。以下のように実行してください。

```console
$flutter doctor
```
※flutterコマンドが見つからない場合は、一個前でやったflutter/bin にパスを通す設定が間違っている可能性があります。


以下のように関連するツールの状況が表示され、環境が整っている項目は「 ✓ 」で表示されます。
ない箇所については「 ! 」と表示されます。<br>
とりあえず、現時点で、少なくとも先頭のFlutterの欄が「 ✓ 」となっていればOKです。

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.4 18E226, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 10.2)
[✓] iOS tools - develop for iOS devices
[✓] Android Studio (version 3.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.1)
[✓] VS Code (version 1.35.1)
[✓] Connected device (2 available)
```

## 2.Xcode をインストールする
アップルストアでXcodeと検索して、インストールしてください。（ちなみに、インストールに結構時間かかります）

Xcodeのインストールが完了したら、ターミナルで下記のコマンドを実行してください。
このコマンドを実行しておかないと、FlutterからiOSシミュレータを認識しない場合があるので。。。

```console
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```
続いて、cocoapodsをインストールしていきます。
自分が試したとき、1.7.5だとflutter docterでうまくいったので下記のようにしています。

```console
sudo gem uninstall cocoapods
sudo gem install cocoapods -v 1.7.5
pod setup
```

## 3.アプリをシミュレータで実行する

適当なディレクトリ（場所はどこでも構いません）に移動して、Flutterアプリを作成します。

```console
$ flutter create my_app
```

成功したら、iOSシミュレータを起動します。
下記を実行するとシミュレータが起動するはずです。

```console
$open -a Simulator
```

作成したmy_app配下に移動し、下記のコマンドを実行します。

```console
$flutter run
```
実行後、コンパイル処理が走り、しばらくするとシミュレータに下記の画面が表示されると
思います。

![スクリーンショット 2019-09-27 19.11.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263738/6a0b05b4-2374-3b4f-b180-7df77af14d90.png)