![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_31-1-1024x640.png)
Mac(Intel CPU)に、Flutter3.0をインストール。Android StudioとXcodeでの環境構築の記録です。
ほぼ、【2022年度】MacでFlutter開発環境構築 (M1 Mac/Android Studio対応) の内容を参考にさせていただきました。 MacのCPUがIntelの違いくらいです。
Macの環境
- macOS Monterey バージョン 12.3.1
- MacBook Air (Retina, 13-inch, 2019)
- メモリ 8GB
Flutte3.0のインストール
公式サイトより flutter_macos_3.0.0-stable.zip をダウンロードします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_00-1024x523.jpg)
flutter_macos_3.0.0-stable.zip を解凍して、その中にある「flutter」を任意のフォルダに配置します。 「flutter」 内の「bin」にパスを通します。
//zshを使っているので
$ vim ~/.zshrc
//起動したvimで、下記を追記
$ export PATH="$PATH:$HOME/Developer/flutter/bin"
//保存して終了
$ :wq
flutter doctorで環境構築が出来ているかの確認
ターミナルにて、下記のコマンドで、Flutterの環境構築が出来ているかを確認します。
> flutter docker
WindowsでのFlutterの環境構築では、ここで結構、手間取りましたが、Macの場合は、すんなり確認OKが出来ました。
Android Studio のインストール
公式サイトより、 android-studio-2021.2.1.14-mac.dmg をダウンロードします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/52cdbfb3d56d1e45cd91123760354a55.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/15dbaa61349876a1e7c583f942f01d47.png)
android-studio-2021.2.1.14-mac.dmg をダブルクリックして、イメージを作成します。 android-studio のアプリをアプリケーションフォルダにインストールします。
Android Studioのセットアップのウィザードがはじまります。初めての利用なので、インポートする設定はありません。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_04.jpg)
「Next」をクリック。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_05-1024x770.jpg)
Googleに情報を送信するかどうかは、お好みで。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_06-1024x552.jpg)
Install Type に「Standard」を選択。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_07-1024x766.jpg)
Select UI Themeで、お好みのUIを選択。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_08-1024x766.jpg)
インストールする内容を確認して。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_09-1024x768.jpg)
各種ライセンスの承認をします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_10-1024x766.jpg)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_11-1024x771.jpg)
インストール開始。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_12-1024x766.jpg)
インストール完了。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_13-1024x771.jpg)
インストール後、 Android Studio が起動します。
Android Studio の設定
Android Studio の設定をします。Plunginの設定をします。
FlutterのPluginをインストールします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_14-1024x768.jpg)
Flutterのプラグインをインストール。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_16-1024x768.jpg)
同時にDartのプラグインもインストールされます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_17-1024x768.jpg)
Xcodeのインストール
Xcodeは既にインストールしていました。但し、バージョンが古かったので、最新にアップデートして起動しておきます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_19-1024x711.jpg)
Flutterプロジェクトの作成
Android Studioのメインメニューより「New Flutter Project」をクリックします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_18-1024x766.jpg)
Flutter SDKのパスを指定します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_24-1-1024x939.jpg)
プロジェクトの情報を設定します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_25-1024x894.jpg)
プロジェクトが起動します。Device Selectorから「Open iOS Simulator」を選びます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_26-1024x614.jpg)
iOS Simulator が起動しました。Flutter プロジェクトを起動します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_27-1024x640.jpg)
デフォルトのサンプルアプリが起動しました。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_28-1024x640.jpg)
アプリは正常に動作しているようです。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_29-1024x640.jpg)
ソースの文字列を変更して保存すると、ホットリロードにて、プレビュー画面に反映されます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/Flutter3_Mac_intel_30-1024x640.jpg)