【2021年度版】M1 Macbook ProでFlutter開発環境構築〜サンプルアプリビルドまで

Flutter

はじめに

ついに私、M1版 Macbook Pro を購入しました!

今まで無印Macbook 2016年モデル (Intel Core m3, memory 8GB) で開発していたのですが、ビルドがあまりにも遅すぎて疲弊していました…

で、https://flutter.dev/docs/get-started/install/macos に沿って再度環境構築をしてみようと思ったものの、やっぱりなんだかんだで詰まるポイントがいくつかあります。w

同じ境遇の方の参考になればいいなと思い、書き残してみました。

Flutterが推奨している Android Studio による開発環境の構築から環境確認コマンド flutter doctor のチェックがすべて通るところまで、さらにAndroid Emulator 上にサンプルアプリをビルドし起動するところまでを解説していきます。

前半

Xcodeのインストール

なにはともあれApp Storeで Xcode と検索して、インストールしてみます。

2021-02-15 現在の最新バージョンは 12.4 で、なんと 11.9 GB。

インターネット接続環境によっては10分そこそこかかるので、しばらく待機。

Flutter SDK の配置

https://flutter.dev/docs/get-started/install/macos#get-sdk からSDKをダウンロードし、適切なディレクトリに配置。

私は ~/workspace/sdk/ 配下に展開物: flutter/ を配置してみました。

yourname@XXX flutter % pwd
/Users/yourname/workspace/sdk/flutter

このタイミングで、次にターミナルを起動したときに再度Flutterへのパスが通るように、下記のように ~/.bashrc (bash向け) もしくは ~/.zshrc (zsh向け) を配置。

yourname@XXX sdk % cat ~/.zshrc
export PATH="$PATH:/Users/yourname/workspace/sdk/flutter/bin"

flutter doctor の実行

実行すると、Flutterを実行するためにあと何をすればいいかを表示してくれます。

yourname@XXX ~ % flutter doctor
Downloading Dart SDK from Flutter engine 2f0af3715217a0c2ada72c717d4ed9178d68f6ed…
** Resuming transfer from byte position 14241792
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 159M 100 159M 0 0 17.8M 0 0:00:08 0:00:08 --:--:-- 24.1M

Bad state: Future already completed が出てしまった人は?

Building flutter tool...
Unhandled exception:
Bad state: Future already completed
#0      _AsyncCompleter.complete (dart:async/future_impl.dart:43:31)
#1      _NativeSocket.startConnect.<anonymous closure>.connectNext.<anonymous closure> (dart:io-patch/socket_patch.dart:682:23)
#2      _NativeSocket.issueWriteEvent.issue (dart:io-patch/socket_patch.dart:1102:14)
#3      _NativeSocket.issueWriteEvent (dart:io-patch/socket_patch.dart:1109:12)
#4      _NativeSocket.multiplex (dart:io-patch/socket_patch.dart:1130:11)
#5      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (9 tries left)

こう出てしまう人は、だいたいアンチウイルスソフトが原因です。

AVG AntiVirusを利用している人は下記のように一時的にファイル保護やネットワーク保護を無効にしてみましょう。

Avast Security を利用している人はここ。

うまく進んだときはこんな感じ

出力結果の中で × や ! になっているものを上から順に見ていきましょう。

後半

Android toolchain / Android Studio のインストール

https://developer.android.com/studio から Android Studio をインストールして起動すれば、いい感じに入れてくれます。

撮り忘れましたがこだわりがない人は Standard でインストールしてしまってOK。

Unable to install Intel® HAXM Your CPU does not support VT-x. というエラーが出ると思いますが、ひとまず先に進みましょう。

Xcode licenseへの同意

この時点で git clone … などを実行しようとすると「Xcode licenseに同意しなさい」と言われるはず。Enterキー押して、一通り読んで同意。

yourname@XXX workspace % git clone https://github.com/741g/android-emulator-m1-preview.git
You have not agreed to the Xcode license agreements. You must agree to both license agreements below in order to use Xcode.
Hit the Return key to view the license agreements at '/Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf'
...
Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command.

とのことなので sudo xcodebuild -license を実行。最後まで読み進めていくと

By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel]

と言われます。同意できるようであれば agree と入力。

Android Emulator Apple Silicon Preview のインストール

次に Unable to install Intel® HAXM Your CPU does not support VT-x.というのが出ると思います。確かにIntelではない。w

Android Studioの公式サイトに

https://androidstudio.googleblog.com/2020/12/android-emulator-apple-silicon-preview.html

M1 (Appleシリコン) 専用のエミュレーターが(Preview版ですが)ありますので、これを入れてみます。
Preview版でアップデートが早いので、GitHubのReleaseから良さげなもの(.dmg)を選んでインストールします。
私は Initial Preview v2 を選んでみました。

開発元を検証できないため〜と出たときは

お決まりの システム環境設定 – セキュリティとプライバシー – ダウンロードしたアプリケーションの実行許可 から「このまま開く」をクリック。

下記のようなエミュレーターが出ればOK!

それと、あくまでPreview版なので、既知の不具合は適宜 https://github.com/741g/android-emulator-m1-preview#known-issues で確認しましょう。

ここまでのおさらい

下記のようになっていれば想定通り。どんどんいきましょう。

Android licenses に同意

出力の案内どおり flutter doctor –android-licenses を実行。何個か聞かれますが読みつつ y を入力すればOK。

CocoaPods のインストール

sudo gem install cocoapods を実行。下記のようにすんなり通るはずです。Intel版Macbookで実施したときはこの辺りで詰まった気がしましたが。

Android Studio Flutter Plugin のインストール

Android Studio を起動し、画面左上の Android Studio – Preferences をクリック。

Plugins で Flutter と検索し、一番上に出てくる Flutter を選択しつつ Install をクリック。

Flutter 向けのプログラミング言語: Dart 用のプラグインも勝手に入ります。

で、Android Studio を再起動。

何故か Flutter plugin not installed; this adds Flutter specific functionality. となる件の対処

この時点できっと「いやぁプラグイン入れたんですけど…」となるはず。

困ったときは公式Githubのissue。https://github.com/flutter/flutter/issues/68429#issuecomment-740430602 を参照しましょう。

Flutter側で参照しているPluginのディレクトリがどうもAndroid Studioと合っていない様子。

ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1 を実行すればOK。

もう一度確認

ここまで来れば No issues found! になるはずです。

適当に Android Emulator 上にサンプルアプリをビルドしてみる

最後に何かしらのアプリを立ち上げて動作確認しておきましょう。

Android Studio に Flutter Plugin を入れると、Welcome to Android Studio 画面に Create New Flutter Plugin という項目が増えているはず。

これをクリックしてみると、Fluuterプロジェクトを作ることができます。とりあえず Next をクリックしつつ

Finish をクリック。

こんな感じでざっとコードが表示されると思います。

先程インストールした Android Emulator が動いていること、Android Studio側で認識できていることを確認しつつ、ウィンドウ左上の 三角ボタンをクリックしてアプリケーションをビルドしてみます。

Demo アプリが起動!お疲れさまでした!

コメント

タイトルとURLをコピーしました