Flutter使ってみる【環境構築でちょっとハマっちゃったんだぜ編】

やっほー
Flutter使ってみたんだぜってことで[環境構築](https://flutter.io/get-started/install/)から、[Android開発者向けのFlutter解説](https://flutter.io/flutter-for-android/)と[Flutterチュートリアル](https://flutter.io/tutorials/)を見て簡単なアプリを作成するまで書いてみようと思うんだぜ。
で、今回は環境構築をする上でちょっとハマったこととプロジェクトの作成&実行までを書いておく。

# 先にまとめ書いとくよ
* Android SDKのPathが見つからないって怒られてハマった
  * 自分Android SDKは`~/Library/Android/sdk` のヤツを使ってないのよ
* FlutterのプロジェクトをVSCodeで作って実行した

# あ、そうそう自分のバックグラウンド
* Android開発がﾁｮｯﾄﾃﾞｷﾙ　　
* Dart ｳｰﾝ聞いたことあるけど触ったことないなぁ…

以上

# 自分の環境
* Android開発環境は整ってる
* AndroidStuidoもインストール済み
* 使っているAndroidSDKはeclipse時代から継ぎ足していったヤツ
**つまりはAndroidStudioがデフォルトで見に行くsdkじゃないのを使ってた**
* Xcodeもインストール済み

# じゃあ早速環境構築行ってみるぜぇ！
自分MacOSだから

*  [ここ](https://flutter.io/get-started/install/)からFlutterSDKをダウンロードして
*  でもって`.bash_profile`にPATH書いて〜♪っと、こんな感じで

```bash:.bash_profile
FLUTTER="$HOME/development/flutter/bin"
export PATH=$FLUTTER:$PATH
```
そしたら `source .bash_profile` で再読込して

* エディターは…VSCode使ってみるべぇよってことでVSCodeをインストールしてプラグイン突っ込んでっと。

<img width="174" alt="plugin.png" src="https://qiita-image-store.s3.amazonaws.com/0/82799/c9a2757d-d11d-1af3-8a86-6f6b0b0c9eba.png">

*  んでんでっと`flutter doctor`で開発環境が揃ってるか確認っとよゆーよゆー！

### と、思ってたんだけど
こんなメッセージがコンソールに出力された

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale ja-JP)
Android sdkmanager tool not found ({path/to/home}/Library/Android/sdk/tools/bin/sdkmanager).
Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
```
どうやら見てるAndroidSDKの場所が違うみたいだ。
`{path/to/home}/Library/Android/sdk`
こいつぁAndroidStudio入れたときに突っ込まれるSDKのPathであって自分が使ってるAndroidSDKのPathじゃあない。
で[FlutterのセットアップガイドのAndroidのセクション](https://flutter.io/setup-macos/#android-setup)を読み直してみたら。
> By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.

ANDROID_HOMEを設定してやれば良いって書いてあった。
だからANDROID_HOMEを設定して

```bash:.bash_profile
export ANDROID_HOME={path/to/my_android_sdk}
```

`source .bash_profile` してもう一回 `flutter doctor` を実行すると

```bash
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.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
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2018.1.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available

```

いえーす。これはコンソールのメッセージに従ってコマンドポチポチすれば解決しそうなメッセージに変わってくれた。

と、言うわけで指示に従ってコマンドを実行してっと

```bash
flutter doctor --android-licenses
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
```

長いインストールを経てもう一回 `flutter doctor`

```
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2018.1.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available
```

おっけーい。これでひとまず環境構築完了！
ここで✗印が出てるメッセージが気になるけど。本文を読む限り、IDEに開発プラグイン入ってないっすよってことと、 `Connected devices` 端末繋いでないかAndroidのエミュレータもしくはiOSのシミュレータ起動してないっすけど？って教えてくれてるだけなので問題なしと判断。(必要になったら入れりゃ良いやってことで)

# 動作確認を兼ねてプロジェクトの新規作成&実行

こっから先はVSCodeの話になるからあんまFlutterと関係ないかも
`cmd` + `shift` + `p`
または
`表示` -> `コマンドパレット`
`View` -> `Command Palette` (英語だとこうなのかなぁ…)
でコマンドパレットを開いて
`Flutter: New Project`
を選択して
<img width="512" alt="new_project.png" src="https://qiita-image-store.s3.amazonaws.com/0/82799/c18df85c-662c-fee9-fa11-db2f7b2c4b74.png">

適当なプロジェクト名を入力すると、どのディレクトリにつくんのって？聞かれるからお好みのディレクトリを選択して
<img width="512" alt="project_name.png" src="https://qiita-image-store.s3.amazonaws.com/0/82799/c753ebb0-8434-b139-a6a3-fb6eea7a5808.png">

プロジェクトができたら `F5`で実行
環境構築が正常にできていればこんな感じで作ったエミュレータ/シミュレータのリストが表示される。
**エミュレータとか作ってない場合は表示されないかも。作り方は端折る。ゴメンね**
<img width="512" alt="emulator_list.png" src="https://qiita-image-store.s3.amazonaws.com/0/82799/07547faa-5fd9-d22d-c704-ef846a5b7b99.png">

んで適当なエミュレータ/シミュレータを選択して実行すると:tada:
<img width="512" alt="tada.png" src="https://qiita-image-store.s3.amazonaws.com/0/82799/15a06ae9-4bfd-f22c-4129-1b6f0affdc78.png">

ちゃんと動いてる〜！