MacOSにflutterの環境を構築する

最近ちょっと話題に上がったので、Flutterの環境をMacOSに入れてみた。その際のメモ。

環境か下記の通り、

* MacOS High Sierra(10.13.4)
* flutter MacOS v0.4.4 beta

## Flutterのインストール

基本的には、公式[Get Started: Install on macOS](https://flutter.io/setup-macos/)の手順を踏んでいく。

1. flutter_macos_v0.4.4-beta.zip のダウンロードとzip展開を行う。
1. 展開したフォルダを好きな場所に配置。ここではホームディレクトリ配下に配置。

    ```
~
└── flutter
    ├── AUTHORS
    ├── CONTRIBUTING.md
    ├── LICENSE
    ├── PATENTS
    ├── README.md
    ├── analysis_options.yaml
    ├── analysis_options_repo.yaml
    ├── appveyor.yml
    ├── bin
    ├── dev
    ├── examples
    ├── flutter_console.bat
    ├── packages
    └── version
    ```

1. ~/flutte/binにパスを通す。zshを使っているので、```.zshrc```にパスを記載。

    ```zsh
export PATH=$PATH:$HOME/flutter/bin
    ```

1. flutterの環境を確認

    ```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices (Xcode 9.3.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✗] Android Studio (not installed)
[!] VS Code (version 1.23.1)
[!] Connected devices
    ! No devices available
    ! Doctor found issues in 5 categories.
```

ここは、　各々の環境によって違うと思うけど、基本的に、```✗```が付いているところは対応が必要。
自分は、アプリを作る環境を全く作ってないので、道が遠い。。。

## Android Studioのインストール

1. doctorで記載されている https://developer.android.com/studio/index.html からAndroid Studioをダウンロードしてインストール。
1. 再度、下記コマンドでflutterからライセンスの同意を行う。何回か、(y/n)を聞かれるので、yを返す。

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

1. ```flutter doctor```で確認すると、Android Studioにpluginを入れろと言われているので、flutterとdartのpluginを入れる。flutterのpluginを入れようとすると、dartのpluginを入れるか聞かれるので、[Yes]で入れる。

    ```
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    ```

## iOS周りのインストール

1. 表示に記載がある通り、brewでコマンドを実行していく

    ```
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
    ```

    ```
$ pip install six
zsh: command not found: pip
    ```

    むぅ・・・

    ```
sudo easy_install pip
    ```

    ```
$ pip install six
Requirement already satisfied: six in /System/Library/Frameworks/Python.framework/Versions/2.7/Extras/lib/python (1.4.1)
matplotlib 1.3.1 requires nose, which is not installed.
matplotlib 1.3.1 requires tornado, which is not installed.
    ```

    むぅ・・・
    色々と試しながらだったので正確なコマンドを拾えなかったのですが、

    ```
brew reinstall python@2
pip install six
    ```

    でインストールできた。


## Visual Studio CodeにPluginを追加

1. Android Studioと同様に、VS Codeにflutterの拡張機能を追加。これも、flutterの拡張をインストールするとdartの拡張機能も入る

## 確認

携帯端末をPCと接続した状態か、```open -a Simulator```でシミュレータを起動した状態で確認すると、

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
[✓] VS Code (version 1.23.1)
[✓] Connected devices (1 available)
```

携帯端末未接続だと、

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
[✓] VS Code (version 1.23.1)
[!] Connected devices
    ! No devices available
```

とりあえず、全部クリア。

## Android Studio立ち上げ

1. ```Start a new Flutter Project```を選択し、右上の```<no devices>```から```Open iOS Simulator```を選択すると、iOSのデバイスが立ち上がる。
1. シミュレーターの起動が終わったら、実行ボタンで実行すると、シミュレーターでアプリが実行される。


***

参考サイト

* [Get Started: Install on macOS](https://flutter.io/setup-macos/)