【Flutter】開発環境のセットアップ手順(M1 Mac編)

Flutter

M1 Macにまっさらの状態からFlutter開発環境をセットアップする手順のメモです。

スポンサーリンク

IDE(統合開発環境)/エディタ/ブラウザのインストール

まずはFlutter開発用の、IDE(統合開発環境)/エディタ/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
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

全て解消されました!

M1 Mac環境でのセットアップ中に問題があった場合、以下の記事が参考になるかもしれません、と公式に記載がありますので、こちらに記載のコマンドを試してみると良いでしょう。

>> Developing with Flutter on Apple Silicon(Flutter公式Wiki)

Flutterプラグインをインストール

最後に、IDE/エディタに Flutterプラグインをインストールします。

  • AndroidStudio
  • VSCode
1200

以上で完了です。

コメント

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