iOS開発者がFlutterの開発環境を構築してみた

Flutterの環境構築のメモです。
普段からXcodeを使ってiOSアプリを開発しているユーザー向けの手順です。

まとめ

基本、公式ドキュメントの手順に従いましょう。

環境

• macOS: 10.14.6
• Xcode: 10.3
  • Command line toolsもインストール済み
• Homebrew: 2.1.9

Xcodeのセットアップ

普段から使っていれば、特に新しくインストールするものはありません。
ただし、このコマンドだけは実行しておきましょう。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

このコマンドを実行しておかないと、FlutterからiOSシミュレータを認識しない場合があります。
特に、Xcodeのベータ版をインストールしているような場合は忘れずに実行しましょう。

Android Studioのインストールとセットアップ

はじめにAndroid Studioをインストールします。
公式ページからダウンロードしたものを使いましょう。

無事起動したら、Configure -> Plugins から Flutter plugin と Dart plugin をインストールします。

AVDでエミュレータのセットアップ

あとで動作確認するときに必要になるので、Configure -> AVD Manager でエミュレータを作成しておきます。
x86_64のイメージをダウンロードしてきて、任意のデバイスで作成しましょう。

~/.androidにアクセス権が付与されていないとき、エミュレータの作成に失敗する場合があります。
その時は sudo chown -R <username> ~/.android しておきましょう。

Flutter SDKのインストール

FlutterのMacOS installから、SDKをダウンロードして展開します。
展開した後、適当なディレクトリに移動します。

$ cd ~/bin
$ unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip
$ mv ~/Downloads/flutter .

移動先のディレクトリにパスが通っていなければ .bash_profile などに追記しておきましょう。

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

flutter doctorで環境の診断

ここまで進んだら、flutter doctor で環境をチェックします。
足りないものがあれば指示が出ていますので、適宜インストールしましょう。

❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G84, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
[✗] iOS tools - develop for iOS devices
    ✗ 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
[✓] Android Studio (version 3.4)
[!] VS Code (version 1.36.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

アプリを作成して実行する

適当なディレクトリに移動して、Flutterアプリを作成します。

$ cd ~/dev/flutter
$ flutter create my_app

成功したら、iOSシミュレータかAndroidのエミュレータを起動します。

iOSは open -a Simulator。
Androidは AVD Manager から任意のエミュレータを起動してください。

ここまで進んだら、flutter run -d all しましょう。
iOSシミュレータとAndroidのエミュレータの両方でアプリが起動します。

iOSの実機で実行する

iOSの実機で実行したい場合、以下の手順で実行できます。

1. アプリのルートディレクトリに移動する
2. pod setupを実行する
3. ios/Runner.xcworkspaceをXcodeで開く
   • Bundle Identifier、（必要あれば）Teamsを変更する
4. flutter run -d <device_id> でアプリを実行する
   • <device_id>はflutter doctor -vなどで確認できる