はじめてのFlutter〜環境構築後編〜

Flutterの環境構築のお話、後編です。
前編はこちらからどうぞ。

Steps

Flutter SDKのインストール
Android Studioのインストール <-いまここ
XCodeのインストール

DLに時間がかかるものリスト

Flutter SDK
Android Studio
(Component, Gradle, 仮想端末イメージのダウンロードも時間かかります)
XCode(App Storeからインストール)

※ おそらく以前のバージョンだとDart単独でインストールする必要があったのだと思いますが、今はFlutterのSDKに含まれています。

Android Studioセットアップ(昨日からの続き)

下記の二記事を参考に進めます。
* Flutter開発環境構築(Mac編) - Qiita
* FirebaseとFlutterでアプリ開発してみる【其ノ二：Flutter＆Dart篇】 - Qiita

「Install Type」
-> セットアップ方法をスタンダード/カスタムで選べる。ひとまずスタンダード。
「Select UI Theme」
-> UIテーマを選べる。暗い方が好みなのでDarculaを選択。
「Verify Settings」
今選択したセットアップ方法を確認して「Finish」。

セットアップ方法の指定が完了すると走るComponentのDLはやや時間がかかります。
また最後、HAXMのインストールをする際、パスワードが求められます。
パスワード入力してOKしたのだけど、処理が止まってしまって「Cancel」を押すしかない状態に。。。
ただ、DLは完了していたみたいでAndroid Studioを再起動したら普通に開けました。 HAXMがインストールされているか確認したいときは下記のコマンドで確認できます。

$ find ~/ -name sdk
# => /Users/makicamel//Library/Android/sdk

$ cd /Users/makicamel//Library/Android/sdk
$ ./emulator/emulator -accel-check
# => accel:
# => 0
# => HAXM version 7.3.2 (4) is installed and usable.
# => accel

Android Studioでプロジェクト作成〜仮想端末(Virtual Device)ダウンロード

Android Studioを再起動して(たぶん本来はFinished押せばいいだけ)「Start a new Android Studio project」をクリック。

OS(Phone and TabletとかWear OSとか)、テンプレートを選べます。
便利ですが、エミュレータが使いたいだけなのでどれでもOK。
名前、言語を適当に選択・記入して「Finish」するとAndroid Studio プロジェクトが作成されます。

IDEの画面が開きますが、Gradleのダウンロードが走るのでしばし待ちます。
この間暇なのでGradleとは？を調べる。OSSのビルドシステムなんですね。

完了したらエミュレータを動かします。
「Tools」->「AVD Manager」->「+ Create Virtual Device」をクリック、デバイス一覧が表示されるので適当なデバイスを選択します。今回はNexus 5Xを選択。

SystemImageを選択してと言われるので、適当に選択(API Level28)。Androidのキャラクタかわいいですね。
「Download」をクリックするとLicense Agreementに同意を求められるので同意します。またダウンロードが発生😣(900MB)
ダウンロードが完了したら自動でリフレッシュしてくれるので、選択して「Next」。
Configurationを確認して問題なければ「Finish」。やっと仮想端末ができました…！
今ダウンロードしたばかりの仮想端末が表示されるので、右側「Actions」からプレイボタン(▶)をクリックするとエミュレータが起動します！👏

VS CodeにFlutterプラグインをインストール

Gradleや仮想端末のダウンロードを待っている間、エディタの準備をしておきます。
VS Codeを起動してExtensions(Shift+Cmd+X)をクリックして「Flutter」を入力、一番上に出てきたものをインストール。

VS Codeを再起動してコマンドパレット(Shift+Cmd+P)で「doctor」を入力、flutter doctorしてVS Codeでエラーが出ていなければVS Codeの準備は完了です。

Android StudioでHello, world!してみる

仮想端末の準備ができたら、早速Hello, world!してみます！
ターミナルで適当なディレクトリに移動してコマンドを入力します。

$ cd ~/dev/src
$ flutter create hello_flutter
# => In order to run your application, type:
# =>   $ cd hello_flutter
# =>   $ flutter run

$ ls
# =>   hello_flutter

アプリを実行するにはflutter runしてね、と言われるので、実行します。

$ flutter run
# => No connected devices.

さっきダウンロードした端末と接続できてない様子。flutterに聞いてみます。

$ flutter doctor
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

ライセンスに同意する必要があるそうなので、同意します。

$ flutter doctor --android-licenses

ライセンスを確認しますか？と聞かれるのでyで答えてそれぞれ同意します。
再度flutterを実行！

$ flutter run
# => No connected devices.

むむむ。

$ flutter emulators
# => 1 available emulator:
# => Nexus_5X_API_28 • Nexus 5X • Google • Nexus 5X API 28
# => To run an emulator, run 'flutter emulators --launch <emulator id>'.
# => To create a new emulator, run 'flutter emulators --create [--name xyz]'.

ならば、とflutter emulators --launch Nexus_5X_API_28を入力すると、今立ち上げてるから二重起動はできないよ、と怒られます。うーん？

エミュレータを終了させて、再度flutter emulators --launch Nexus_5X_API_28を入力するとエミュレータが起動します。が、やはりdeviceが接続されていないよ、とのこと。
参考記事のようにもうひとつAndroid Emulatorを作成し、再起動後にflutter runすると、(This is taking an unexpectedly long time.)のメッセージ。
うーん…。

あれこれ試してみて、androidエミュレータを起動しているのにdevice not foundが出る問題を参考に、2つめに作った仮想端末をGUI(Android Studio)から起動してflutter runすると実行できることがわかりました。
謎事象だけど、実行を先にしたいので後で調べることにします。

今回はHello, Flutter!と画面に表示するのが目的なので、lib/main.dartファイルを編集します。
ホットリロードはターミナルでrを押してね、とのことなので、rを入力してファイルを保存。

children: <Widget>[
  Text(
    'Hello, Flutter for this many times:',
  ),
  Text(
    '$_counter',
    style: Theme.of(context).textTheme.display1,
  ),
],

無事ホットリロードされることを確認しました！👏👏👏

iOS環境を構築

お次はiOS環境の構築。
XCodeはAppStoreからインストール。

XCodeはインストール済だったので、早速Simulatorを立ち上げます。 XCodeのインストール方法はこちらに詳しいです。

なお、GUIの場合は「XCode」->「Open Developer Tool」->「Simulator」で起動。
CUIの場合はopen -a Simulatorで起動できます。

Androidはflutter emulatorsで仮想端末を確認できますが、iOSはflutter devicesで確認する様子。
Simulatorが起動している状態でflutter runで実行できます。
Androidと同様に「ホットリロードはrを押してね」と表示されるのですが、ターミナルでrを毎回入力する必要があるっぽい？この辺も後々確認していきたいと思います。

iOS環境を整える

終了！と言いたいところなのですが、flutter doctorすると結構エラーが出てきたので、その解決を。

$ flutter doctor

[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.3 18D109, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        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 (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.32.1)
[✓] Connected device (1 available)

Android StudioではなくVS Codeで開発していくのでAndroid Stuidoのエラーは放置。
iOS周りの問題を解決してゆきます。

とはいえflutterがコマンドを教えてくれているので、それをひとつひとつ実行するだけ。

# libimobiledevice and ideviceinstaller are not installed.
$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller

# ios-deploy not installed.
$ brew install ios-deploy

# CocoaPods not installed.
$ brew install cocoapods
$ pod setup

(CocoaPodsはダウンロードに時間かかります)

全部終わったら再度flutter doctorを実行。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.3 18D109, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[!] Android Studio (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.32.1)
[✓] Connected device (1 available)

無事環境構築が完了しました！