M1 Macにまっさらの状態からFlutter開発環境をセットアップする手順のメモです。
IDE(統合開発環境)/エディタ/ブラウザのインストール
まずはFlutter開発用の、IDE(統合開発環境)/エディタ/Chromeブラウザ、を以下のリンク先からインストールします。
- Xcode(Mac App Store)
- Android Studio(公式ダウンロードページ)
※ダウンロード時の規約への同意画面では必ず【Mac with Apple chip】を選択してください。(【Mac with Intel chip】ではありません) - VSCode(公式ダウンロードページ)
※【↓Mac】ボタンでダウンロードされるのはUniversal版です。そのままでも良いですが、M1 Macならその下にある【.zip [Apple Silicon]】でOKです。 - Google Chrome(公式ダウンロードページ)
初回起動時に初期設定や追加インストールが走る場合があるため、インストール後、それぞれ1回起動してください。
Flutter SDKのインストール
次にFlutter SDKをインストールしていきます。
Flutter SDKのダウンロード
ダウンロード後、解凍したflutterフォルダを任意の場所に配置してください。(ここで配置した場所にパスを通していきます)
PATHを通す
Terminalを起動して、vim(エディタ)からPATHを追加します。(シェルはzsh)
vim .zshrc
[i]を押してINSERTモードにしてから、以下の行を追加します。
export PATH="$PATH:[ここにFlutterのPATH]/bin"
# 例:user以下にDeveloperフォルダを作成してflutterフォルダを配置した場合
export PATH="$PATH:/Users/cbtdev/Developer/flutter/bin"
[esc]でINSERTモードを解除し、[:wq!]と入力してvimを終了します。
PATHが通っているか以下のコマンドで確認します。
which flutter
# /Users/cbtdev/Developer/flutter/bin/flutter
# のようにパスが表示されればOK
インストール状況の確認
以下のコマンドでFlutter SDKのインストール状況を確認します。
flutter doctor

❌が3個ほど出ていますので、これらを解消していきます。
cmd-tools component is missing
Preferencesの[SDK Tools]で以下の項目にチェックを入れてコマンドツールをインストールします。
✅ Android SDK Command-line Tools (latest)

Android license status unknown.
実行すべきコマンドが表示されているので、そのコマンドをそのまま実行します。
flutter doctor --android-licenses
CocoaPods not installed.
CocoaPodsがインストールされていないので、以下のコマンドでインストールします。
sudo gem install cocoapods
再度確認
flutter doctor

全て解消されました!
Flutterプラグインをインストール
最後に、IDE/エディタに Flutterプラグインをインストールします。
- AndroidStudio

- VSCode

以上で完了です。
コメント