MacBook Air M1でFlutterを使えるようにした記録と解説
この記事はFlutterを使うために私が行ったことの記録と解説です。 MacBook Air M1 使用者向けです。
Flutterの公式サイトに行きます。
Get Started → macOS と進みます。
Appleシリコンのパソコンの場合はロゼッタをインストールするようにと書いてあるのでそこにあるコマンドをコピーしてターミナルに貼り付けてエンターを押します。
インストールに成功するとターミナルには以下のような表示があります。
Install of Rosetta 2 finished successfully
FlutterのサイトからAppleシリコン用のSDKのzipファイルをダウンロードします。
Flutterのフォルダはどこにおいても(大事そうなファイル付近はやめた方が良いと思いますが)良いので、私はFlutterのサイトでも例として挙げられているように ホームディレクトリにdevelopフォルダを作成し、その中にダウンロードしたフォルダを置きました。Flutterのサイトではunzipするためのコマンドも書いてありますが、ダウンロードしたフォルダは既に解凍済みだった(safariの機能?)のでそのまま移動させました。
よくわからない人はターミナルを開いて
cd ~ mkdir development
を1行ずつ実行した後、新しくできたdevelopmentフォルダにダウンロードしたflutterフォルダを移動させてください。
次に、パソコンにflutterの存在を教えます。 教えるためにはとあるファイルにさっきダウンロードしたflutterの位置を教える必要があります。
ターミナルを使います。 ターミナルで
echo $SHELL
と入力してください。 MacBook Air M1 の方は /bin/zsh と出力されると思います。 その場合
cd ~
とターミナルに入力し、その後一度
pwd
と入力し、表示される内容を確認します。1つ次で使います。 その後
emacs .zshrc
と入力してください。 見慣れないテキストエディタが開かれると思います。 そこにflutterの位置を書きます。 どこでも良いのですが私は最後の方に
#Flutter export PATH="$PATH:/Users/<みなさんのユーザーネーム>/development/flutter/bin
と書きました。この最後から2番目のflutterがさっきダウンロードしたflutterフォルダの場所を指します。 みなさんは<みなさんのユーザーネーム>あたりをpwdで確認したものと一致する感じに読み替えて入力してください。 そしたらこのテキストエディタを閉じます。(ちなみにこれはemacsというエディタです) 方法はcontrol + Cを押してその後control + X を押します。 すると青い(多分)文字で保存するか聞かれるのでyを押します。(yesのyです) 次に今設定したことを反映させるために以下のように入力します。(再読み込みみたいなものです)
source $HOME/.zshrc
次に
which flutter
と入力し
/Users/<みなさんのユーザーネーム>/development/flutter/bin/flutter
と出力されたら成功です。
flutter not found
の場合は何かしらで間違ってしまっています。
次に
flutter doctor -v
と入力します。 そうすると足りないものを教えてくれます。 それらをそこに英語でかかれている指示に従いインストールします。
私の場合はまずはじめにAndroid Studioをインストールすることにしました。
Download Android Studio & App Tools - Android Developers
同意してダウンロードします。 そしてAndroid Studioを起動、 Nextで進み、Standardを選択し、いろいろ同意してダウンロードします。 ダウンロードし終わったらまたターミナルで
flutter doctor -v
と入力し実行します。 するとAndroid Studioのコマンドラインツールがないと言われました。 そこでまたAndroid Studio を開き、projects → More Actions → SDK Manager →SDK Tools そこにある Android SDK Commandl-ine ToolsをチェックしOK、同意しダウンロードします。 再度
flutter doctor -v
ライセンスが〜と言われるので
flutter doctor --android-licenses
同意してないライセンスがあると言われるので全部y
flutter doctor -v
で確認するとAndroid StudioはひとまずOKそうです。 次にXcodeです。 私は以前にインストールしていたので言われた通りに
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch
を入力しました。 再度
flutter doctor -v
するとココアポッドがないと言われたのでインストールします。 ここにインストール方法が書かれています。
CocoaPods Guides - Getting Started
初めに
sudo gem install cocoapods
次に、と思ったらこれだけでした。 再度
flutter doctor -v
をすると No issues found! 無事に終わりました。これでFlutterの環境構築は一通りOKだと思います。このブログを書きながらのため長かったです。 また、英語ではありますがdoctorに表示されている指示は親切でした。
おまけ ターミナルに以下のように入力してください。
open -a Simulator
私の場合はこのようなiPhone8のシュミレーターが起動しました。