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のシュミレーターが起動しました。

メインページ 私について - トフの記録