MacでFlutterの環境構築(2020年7月)
9年ぶりの記事……😇
最近Flutterの勉強を始めたので、覚書き等投稿していきます。 まずは環境構築から。
公式サイトはこちら
こちらの手順のままでも十分できるのですが、Xcodeまわり、AndroidのAVDマネージャまわりがちょっと変わっていました。
Flutter SDKの取得
macOS install - Flutter からダウンロード or バージョンを固定したくない場合は下記コマンドでリポジトリをgitからcloneします
$ git clone https://github.com/flutter/flutter.git
使っているshellの.rcファイルに↓を追記してflutterのパスを通します。
$ vi ~/.zshrc # For Flutter export PATH="$PATH:`SDKをダウンロード or git cloneしたディレクトリのパス`/flutter/bin"
Flutterは基本的に必要に応じて固有のバイナリファイルなどをダウンロードしますが、事前にすべてダウンロードしておきたいというような場合(インターネットに繋げない環境になるなど)は下記コマンドを実施しておきます。
$ flutter precache
Flutter doctorコマンド
Flutter doctorコマンドでは、必要なライブラリが不足していないかなどをチェックしてくれたりします。何かflutterコマンドでエラーが出たときは、とりあえずこのコマンドを実行するとよさそう。
まっさらの環境でここまで実施した時点でdoctorコマンドを実行すると、下記のようになるはずです。
$ flutter doctor
Downloading Dart SDK from Flutter engine dcc9a4048da890660f0880b4c2afed7c9470d335...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 255M 100 255M 0 0 3559k 0 0:01:13 0:01:13 --:--:-- 5705k
Building flutter tool...
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
Downloading Material fonts... 2.4s
Downloading Gradle Wrapper... 0.3s
Downloading package sky_engine... 0.7s
Downloading flutter_patched_sdk tools... 23.3s
Downloading flutter_patched_sdk_product tools... 4.5s
Downloading darwin-x64 tools... 21.1s
Downloading libimobiledevice... 1.1s
Downloading usbmuxd... 0.3s
Downloading libplist... 0.3s
Downloading openssl... 0.7s
Downloading ios-deploy... 0.6s
Downloading darwin-x64/font-subset tools... 1.0s
Downloading android-arm-profile/darwin-x64 tools... 11.4s
Downloading android-arm-release/darwin-x64 tools... 1.1s
Downloading android-arm64-profile/darwin-x64 tools... 0.9s
Downloading android-arm64-release/darwin-x64 tools... 1.6s
Downloading android-x64-profile/darwin-x64 tools... 0.9s
Downloading android-x64-release/darwin-x64 tools... 1.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-2.0.pre.114, on Mac OS X 10.15.5 19F101,
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.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, set
ANDROID_SDK_ROOT 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
sudo xcodebuild -runFirstLaunch
✗ 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:
sudo gem install cocoapods
[!] Android Studio (not installed)
[✓] VS Code (version 1.47.2)
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
AndroidSDKまわり、AndroidStudio、Xcode、使えるデバイスが無いよ〜という結果になります そのあたりは次のセクションで入れていくので、いったんはこのままで次に進みます。
動作確認用のアプリを作る
次セクションでセットアップする環境の動作確認用にアプリを作っておきます
$ flutter create my_app
これでカウンターアプリが作成されます。
各プラットフォームの設定
MacではiOS/Android/Webの開発ができるので、最低各環境のうち1つのセットアップを完了させていきます。今回はiOSとAndroidのセットアップを説明していきます。
iOS
Xcodeのインストール
AppStoreからインストールします
インストールが終わったら、Xcodeを開くか、コマンドラインからライセンスの同意をおこないます。
最新のコマンドラインツールを使うよう下記コマンドで設定します。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -runFirstLaunch
あとは、実機へのデプロイに使うためのgemをインストールしておきます。(今回実機へのデプロイ手順の説明は省いています。必要な方は macOS install - Flutter 参照してください)
$ sudo gem install cocoapods $ pod setup
iOSシミュレータのセットアップ
下記コマンド(もしくはXcodeから)シミュレーターを開きます。
$ open -a Simulator
File>OpenDeviceから64bitデバイス(iPhone5s以上)を選択していることを確認します。公式サイトではHardware>Deviceとなっていますが、Xcode9からなくなっているメニューのため、Fileメニューから確認します。
公式サイトでは、次にWindow > Scaleからサイズの調整の項目がありますが、こちらもXcode9からは、ドラッグして任意のサイズに変更できるようになったので、なくなっているメニューになります。
動作確認
シミュレーターを起動した状態で、動作確認用アプリのディレクトリに移動後下記コマンドを実行します
$ cd my_app $ flutter run Downloading ios tools... 12.0s Downloading ios-profile tools... 7.3s Downloading ios-release tools... 83.0s Launching lib/main.dart on iPhone SE (2nd generation) in debug mode... Running Xcode build... └─Compiling, linking and signing... 59.1s Xcode build done. 83.4s Waiting for iPhone SE (2nd generation) to report its views... 4ms Syncing files to device iPhone SE (2nd generation)... 182ms Flutter run key commands. r Hot reload. 🔥🔥🔥 R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). An Observatory debugger and profiler on iPhone SE (2nd generation) is available at: http://127.0.0.1:50135/vCEgznKhEwY=/
シミュレーターを見るとカウンターアプリが表示されているはずです。
Android
ここではAndroidStudioをインストールが必要になりますが、実際開発していく際は他のエディターを使うことも可能です。私はAndroidStudioを使っていますが、vim等も使えるようです。
AndroidStudioのインストール
Download Android Studio and SDK tools | Android Developers からAndroidStudioのダウンロード&インストールします。
初回起動時、AndroidStudioのセットアップウィザードが開くので、最新版のAndroidSDK,Android SDK Command-line Tools, and Android SDK Build-Toolsをインストールします(特に特別な事をしなくても勝手にインストールされるので、デフォルトのまま Next ボタンで進めて行けばよいです。
プラグインのインストール
Preferences > Plugins から、Flutter プラグインをインストールします(この時一緒に Dart のプラグインもインストールされます)
Androidエミュレータのセットアップ
ハードウェアアクセラレーションの設定
AndroidStudioでAVD Managerを開きます。
AndroidStudioを開いた時に出るウィンドウの右下の Configure から AVD Manager を選択します。
(上記ウィンドウではなく、通常のコード編集ウィンドウが開いている場合は、 Tools > Android > AVD Manager から開きます)
AVD Managerが開いたら、 +Create Virtual Device... から新規作成を行います。
Choose a device definition では、 Play Store が無いものを選ぶようにします。バグ？なのか、Play Store があるdeviceにすると、ハードウェアアクセラレーションが選択できなくなるためです…。(refs:
https://stackoverflow.com/questions/53016119/why-cant-i-change-the-emulated-performance-graphics-setting-in-the-android-v )
作成できたら、Verify Configuration の Emulated Performance で Hardware - GLES 2.0 を選択します。
これでAVDの設定は完了です。
動作確認
まず下記コマンドでAndroidSDKのライセンスの同意を行います。
$ flutter doctor --android-licenses Warning: File /Users/xxxx/.android/repositories.cfg could not be loaded. 6 of 7 SDK package licenses not accepted. 100% Computing updates... Review licenses that have not been accepted (y/N)? y 1/6: License android-googletv-license: --------------------------------------- Terms and Conditions This is the Google TV Add-on for the Android Software Development Kit License Agreement. (...中略...) All SDK package licenses accepted
エミュレータを起動した状態で、動作確認用アプリのディレクトリに移動後下記コマンドを実行します
$ cd my_app $ flutter run Using hardware rendering with device sdk gphone x86 arm. If you notice graphics artifacts, consider enabling software rendering with "--enable-software-rendering". Launching lib/main.dart on sdk gphone x86 arm in debug mode... Checking the license for package Android SDK Build-Tools 28.0.3 in /Users/xxx/Library/Android/sdk/licenses License for package Android SDK Build-Tools 28.0.3 accepted. Preparing "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)". "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" ready. Installing Android SDK Build-Tools 28.0.3 in /Users/xxx/Library/Android/sdk/build-tools/28.0.3 "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" complete. "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" finished. Checking the license for package Android SDK Platform 28 in /Users/xxx/Library/Android/sdk/licenses License for package Android SDK Platform 28 accepted. Preparing "Install Android SDK Platform 28 (revision: 6)". Running Gradle task 'assembleDebug'... "Install Android SDK Platform 28 (revision: 6)" ready. Installing Android SDK Platform 28 in /Users/xxx/Library/Android/sdk/platforms/android-28 "Install Android SDK Platform 28 (revision: 6)" complete. "Install Android SDK Platform 28 (revision: 6)" finished. Running Gradle task 'assembleDebug'... Running Gradle task 'assembleDebug'... Done 232.2s (!) ✓ Built build/app/outputs/flutter-apk/app-debug.apk. Installing build/app/outputs/flutter-apk/app.apk... 1.4s Waiting for sdk gphone x86 arm to report its views... 10ms Syncing files to device sdk gphone x86 arm... 269ms Flutter run key commands. r Hot reload. 🔥🔥🔥 R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). An Observatory debugger and profiler on sdk gphone x86 arm is available at: http://127.0.0.1:56194/sN9MGqne9Qo=/
エミュレータにカウンターアプリが表示されればOKです。
最後の確認
最後に flutter doctor コマンドを実行してみます。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-6.0.pre.3, on Mac OS X 10.15.5 19F101,
locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.47.2)
[!] Connected device
! No devices available
! Doctor found issues in 1 category.
使えるデバイスが無いとは言われていますが、これはエミュレータ等を起動 or 実機を接続していないためなので、特に問題はありません。
