はじめに

Flutterの環境構築(Mac:Intel)をまとめたものになります。
2023年5月時点のものになります。
環境構築にあたり、誤りがございましたらご指摘いただけると幸いです。

1.Flutter SDKのインストール

(1)公式から最新のSDKをダウンロードする

お使いの機種に合わせて、IntelかApple Siliconか選択してください。

Appleシリコン搭載の場合
「この Mac について」に「チップ」という項目があり、チップの名前が表示されます。

Intelプロセッサ搭載の場合
「この Mac について」に「プロセッサ」という項目があり、Intel プロセッサの名前が表示されます。

「この Mac について」を開くには、Apple メニュー  >「この Mac について」の順に選択します。

(2)解凍したファイルを任意のディレクトリに配置します。

今回はホームディレクトリにSDK（flutter）を配置。

2.パスの設定

flutterコマンドを使用できるようにするため、解凍したファイルのbinフォルダまでpathを通します。

(1)pwdをコピーしておく

①ダウンロードしたSDKのbinディレクトリ（flutter/bin）を右クリック

②その状態でoptionキー押すと「コピー」が「”bin”のパス名をコピー」に変わるのでそれをクリック。

③一時的にメモしておく。

(2)ターミナル開く

①解凍したファイルのbinフォルダまでpathを通します。

zshの場合

echo export PATH="$PATH:****" >> ~/.zshrc

****は先程メモしておいたbinのパス名を入れる

今回はホームディレクトリのため以下のようになります。

echo export PATH="$PATH:/Users/****/flutter/bin" >> ~/.zshrc

bashの場合

上記のzshecの箇所をbash_profileに変更

②エンター押して何も変わってなければOK

③一度ターミナル終了する。

(3)一旦flutterの状態を確認する

flutterには環境構築に必要なものが入っているかを表示するコマンドが存在します。
ターミナルで　flutter doctorと入れると以下のようにチェック項目が出る。

問題が存在するときは[!]、[x]が表示されるので解消していきます。

3.Android Studioのセットアップ

(1)Android Studioのインストール

(2)Android Studioを開く

最初のダウンロードは時間かかります。辛抱強く。

(3)プラグインインストール

Pluginsから「flutter」と検索すると、Flutterプラグインが出てくるのでインストールします。
インストールしたらアプリを再起動

(4)Android toolchain について

①Android Studioの「More Actions」もしくは、添付画像の「・・・」からSDK Managerを開く。

②「SDK Tools」から「Android SDK Command-line Tools」にチェックを入れてApplyを押す。

確認画面が出ますがOKで。

(5)flutterの状態を確認する

Android licensesの項目が「✅」になっていると思います。

※もしまだ「×」であれば以下の可能性あるので試してください。

①Android licenses not accepted. To resolve this, run: flutter doctor —android-licenses

と表示されていれば、そのままflutter doctor --android-licenses
コマンドを実行すれば解決すると思います。
実行するとYES/NOで聞かれるので、全てYES

②もし、JDKが入っていないというようなエラーが出ていれば、「jdk oracle」みたいにググってJDKのインストールする。

※最新すぎるとFlutterとの相性によりエラーが生じるので、推奨はSE8
例：jdk-8u361-macosx-x64.dmgをダウンロード
https://www.oracle.com/jp/java/technologies/downloads/#java8-mac

4.Xcodeのセットアップ

(1)Apple StoreでXcodeインストール

「xcode」で検索すれば出てきます。
容量が大きいので時間かかります。辛抱強く。

(2)Xcodeを開く

とりあえず今は開くだけでOK。

(3)flutterの状態を確認する

「Xcode」の項目が「✅」になっていると思います。
なっていなかったらターミナルでflutter doctorで状態確認し、何が足りていないのか確認すること。

※もしまだ「×」であれば以下の可能性あるので試してください。

①Xcode installation is incomplete〜の場合

ターミナルでflutter doctorで状態確認すると、
Xcode installation is incomplete〜と表示されていれば、合わせて下記も表示されているかと思うので実行します。
sudo xcode-select —switch〜＊＊＊
sudo xcodebuild -runFirstLaunch

②Cocoapodsインストールされていないとエラーが出ている場合

ターミナルでflutter doctorで状態確認すると、
Cocoapodsインストールされていないとエラーが出ていたら、ターミナル上に、
To install: sudo gem install cocoapodsと表示されていると思うので、
sudo gem install cocoapodsを実行します。

5.VSCodeにFlutterをインストールする

VSCodeでFlutterを作業する場合はプラグイン必要なので、左メニューのextensionsを開いて「flutter」と検索してインストールする。

6.プロジェクトの作成

※以下一例です。

(1)プロジェクトの作成

作業ディレクトリに移動してflutter create プロジェクト名

flutter create my_app

上記コマンドでは作業ディレクトリにmy_appが作成されます。

(2)シミュレーターを起動します。

今回はターミナルで以下実行します。

open -a Simulator

Simulatorが起動したら、Mac画面上部のメニューバー内＞File＞New Simulator＞シミュレーターとして利用したい端末をクリック。

(3)プロジェクトに移動

コマンドで起動するにはFlutterプロジェクトに移動する必要があります。

cd my_app

(4)flutter起動

以下のコマンドで起動状態にあるデバイスで実行が行われます。

flutter run

お疲れ様でした！