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

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

先にまとめ書いとくよ

• Android SDKのPathが見つからないって怒られてハマった
  • 自分Android SDKは~/Library/Android/sdk のヤツを使ってないのよ
• FlutterのプロジェクトをVSCodeで作って実行した

あ、そうそう自分のバックグラウンド

• Android開発がﾁｮｯﾄﾃﾞｷﾙ　　
• Dart ｳｰﾝ聞いたことあるけど触ったことないなぁ…

以上

自分の環境

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

じゃあ早速環境構築行ってみるぜぇ！

自分MacOSだから

• ここからFlutterSDKをダウンロードして
• でもって.bash_profileにPATH書いて〜♪っと、こんな感じで

.bash_profile

FLUTTER="$HOME/development/flutter/bin"
export PATH=$FLUTTER:$PATH

そしたら source .bash_profile で再読込して

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

• んでんでっと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のセクションを読み直してみたら。

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_profile

export ANDROID_HOME={path/to/my_android_sdk}

source .bash_profile してもう一回 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)
    ! 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

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

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

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
を選択して

適当なプロジェクト名を入力すると、どのディレクトリにつくんのって？聞かれるからお好みのディレクトリを選択して

プロジェクトができたら F5で実行
環境構築が正常にできていればこんな感じで作ったエミュレータ/シミュレータのリストが表示される。
エミュレータとか作ってない場合は表示されないかも。作り方は端折る。ゴメンね

んで適当なエミュレータ/シミュレータを選択して実行すると

ちゃんと動いてる〜！