なぜこの文章を書いているか？
この文章（Flutter 1.2.x 環境をmacOS上に構築する）を過去に書き間が空いたのと再度Flutterを触り始めたので環境をまっさらな状態から作り直した作業ログとしてまとめたのが以下です。最近はLaravelとかNuxt.jsとかTypeScriptとかいじってますが、そろそろ他のものもということで。
今回はできる限り公式サイトの順番で環境を作っていこうと思います。
https://flutter.dev/docs/get-started/install/macos
環境（2019/08/30（金）現在）
- macOS Mojave(10.14.6)
- Xcode 10.3
- IntelliJ IDEA Ultimate 2019.2.1
- Flutter 1.7.8 + Hotfix 4 Stable
インストール
Tools
公式サイトに書かれている必須ツールは以下の通り。
- bash
- curl
- git 2.x
- mkdir
- rm
- unzip
- which
このうち、macOS Mojaveに標準で入っていないのはgitなのでインストールする。
$ xcode-select --install
「"xcode-select"コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です。ツールを今すぐインストールしますか？」とウィンドウが表示されたらインストールをクリック。
「Command Line Tools使用許諾契約」画面が表示されたら内容を読んだ上で同意するをクリック。
インストールが完了したら以下でバージョンが表示されればOK。
$ git --version
git version 2.20.1 (Apple Git-117)
Flutter SDKのインストール
公式サイトのflutter_macos_v1.7.8+hotfix.4-stable.zipと書かれている青いボタンをクリックしてZipファイルをダウンロードします。
ダウンロードしたら、~/development以下に展開します。
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip
~/development/flutter/bin/が作られるのでPATHを通します。
$ echo 'export PATH=$PATH:~/development/flutter/bin' >> ~/.profile
$ exec $SHELL -l
以下でバージョン情報が表示されればOK。
$ flutter --version
Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20e59316b8 (6 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0
以下でバイナリをダウンロード（キャッシュ）しておきます。瞬間で終わるので実際に何か行われている感じはしないのですが、念の為。
$ flutter precache
Flutterの実行に必要な環境が揃っているか以下でチェックします。
途中「"gen_snapshot"はこのMac用に最適化されていないため、アップデートが必要です。」と出ますのでOKをクリックします。
$ flutter doctor -v
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G95, locale
ja-JP)
• Flutter version 1.7.8+hotfix.4 at /Users/foobar/development/flutter
• Framework revision 20e59316b8 (6 weeks ago), 2019-07-18 20:04:33 -0700
• Engine revision fee001c93f
• Dart version 2.4.0
[✗] 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.dev/setup/#android-setup for detailed
instructions).
If the Android SDK has been installed to a custom location, set
ANDROID_HOME to that location.
You may also want to add it to your PATH environment variable.
[✗] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS
development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods
pod setup
! Brew can be used to install CocoaPods.
Download brew at https://brew.sh/.
[✗] 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
! Brew can be used to install tools for iOS device development.
Download brew at https://brew.sh/.
[!] Android Studio (not installed)
• Android Studio not found; download from
https://developer.android.com/studio/index.html
(or visit https://flutter.dev/setup/#android-setup for detailed
instructions).
[!] Connected device
! No devices available
! Doctor found issues in 5 categories.
色々と未インストール（環境未整備）だと怒られているので順に入れていきます。
Xcodeをインストール
App Storeを起動し、検索窓にxcodeと入力して検索しインストールします。時間がかかるので私は一晩寝かしました。
すでにコマンドラインツールはインストール済みですが、公式ドキュメントのとおりにインストールしたXcodeから設定しておきます。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Xcodeのライセンス承諾を行うために以下のコマンドを実行します。Enterを押した後、Spaceキーで最後まで読み、入力を求められたらagreeとキー入力してEnterを押してライセンス条項に対し承諾をします。
$ sudo xcodebuild -license
この状態で以下のコマンドが実行できgitのバージョンが表示されればOKです。
$ git --version
git version 2.20.1 (Apple Git-117)
iOSシミュレータの設定
以下のコマンドを実行しiOSシミュレータを起動します。
$ open -a Simulator
Hardware > Device > Manage Devicesを選択し、「Install additional required components?」画面が出たらInstallをクリックし、パスワードの入力画面が出るのでMacのアカウントのパスワードを入力しOKをクリックします。
インストールが起動したらXcodeが起動するので、一旦iOSシミュレータを終了して再度起動します。私の環境ではiPhone XRのシミュレータが自動的にスタートしました。公式ドキュメントには「64bitのiPhone5S以降をセットアップしてね」とありますが現在のiOSシミュレータではこれ以上特に作業は必要ありません。
テストアプリを作ってみる
公式ドキュメントではここで唐突にテストアプリを作る項目が出てきます。iOSシミュレータがセットアップできているかなどのチェック用でしょうか？ここでは言われたとおりに作ってみることにします。
ターミナルで適当な場所に作業用ディレクトリを作成し、そこで作業を進めます。
$ mkdir ~/development/project
$ cd ~/development/project
$ flutter create my_app
$ cd my_app
$ flutter run
No connected devices.
Run 'flutter emulators' to list and start any available device emulators.
If you expected your device to be detected, please run "flutter doctor" to
diagnose
potential issues, or visit https://flutter.dev/setup/ for troubleshooting tips.
怒られました。どうやらiOSシミュレータを終了していたためのようです。iOSシミュレータを起動しiPhone XRのシミュレータが起動している状態でもう一度flutter runを実行してみます。
Flutter Demo Home Pageという画面がシミュレータに表示されればOKです。ターミナルでqを入力するとアプリが終了します。
iOSデバイス（実機）にデプロイするための設定
Homebrewをインストールするように書かれているのでそのとおりにします。Qiitaを読んでらっしゃるMacユーザならインストール済みと思われますので（偏見）説明は省きます。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update
iOSデバイス（実機）にデプロイするために必要なツール群をbrewコマンドを使ってインストールしていきます。私の環境ではbrew link usbmuxdで「リンク済み」の旨のメッセージが出ましたが特に問題ないと思われます。
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup
先ほど作ったテストアプリをiOSデバイスにデプロイできるようにするためにプロジェクトにサインをします。基本公式ページのとおりですが簡単にまとめます。
- ターミナルで
open ios/Runner.xcworkspaceとしてXcodeを開きます - iOSデバイスをMacに接続して「信頼するか？」など聞かれたら通常の方法でMacとiOSデバイスが通信できる状態にします
- Xcodeの左上のプルダウンが
Runner > iPhone XRとなっていたら、プルダウンをクリックして接続したiOSデバイスを選択します - 左ペインの一番上にある
Runnerプロジェクトをクリックして選択します - Xcode 9と10は真ん中のペインの
General > Signing > Teamを、Xcode 11はSigning & Capabilities > TeamにあるTeamメニューに自分のチーム（Apple ID）を設定します - 自分の環境では「You currently don't have access to this membership resource. To resolve this issue, agree to the latest Program License Agreement in your developer account.」と出ていたのでDev Centerにアクセス、その後
accountにメニューから移動し「The Apple Developer Program License Agreement has been updated.」と赤背景でメッセージが出ているところから「Review Agreement」をクリック、内容を確認しチェックボックスをチェック、「I Agree」ボタンをクリック、最後にXcodeに戻ってエラーメッセージの下の「Try again」ボタンをクリックしました - iOSシミュレータを終了した上でターミナルから
flutter runを実行 - 先ほどと同じ
Flutter Demo Home PageがiOSデバイスで表示されたらOKです
Android Studioの代わりにIntelliJ IDEA Ultimateをインストールする
公式サイトではAndroid Studioをインストールしていますが、私はIntelliJ IDEAを普段使っているのでそちらで利用可能なように設定します。
まず、Homebrew Caskを使ってJetBrains ToolBoxをインストールします。
$ brew cask install jetbrains-toolbox
ApplicationからJetBrains ToolBoxを起動し、JetBrainsアカウントでログイン後、IntelliJ IDEA Ultimateをインストールします。
インストールが終わったらIntelliJ IDEAを起動します。初期設定の時にAndroid開発の追加インストールがされているはずですので、Welcome画面からCreate New Projectを選択し、New Project画面でAndroidを選択するとConfigure Android SDK画面が表示されるのでInstall SDKボタンをクリックします。
Nextをクリックしていき最後にFinishをクリックすると${USER_HOME}/Library/Android/sdk/以下にAndroid SDKがインストールされます。Choose your project画面に戻ったら今回はcancelをクリックしてキャンセルします。
Androidデバイスの設定
公式ページを見ながら順に設定していきます。
- Androidデバイスの
開発者オプションとUSBデバッグを有効にします。デバイスやOSのバージョンによりますが通常はビルド番号を何回かタップすると開発者オプションが有効になり、設定 > システム > 開発者オプションからUDBデバッグのオン・オフができます - USBケーブルでMacとAndroidデバイスを接続します。
- ターミナルで
fultter devicesを実行して接続したデバイスが1 connected device:などと表示されればOKです。表示されない場合やDevice XXXXXXXX is not authorized.と出ている場合は再接続やデバイスの認証、USB設定などを見直してみてください
この状態でターミナルからIntelliJ IDEAを起動し、Androidデバイスにデプロイしてみます。以下でターミナルから開けない場合は手動で~/development/project/my_app/androidをIntelliJ IDEAで開きます。
$ cd ~/development/project/my_app
$ idea ./android
最初はプロジェクトのインデックスに時間がかかります。インデックスが終わると私の環境では２つwarningが出ました。
- Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.
- Warning: License for package Android SDK Platform 28 not accepted.
ライセンスについて承諾していないのが理由のようです。色々と調べるとAndroid SDKのsdkmanagerで承諾することができそうです。とりあえず実行してみます。
$ ~/Library/Android/sdk/tools/bin/sdkmanager --licenses
No Java runtime present, requesting install.
おっとJava runtimeのインストールがまだでした。宗教上の理由でanyenvを使います。
$ brew install anyenv
$ anyenv install --init
$ echo 'eval "$(anyenv init --no-rehash -)"' >> ~/.profile
$ exec $SHELL -l
$ anyenv install jenv
$ exec $SHELL -l
$ brew tap caskroom/versions
$ brew cask install adoptopenjdk8
$ jenv add $(/usr/libexec/java_home -v 1.8)
$ jenv global 1.8
$ java -version
openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)
もう一度sdkmanagerを起動します。
$ ~/Library/Android/sdk/tools/bin/sdkmanager --licenses
色々とライセンスの承諾を聞かれるのでyを入力していきます。
最後にAll SDK package licenses acceptedと出ればOKです。
BuildタブからBuildを再実行してみるとandroid:successfulとなりWarningは消えました。
Run > Edit configurations...を選択し、左上の+をクリックしてAndroid Appを選択します。Nameをmy_appに変更、Moduleにappを選択しApply、OKをクリックして画面を閉じます。
Run > Run 'my_app'を選択すると、どのデバイスをビルドターゲットにするか聞かれるのでUSBで接続したAndroidデバイスを選択しOKをクリックするとビルドが始まり、自動的にデバイスにデプロイされ、テストアプリが起動します。
Androidエミュレータの設定
IntelliJ IDEAからAndroidエミュレータが動作するように設定します。
-
Tools > Android > AVD Managerを選択 -
+ Create Virtual Device...をクリック -
Phone > Nexus 5Xを選択しNextをクリック -
Pieの隣のDownloadをクリックしPieをインストールします -
Pieのインストールが終了したらFinishをクリック - 改めて
Pieを選択しNextをクリック -
Finishをクリック -
ADV Managerを一旦閉じ、Run > Run 'my_app'を選択 -
Select deployment target画面にNexus 5Xがあるので選択してOKをクリック - エミュレータが自動で起動します
- エミュレータが起動すると自動的にデプロイされ、テストアプリが起動します
落ち穂拾い
fultter doctor -vを実行して問題を確認します。
$ flutter doctor -v
（中略）
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/foobar/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 29.0.2
• Java binary at: /Library/Java/JavaVirtualMachines/adoptopenjdk-12.0.2.jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment AdoptOpenJDK (build 12.0.2+10)
✗ Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.
（中略）
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.1)
• IntelliJ at /Users/foobar/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• For information about installing plugins, see
https://flutter.dev/intellij-setup/#installing-the-plugins
（中略）
! Doctor found issues in 3 categories.
Android SDKのライセンスが不明ということなので、flutter doctor --android-licenseを実行してみます。
$ flutter doctor --android-licenses
All SDK package licenses accepted.
Android Studioはわざといれていないのでここでは無視します。
IntelliJ IDEAにFlutterとDartのプラグインが入っていないと言われているのでインストールしてIntelliJ IDEAをリスタートします。
もう一度flutter doctor -vを実行します。
$ flutter doctor -v
（中略）
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).
（中略）
! Doctor found issues in 1 category.
Android Studio以外のエラーが消えました。これで開発環境が揃ったことになります。
# まとめ
前回のインストールログをまとめてから、ちょっとしたサンプルプログラムを作っただけだったので、今度はもうちょっとちゃんとしたものを作りたいなぁと考えています(^^;