概要
公式サイトのGet startedの 1. install と 2: Configure editor の手順に沿って、Flutterの環境構築を行った。
手順通りに進めていきつつ、気になったところをピックアップした。
SDKのバージョンが古い？
Get startedにリンクが貼られているSDKは flutter_macos_v0.5.1-beta.zip なんだけど、どうやらバージョンが古い模様。
手順通り一時的にpathを通したあと、確認のためバージョンを確認するコマンドを実行したところ、WARNINGが出力された。
コマンド
% flutter -v
╔════════════════════════════════════════════════════════════════════════════╗
║ WARNING: your installation of Flutter is 39 days old. ║
║ ║
║ To update to the latest version, run "flutter upgrade". ║
╚════════════════════════════════════════════════════════════════════════════╝
.zprofile にpathを追記したあとに再度確認したところ、WARNINGは出力されなかった。
調べたところ、公式のUpgrading Flutterで言及されていた。
We strongly recommend tracking the beta branch in the flutter repository, which is where we push ‘known good builds’ of Flutter. If you need to view the very latest changes, you can track the master branch, but note this is where we do our daily development, so stability is much lower.
betaブランチを追跡することが推奨されていて、最新版を追いたければmasterブランチを追跡すればいいけど開発で使われているから安定性は低いよってことらしい。
betaとは…。
Flutter doctorで構築のタスクを確認
✗ と ! の項目を ✓ にすれば環境構築が完了ということのようだ。
コマンド
% 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 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.io/setup/#android-setup for detailed instructions).
If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices
✗ 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
✗ 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 installed but not initialized.
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 initialize CocoaPods, run:
pod setup
once to finalize CocoaPods' installation.
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[!] Connected devices
! No devices available
! Doctor found issues in 4 categories.
iOSの環境設定
flutter doctorのエラーを修正する
いろいろなところでよく見るツール群をインストール。
コマンド
% brew update
% brew install --HEAD libimobiledevice
% brew install ideviceinstaller ios-deploy cocoapods
% pod setup
再度 flutter doctor で確認。
コマンド
% 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 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.io/setup/#android-setup for detailed instructions).
If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices
✗ 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
✗ Missing Xcode dependency: Python module "six".
Install via 'pip install six' or 'sudo easy_install six'.
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[✓] Connected devices (1 available)
! Doctor found issues in 3 categories.
iOSの項目が解決できていないので、ログを確認して記載してあるコマンドを実行してみる。
コマンド
% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
% pip install six
再度 flutter doctor で確認。
コマンド
% 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 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.io/setup/#android-setup for detailed instructions).
If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[✓] Connected devices (2 available)
! Doctor found issues in 2 categories.
解決できたっぽい。
[✓] Connected devices (2 available) はSimulatorとiPhoneを接続しているからだと思われるが、試しにiPhoneの接続を解除（ケーブルを抜いた）けど、数に変わりはなかった。
気にしないことにしよう。
サンプルプロジェクトを実行する
公式サイトの手順では自分のプロジェクトの設定をする流れになっているが、まだ自分のプロジェクトを作っていないので、SDKに含まれていたサンプルをビルドしてみることにした。
選んだサンプルプロジェクトは hello_world 、その中のiOSディレクトリにある Runner.xcworkspace を開く。
コマンド
% cd (SDK))/examples/hello_world/
% open ios/Runner.xcworkspace
Xcodeでプロジェクトが開かれるので、手順を参考に設定する。
私の場合は General > Signing > Team を自分のアカウントに紐づけた。
Xcode上のエラーがなくなったので、Runしてみる。
コマンド
% flutter run
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.
iPhone6 • (deviceId) • ios • iOS 11.3.1
iPhone X • 836CDCA0-3655-405A-A646-631F77F322B4 • ios • iOS 11.4 (simulator)
ふむ、端末が複数あるときはIdかすべての端末を指定する必要があるのか。
ひとまず、罠が多そうな実機で実行してみる。
コマンド
% flutter run -d (deviceId)
Launching lib/main.dart on iPhone6 in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: 2FZSDA66L9
Starting Xcode build...
├─Assembling Flutter resources... 1.3s
└─Compiling, linking and signing... 2.0s
Xcode build done. 4.5s
Installing and launching...
2018-07-08 17:11:21.940 ios-deploy[87674:1685516] [ !! ] Unable to locate DeviceSupport directory with suffix 'Symbols'. This probably means you don't have Xcode installed, you will need to launch the app manually and logging output will not be shown!
Could not install build/ios/iphoneos/Runner.app on (deviceId).
Try launching Xcode and selecting "Product > Run" to fix the problem:
open ios/Runner.xcworkspace
Error launching application on iPhone6.
おっと、エラーになってしまった。
エラーの詳細がわからないので、ログにあるようにXcodeからRunしてみる。
Xcodeのエラーログ
/bin/sh: /packages/flutter_tools/bin/xcode_backend.sh: No such file or directory
Run時に実行するShell Scriptが見つからないという感じのエラーなので、Xcodeで Build Phases > Run Script を確認して、記載されているコマンドを確認する。
Xcodeのエラーログ
/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
なるほど、 $FLUTTER_ROOT が設定されていないっぽい。
念のため、確認。
コマンド
% echo $FLUTTER_ROOT
ふむ、やっぱり設定されていない。
ということで、SDKを展開したディレクトリのパスを .zprofile に設定しておく。
.zprofileに追加
export FLUTTER_ROOT="(SDKの展開先)"
.zprofile を読み込み直して、再度 flutter run -d (deviceId) を実行。
コマンド
% flutter run -d (deviceId)
Launching lib/main.dart on iPhone6 in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: 2FZSDA66L9
Starting Xcode build...
├─Assembling Flutter resources... 1.0s
└─Compiling, linking and signing... 2.0s
Xcode build done. 4.2s
Installing and launching...
Traceback (most recent call last):
File "<input>", line 1, in <module>
File "/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/copy.py", line 52, in <module>
import weakref
File "/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/weakref.py", line 14, in <module>
from _weakref import (
ImportError: cannot import name _remove_dead_weakref
Syncing files to device iPhone6... 2.8s
🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone6 is available at: http://127.0.0.1:8101/
For a more detailed help message, press "h". To quit, press "q".
実機で実行に成功した。
q を入力するとデバッグ終了の模様。
念のため、Simulatorでも実行できるか確認する。
コマンド
% flutter run -d 836CDCA0-3655-405A-A646-631F77F322B4
Launching lib/main.dart on iPhone X in debug mode...
Starting Xcode build...
├─Assembling Flutter resources... 1.1s
└─Compiling, linking and signing... 6.7s
Xcode build done. 9.6s
Syncing files to device iPhone X... 2.6s
🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:8102/
For a more detailed help message, press "h". To quit, press "q".
Simulatorでも実行できた。
Androidの環境設定
flutter doctorのエラーを修正する
Android Studioはダウンロードしただけだったので、まずAndroid Studioを起動して促されるままに設定していく。
Android Studio Setup Wizard が完了したところで、再度 flutter doctor で確認。
コマンド
% 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 toolchain - develop for Android devices (Android SDK 28.0.1)
✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[✓] Connected devices (2 available)
! Doctor found issues in 2 categories.
まだ解消できていないものがあるので、ログに記載してあるコマンドを実行する。
コマンド
% flutter doctor --android-licenses
実行するとライセンスの確認をするか聞かれるので、 y と入力して、表示されるライセンスを確認しつつ、問題なければ y と入力する。
6ファイル分ぐらい確認すれば完了。
再度 flutter doctor で確認。
コマンド
% 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 toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[✓] Connected devices (2 available)
! Doctor found issues in 1 category.
pluginがインストールされていない旨のメッセージがでているけど、先にAndroid emulatorの設定をしておく。
設定用に適当なプロジェクトを作って、それをAndroid emulatorで起動しつつ、設定した。
続いて、 2: Configure editor の手順に沿ってpluginをインストールして、再度 flutter doctor で確認。
コマンド
% 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 toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[!] VS Code (version 1.24.1)
[✓] Connected devices (2 available)
! Doctor found issues in 1 category.
Androidの問題は解決できた。
サンプルプロジェクトを実行する
手元にAndroidの実機がないので、さきほど作成したエミュレータ上でAndroidのサンプルプロジェクトを実行する。
emulatorの deviceId を調べるために flutter run を実行。
コマンド
% flutter run
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.
Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)
iPhone X • 836CDCA0-3655-405A-A646-631F77F322B4 • ios • iOS 11.4 (simulator)
deviceId がわかったので、その deviceId を対象に flutter run を実行する。
コマンド
% flutter run -d emulator-5554
Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle... 16.6s
Resolving dependencies... 103.9s
Running 'gradlew assembleDebug'... 18.6s
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk... 1.1s
I/FlutterActivityDelegate( 6500): onResume setting current activity to this
I/Choreographer( 6500): Skipped 50 frames! The application may be doing too much work on its main thread.
D/EGL_emulation( 6500): eglMakeCurrent: 0xe13338c0: ver 2 0 (tinfo 0xe2568b00)
I/OpenGLRenderer( 6500): Davey! duration=944ms; Flags=1, IntendedVsync=2356325086415, Vsync=2357158419715, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=2357173860878, AnimationStart=2357173896878, PerformTraversalsStart=2357173912878, DrawStart=2357181064878, SyncQueued=2357191369878, SyncStart=2357195961878, IssueDrawCommandsStart=2357196175878, SwapBuffers=2357230055878, FrameCompleted=2357273973878, DequeueBufferDuration=26623000, QueueBufferDuration=706000,
Syncing files to device Android SDK built for x86...
D/ ( 6500): HostConnection::get() New Host Connection established 0xe2567900, tid 6524
D/EGL_emulation( 6500): eglMakeCurrent: 0xe1333800: ver 2 0 (tinfo 0xe2568830)
🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:8102/
For a more detailed help message, press "h". To quit, press "q".
Androidでのサンプルプロジェクトの実行もできた。
まとめ
公式の手順がちゃんとしているので、ハマる部分がほとんどなかった。
ソースコードに関しては今回は追いかけていないので、次の記事では公式のGet startedの Write Your First Flutter App を追ってみようと思っている。