Mac環境にFlutterをインストールして開発環境を構築する方法を解説します。
はじめに
これからFlutterを使ってアプリ開発を始めたい方に向けて、Mac環境でのセットアップ手順をわかりやすくまとめました。Flutter SDKのインストールからXcodeの設定、iOSシミュレーターの準備まで、順を追って丁寧に解説していきます。
今回の解説では、AppleのMチップ（ArmベースCPU）を搭載したMacを使用するケースを想定しています。Intel Macとは一部手順が異なるため、Mチップ特有の注意点も含めてご紹介します。
動画解説版
「Command Line Tools for Xcode」のインストール
「Command Line Tools for Xcode」をインストールする手順は以下のとおりです。
① ターミナルを開き、以下のコマンドを実行します。
$ xcode-select --install
② 「xcode-select: note: install requested for command line developer tools」というメッセージとダイアログが表示されます。ダイアログの「インストール」ボタンを押します。
③ 同意事項のダイアログが表示されるため、内容を確認した上で「同意する」ボタンを押します。
④ インストールが完了すると以下ダイアログが表示されます。
Homebrewのインストール
Homebrew(読み方：ホームブルー)は、macOS、Linuxで動作するパッケージ管理システムの1つです。パッケージ管理システムとは、パッケージのインストール、更新作業等を効率的に一元的管理するものです。
Macでhomebrewをインストールする手順は以下のとおり。
① ターミナルを開いて、以下のコマンドを実行します。（Xcodeのコマンドラインツールをインストール）
xcode-select --install
② ターミナルで以下のコマンドを実行します。（Homebrew 本体をインストール）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
③ 「/Users/ユーザー名/」内にある.zshrcファイルに以下のパスを追加します。なお、「.zshrc」は隠しファイルですので、Finder上でショートカット（Command + Shift +「.」）を実行し、隠しファイルを表示すれば見つかります。もし見つからない場合は「.zshrc」ファイルを新規作成してその中に記述します。
eval "$(/opt/homebrew/bin/brew shellenv)"
④ 以下のコマンドを実行し、「.zshrc」ファイルの設定を即時反映させます。
source ~/.zshrc
⑤ これでインストール作業は終わりです。ターミナルを開き直して以下のコマンドを実行しエラーが出なければ成功です。
brew help
動画で見る
本ページの内容は以下動画で解説しています。
補足
「.zshrc」ファイルのことがよくわからないという方は、以下の記事をご参考ください。
HomebrewでGitをインストール
Gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムです。先程導入したHomebrewを使えば、簡単にMacへGitをインストールできます。
① Homebrewを使って、MacにGitをインストールするには以下のコマンドを実行します。
brew install git
② 以下のコマンドを実行し、Gitのバージョンが表示されたらインストール成功です。
git --version
動画で見る
本ページの内容は以下動画で解説しています。
Flutter SDK のインストール
① 公式ページ（https://docs.flutter.dev/install/manual）を開きます。
② 「macOS」 ボタンをクリックします。
③ 「Download the Flutter SDK bundle」 という見出しの少し下にある「flutter_macos_arm64_3.38.6-stable.zip」ボタンをクリックします。ZIP ファイルのダウンロードが開始されるので、終わるまで待ちます。
④ ダウンロードが完了したら、 zip ファイルを解凍し、flutter フォルダを任意の場所に配置します。
（例：ホームディレクトリ直下なら「/Users/ユーザー名/flutter」）
⑤ ~/.zshrcファイルに以下を追記します。（flutter/bin のPATHを追加）
export PATH="$PATH:[flutterフォルダが格納されているディレクトリ]/flutter/bin"
【例】
export PATH="$PATH:/Users/ユーザー名/flutter/bin"
⑥ ターミナル上で以下のコマンドを実行し、flutterのバージョンが表示されたらインストール成功です。
flutter --version
Xcode のインストール
iOS アプリを開発する場合、Xcode のインストールが必要です。
① Mac の App Store を開きます。
② 検索欄に「Xcode」と入力し、表示された Xcode を選択します。
③ 「入手」→「インストール」をクリックします。
※サイズが非常に大きいため、ダウンロードに時間がかかります。
④ インストール完了後、Xcode を起動します。
⑤ 初回起動時に追加コンポーネントのインストールを求められるので「Install」を選択します。
⑥ ライセンス同意画面が表示されたら「Agree」を選択します。
⑦ 以下のコマンドを実行し、Xcode のコマンドラインツールが正しく設定されているか確認します。
sudo xcode-select --switch /Applications/Xcode.app
⑧ iOS シミュレーターを使用する場合は、Xcode を開き「Window」→「Devices and Simulators」から確認できます。
Android Studio のインストール
続いて、「Android Studio」のインストールを行います。
① 公式ページ (https://developer.android.com/studio?hl=JA) を開きます。
② 「Android Studio ○○ をダウンロード」をクリックします。
③ 利用規約画面が出てくるので、下にある「上記の利用規約を読んだうえで利用規約に同意します。」にチェックを入れ、
その下の「ダウンロード」ボタンをクリックします。
④ ダウンロードした dmg ファイルを開き、Android Studio を Applications フォルダにドラッグします。
⑤ Applications フォルダから Android Studio を起動します。
⑥ 「Next」を選択します。
⑦ 「Standard」を選択し「Next」をクリックします。
⑧ 「Finish」を選択すると、必要なコンポーネントのインストールが始まります。
⑨ インストール完了後、Android SDK やエミュレーターの設定が自動で行われます。
⑩ 設定が完了したら、再度以下を実行して確認します。
flutter doctor
Android toolchain関連の設定作業
① Android Studioを起動します。
② 「More Actions」→ 「SDK Manager」をクリックします。
③ 左サイドメニューから「Languages & Frameworks」→「Android SDK」をクリックします。そして、「SDK Tools」タブをクリックし、「Android SDK Command-line Tools」にチェックを入れて「Apply」をクリックします。
④ 「Android SDK Command-line Tools」のダウンロードが開始されますので、完了したら「OK」をクリックして閉じます。
⑤ ターミナルを開き、以下のコマンドを実行します。
flutter doctor --android-licenses
⑥ 何度か質問されるので全て「y」を押して同意していき、完了します。
⑦ 「flutter doctor」を実行し、Android toolchain関連の設定が完了状態になっているか確認します。
Android StudioでFlutterプラグインをインストール
Android StudioでFlutterを用いてアプリを開発する場合、Flutterプラグインをインストールする必要があります。
インストール手順は以下のとおりです。
① Android Studioを起動します。
② 左メニューの「Plugins」を選択します。
③ 検索欄で「Flutter」と検索し、「Flutter」というプラグインの横にある「Install」ボタンをクリックします。
④ インストールが終わったらAndroid Studioを再起動します。
Android StudioでFlutterプロジェクトを作成
準備が整ったら、以下の手順でFlutterプロジェクトを作成し、デモアプリを実行してみましょう。
① Android Studioを起動します。
② Android Studio のメニューから 「New Flutter Project…」をクリックします。
③ 「Flutter」を選択します。
④ 「Flutter SDK path」にFlutter SDKのパス(環境変数のパスより1つ上)を入力します。
(例:「/Users/ユーザー名/flutter」)
④ 「Next」をクリックします。
⑤ 作成するプロジェクトの各種設定を入力し、「Finish」をクリックします。
| 設定項目 | 内容 |
|---|---|
| Project name | Flutter プロジェクト名 |
| Project location | Flutter プロジェクトの保存場所 |
| Description | Flutter プロジェクトの説明文 |
| Project type | Flutter プロジェクトの種類 |
| Organization | プロジェクト作成者のドメイン |
| Android language iOS language |
AndroidおよびiOS使用する言語 |
| Platforms | アプリ開発したいプラットフォームを指定 |
⑥ これで新規プロジェクトが作成されました。
作成されたプロジェクト内のソースコードは、デフォルトでデモアプリが記述されていますので、試しにシミュレータで動かしてみましょう。
⑦ Android Studio 画面右上の実行デバイスを指定するところから、「Open Android Emulator」をクリックします。
⑧ シミュレータが起動したら、Android Studio 画面右上の「▶︎」を押して実行します。
⑨ デモアプリが起動すれば、動作確認は完了です。
Androidエミュレータを入手してデバック
Android StudioでFlutterプロジェクトをデバックする際、Androidエミュレータ上で動作確認したい場合、以下の設定作業が必要となります。
① Android Studioを起動します。
② Android Studio のメニューから 「More Actions」 > 「Virtual Device Mangager」をクリックします。
③ 「Create virutal device」をクリックします。
④ 好きなデバイスを選択して「Next」をクリックします。
⑤ 好きなsystem imageの横にあるダウンロードアイコン(⇓)をクリックしてダウンロードし、「Next」→「Finish」をクリックしま
⑥ あとは、Flutterプロジェクトを開き、画面右上の実行デバイスを指定するところから、作成したデバイスを選択します。
⑦ シミュレータが起動したら、Android Studio 画面右上の「▶︎」を押して実行します。
Launching lib\main.dart on sdk gphone64 x86 64 in debug mode... Running Gradle task 'assembleDebug'...
The IDE has detected Microsoft Defender with Real-Time Protection enabled. It might severely degrade IDE performance. It is recommended to make sure the following paths are added to the Defender folder exclusion list: C:\Users\XXX\AppData\Local\Android\Sdk C:\Users\XXX\AppData\Local\Google\AndroidStudio2024.2 D:\sample1 If you previously excluded them either automatically or manually, please select "Ignore for this project". Note: running "Automatically" will ask for administrative privileges
関連コンテンツ
コメント