MacでFlutterの開発環境を構築する｜VS CodeとChromeで最初のアプリを動かす
MacでFlutterを動かし、画面の文字を変えるまで
Flutterの学習を始めるなら、最初に「コードを書き、アプリを起動し、変更した結果を見る」環境を整えましょう。この記事では、MacにFlutterとVS Codeを用意し、Chromeでサンプルアプリを動かすところまで説明します。
最初の実行先にChromeを使うと、スマートフォンの接続や仮想端末の設定を後に回せます。画面を作る基本を試したあとで、Android・iOS向けの開発環境を追加する流れです。
3つ確認できれば、学習を始められる
Chromeにサンプルアプリの画面が表示される。
「＋」ボタンを押すと、画面の数値が増える。
コード内の文字列を変えると、画面のタイトルも変わる。
操作例はmacOS向けです。2026年9月20日にApple Silicon搭載Mac、macOS 27.0、Flutter 3.47.5 stable／Dart 3.13.4、VS Code 1.138.0、Chrome 153で確認しました。2026年11月7日時点のstableはFlutter 3.47.9／Dart 3.13.7、VS Codeの安定版は1.145.2で、この記事の手順は同じです。Flutterの学習順を先に把握したい場合は、Flutter学習ロードマップも参照してください。
1. VS Code・Chrome・Gitを用意する
今回使う道具には、それぞれ役割があります。VS Codeはコードを書くアプリ、Flutter SDKはアプリを作成・実行する開発ツール一式、Chromeは作ったアプリの実行先です。SDKには、Flutterで使うプログラミング言語Dartの開発ツールも含まれます。
まずはVS CodeのmacOS向け手順に沿ってVS Codeをインストールし、アプリケーションフォルダへ移します。ChromeもGoogleの配布ページから導入し、一度起動できることを確認しておきましょう。
ターミナルでGitを確認する
Gitは、Flutter SDKの取得に使うツールです。MacのSpotlightを⌘＋スペースで開き、「ターミナル」を検索して起動します。次の1行を貼り付け、Returnキーで実行してください。
git --versiongit versionに続く番号が表示されれば、Gitを使えます。インストールを求める画面が出た場合は案内に従います。ツールが見つからない場合は、次のコマンドでAppleのCommand Line Toolsをインストールします。
xcode-select --installCommand Line Toolsは、Gitなどをまとめた開発用のツールです。インストール完了後にgit --versionをもう一度実行しましょう。Xcode本体をすでに導入しているMacでは、Gitが使えることを確認して次へ進めます。前提ツールの詳細はFlutter公式のインストール手順で確認できます。
なお、MacのCPUはAppleメニューの「このMacについて」で確認できます。Apple SiliconはMシリーズのチップです。Intel搭載Macについては、Flutter公式がIntel Mac対応を段階的に終了する計画を公開しています。Flutter 3.47では、Intel Macでビルドすると、将来のバージョンで対応が終わることを知らせる警告が表示されます。3.50（2026年11月7日時点では未公開）では、Xcode 27以降でmacOSアプリをビルドするときにApple Silicon専用のビルドが既定になり、2027年春にはIntel Macでの開発サポートを終了する予定です。Intel Macで始める場合は、導入前に上記の公式手順で対応するSDKを確認し、2027年春以降は最新のFlutterでの開発にApple Silicon搭載Macが必要になる前提で進めてください。
2. VS CodeからFlutter SDKをインストールする
VS CodeにFlutter拡張機能を追加すると、Flutterのプロジェクト作成や実行をエディターから操作できます。VS Code左側の拡張機能アイコンを開き、「Flutter」を検索して、提供元がDart Codeの拡張機能をインストールしてください。Dart拡張機能も一緒に導入されます。公式のVS Code設定ガイドから配布ページを開くこともできます。
続いてFlutter SDKを取得します。⌘＋Shift＋Pでコマンドパレットを開きましょう。これは、VS Codeの操作を名前で検索して実行する入力欄です。
Flutter: New Projectを検索して選びます。- SDKの場所を聞かれたら、Download SDKを選びます。
- 保存先の親フォルダを選び、Clone Flutterで取得を始めます。例として、ホームフォルダ内に
developフォルダを作って選択します。 - 取得後に表示されるAdd SDK to PATHを選びます。
- 開いているターミナルを閉じて開き直し、VS Codeも再起動します。
PATHは、flutterなどのコマンドを入力したときに、Macが実行ファイルを探す場所の設定です。上の操作でFlutter SDKのbinフォルダが登録され、ターミナルからFlutterを呼び出せるようになります。画面の名称はFlutter公式のクイックスタートに対応しています。
すでにSDKが見つかり、プロジェクトの種類を選ぶ画面まで進んだ場合は、SDKの再ダウンロードを省けます。いったんEscキーで操作を終え、次の診断で使われているSDKを確認してください。
~/develop/flutter/
複数のアプリで共通して使う開発ツール。学習用のコードは「自分のアプリ」側で編集します。
~/develop/flutter_projects/flutter_first_app/
アプリのコードや設定をまとめたプロジェクト。新しいアプリを作るたびに増やします。
保存場所の一例です。~は自分のホームフォルダを表します。SDKを別の場所へ置いた場合は、以降のパスを実際の保存場所に読み替えてください。
3. flutter doctorで、Chromeに必要な準備を確認する
開き直したターミナルで、次のコマンドを1行ずつ実行します。flutter --versionはバージョン、flutter doctorは開発環境の不足、flutter devicesはアプリを動かせる実行先を調べます。
flutter --version
flutter doctor
flutter devices初回は追加ファイルの取得に時間がかかることがあります。処理が終わったら、doctorのFlutterとChromeの項目を確認し、devicesにChrome (web)があるかを見てください。Web向けの公式設定ガイドでも、Chromeの認識を確認してから実行へ進みます。
今回見る項目と、後で整える項目
SDKやChromeの検出、必要なファイルの取得に関する問題を解消します。flutter devicesにChromeが出れば、今回の実行先を選べます。
Android向けのツールやXcodeが未導入なら、その項目に警告が出ます。Chromeでの学習を進めたあと、Android・iOSで動かす段階で準備します。
警告の意味が分からない場合は、flutter doctor -vで説明を詳しく表示できます。command not found: flutterが出る場合は、このあとにあるPATHの確認手順へ進んでください。
4. サンプルアプリを作り、Chromeで動かす
Applicationテンプレートからプロジェクトを作る
プロジェクトは、1つのアプリを作るためのコードや設定のまとまりです。ここでは、ボタンを押すと数値が増えるサンプルを使います。最初からすべてのコードを理解する必要はなく、まず実行と編集の流れを確かめましょう。
- VS Codeで⌘＋Shift＋Pを押し、
Flutter: New Projectを選びます。 - 種類はApplicationを選びます。
- プロジェクトの親フォルダとして、ホームフォルダの
develop内にflutter_projectsを作成して選びます。 - プロジェクト名に
flutter_first_appと入力します。名前には英小文字とアンダースコアを使います。 - 作成処理が終わったら、左側のファイル一覧から
lib/main.dartを開きます。
フォルダを信頼するか聞かれた場合は、今回自分で生成したプロジェクトのパスであることを確認して進めます。VS Codeのファイル一覧にlibとpubspec.yamlがあれば、アプリのフォルダを開けています。pubspec.yamlは、アプリ名や利用するパッケージなどを管理する設定ファイルです。
実行先をChromeにして起動する
コマンドパレットでFlutter: Select Deviceを実行し、Chromeを選びます。続いてメニューのRun → Start Debuggingを選ぶと、アプリの作成処理が始まり、新しいChromeのウィンドウで画面が開きます。ショートカットはF5です。Macのキー設定によってはFnキーも押します。VS Codeでの実行手順も参照できます。
画面が開いたら、右下の「＋」ボタンを押してください。中央の数値が0から1へ増えれば、表示だけでなくボタンの処理も動いています。
画面上部のタイトルを書き換える
アプリを起動したまま、VS Codeでlib/main.dartを編集します。MyAppの中にある、home:で始まる次の行を探してください。
home: const MyHomePage(title: 'Flutter Demo Home Page'),引用符の中だけを変更します。
home: const MyHomePage(title: 'はじめてのFlutter'),ファイルには別のtitle:もあります。今回は、MyHomePageへ渡している文字列を編集します。この文字が画面上部のバーに表示されます。
⌘＋Sで保存し、デバッグ用ツールバーのHot Reloadを実行してください。ホットリロードは、起動中のアプリへコードの変更を反映する機能です。保存時に自動反映される設定なら、保存だけでタイトルが変わります。仕組みや適用できる変更の範囲は公式のホットリロード解説にまとまっています。
変化が出ないときは、保存したファイルとエラー表示を確認します。ホットリロードで反映できない変更には、アプリを再起動するHot Restartを使います。Hot RestartやChromeの再読み込みを行うと、今回のサンプルのカウンターは0に戻ります。
実行を終えるときは、VS Codeのデバッグ用ツールバーで停止ボタンを押します。これで「起動する → 操作する → コードを変える → 結果を見る」という、今後の学習で繰り返す操作を一通り試せました。
5. 起動できないときは、表示された症状から確認する
flutterコマンドが見つからない、別のバージョンが出る
まずターミナルとVS Codeを開き直します。それでもflutterが見つからない場合は、SDK内にbin/flutterがあるかを確認し、そのbinフォルダをPATHへ登録します。
macOS標準のzshを使い、SDKを~/develop/flutterへ置いた場合は、ホームフォルダの.zprofileへ設定を追加します。まずターミナルで次を実行してください。ファイルがなければ作成され、すでにある場合は内容がそのまま残ります。
touch ~/.zprofile続いてVS Codeの「ファイルを開く」画面で⌘＋Shift＋Gを押し、~/.zprofileを指定して開きます。既存の内容を残して、次の行を末尾へ追加してください。
export PATH="$HOME/develop/flutter/bin:$PATH"⌘＋Sで保存し、ターミナルとVS Codeを開き直してください。保存先やシェルが異なる場合は、公式のPATH設定で自分の環境に合う手順を確認します。
Flutterを複数の場所に入れたMacでは、意図したSDKが選ばれているかも確認します。
which flutter
flutter --version
flutter doctor -vwhich flutterの結果と、doctor -vに表示されるSDKの場所を見比べてください。今回の検証でも、既存SDKがPATHで先に選ばれた状態では警告が出て、検証用SDKのbinを先頭に指定すると解消しました。
Chromeが実行先に出てこない
Chromeがアプリケーションフォルダにあり、単体で起動できるかを確かめます。そのあとVS Codeを再起動し、flutter devicesを実行してください。Chromeの項目に問題が残る場合は、flutter doctor -vの説明とWeb向け設定を照合します。
Flutterの操作が出ない、pubspec.yamlが見つからない
VS Codeで、pubspec.yamlを含むflutter_first_appフォルダを開き直してください。親のflutter_projectsや、ファイル1枚だけを開いていると、対象プロジェクトを認識できないことがあります。Flutter拡張機能が有効か、lib/main.dartを開いているかも確認します。
エディターの実行操作で止まる場合は、VS CodeのTerminal → New Terminalを開き、現在の場所がflutter_first_appであることを確かめて、次を実行するとエラーの詳細を追えます。
flutter run -d chromeこのコマンドで起動した場合は、実行中のターミナルでrを押すとホットリロード、RでHot Restart、qで終了できます。エラーがコード内の行を指している場合は、最初のエラーメッセージを読み、引用符やカンマの不足、余分な文字がないかを確認しましょう。
6. Android・iOSで動かすための準備を追加する
Chromeで基本操作を試せたら、開発したいOSの道具を追加します。Flutter SDKとDartのコードは引き続き使い、Android・iOS固有のビルドや端末実行に必要なツールをそろえます。
Androidで実行する
Android Studioを入れ、SDK ManagerでAndroid SDKと必要なツールを準備します。実行先にはAndroid Emulatorで動く仮想端末か、開発用に設定した実機を使います。
ライセンスはflutter doctor --android-licensesで内容を確認して対応します。仮想端末を起動したら、flutter devicesで認識を確認します。
iOSで実行する
Xcode本体をインストールし、初回起動時の設定やiOS用の実行環境を準備します。シミュレーターなら、Mac上でiPhoneなどの画面を確認できます。
ネイティブ機能を使うプラグインに備え、公式手順でCocoaPodsの準備も確認します。Xcode 27では、シミュレーターを扱うアプリの名称がDevice Hubに変わっています。
上のリンクでは、必要なSDKやXcodeの設定を実行先ごとに確認できます。スマートフォン固有の機能を使う段階では、対象OSのシミュレーターや実機でも動作を確かめながら進めましょう。
次はDartの基礎と、画面を作るWidgetへ進む
サンプルが動き、タイトルを変更できたら、環境構築の次はコードを読む練習です。まずDartの変数・型・関数を学び、そのあとに画面の部品を表すWidgetへ進むと、main.dartの役割を少しずつ理解できます。
学習ロードマップの「Dart」で学ぶ順序を確認し、調べ物にはFlutter開発の参考サイト集を使ってください。今回作ったflutter_first_appは、そのままコードの変更を試す練習用プロジェクトとして使えます。
複数人で開発する場合は、FlutterのバージョンやVS Codeの設定を共有しておくと、参加時の準備を進めやすくなります。具体的な構成と設定例はFlutterのチーム開発を始める準備で解説します。