Macユーザー向けにVSCodeを使用してFlutterでアプリ開発をするための環境構築の仕方を画像を使いながら分かりやすく解説して行きます。
本記事ではFlutter SDKのインストールからVSCode(Visual Studio Code)を使用してFlutterアプリを起動させるまでの一通りの作業を行います。
Flutter+VSCodeの環境構築の流れ
VSCodeでFlutterアプリをiOS、Androidシミュレーターで起動するまでの流れは以下の通りです。
それでは順番に紹介していきます。
- Flutter SDKのインストール
- Xcodeのインストール
- CocoaPodsのインストール
- Android Studioのインストール
- VSCodeのインストール
- Flutterプロジェクトの作成
- iOSシミュレーターでアプリを起動
- Androidエミュレーターでアプリを起動
Flutter SDKのインストール
Flutter SDKをダウンロード
Flutter公式サイトの「Install」からmacOSを選択。

「Get the Flutter SDK」からIntel対応のFlutter SDKをダウンロードします。

Flutter SDKの解凍と配置
ターミナルを開いて次のコマンドを順に実行します。
3行目のコマンドはFlutter公式サイトで指示されているバージョン(下画像の赤矢印の部分)をコピペします。
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_3.13.0-stable.zip

ターミナルを使わず手動でSDKを配置も可能
Flutter SDKをターミナルを使用せず手動で配置することもできます。
手動の場合はダウンロードしたファイルを解凍し、ユーザーフォルダ直下にdevelopment
を作成し解凍したflutter
をドラッグ&ドロップします。

Flutter SDKのパスを通す
Flutter SDKをdevelopment
直下に配置したらパスを通す作業を行います。
ターミナルを開き次のコマンドを実行して使用しているシェルを確認します。
$ echo $SHELL
コマンドを実行して/bin/zsh
と返ってきたら「zsh」、/bin/bash
と返ってきたら「bash」となります。
シェルを確認したら、使用しているシェルに応じてターミナルで次のコマンドを実行します。
//zshの場合
$ vim .zshrc
//bashの場合
$ vim .bash_profile
コマンドを実行するとVimと呼ばれるエディタが起動されるので、キーボードの「i」をクリックしてINSERTモードに切り替えFlutter SDKのパスを入力します。
本記事と同じようにユーザーフォルダ直下にdevelopment
を作成した方は次のコマンドの【ユーザーフォルダ】の箇所にMacのユーザー名を入力します。
$ export PATH="$PATH:/Users/【ユーザーフォルダ】/development/flutter/bin"

パスの入力が完了したらターミナルで:wq
を入力&実行してVimエディタを終了しターミナルを再起動します。
ターミナルを再起動したら次のコマンドを実行してパスが通っているか確認します。パスが通っている場合は先ほどVimエディタで入力したパスが返ってきます。
$ which flutter
これでFlutter SDKのパスを通す作業は完了です。
Xcodeのインストール
Appleストアで「Xcode」と検索しアプリをダウンロードします。

ダウンロードが完了したら次のコマンドを順に実行します。
3行目のコマンドを実行すると利用規約が表示されるので「スペース」を押しながら最後まで読み進め最後に「agree」とコマンドを入力し実行します。
$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -license
Xcodeアプリを開いて利用規約に同意して、次の画面が表示されればインストール完了です。

最後にターミナルで次のコマンドを実行してiOSシミュレーターを起動できるか確認しておきましょう。
$ open -a Simulator
問題がなければ次のようなiOSシミュレーターが起動されます。

これでXcodeでの作業は完了です。
CocoaPodsのインストール
Flutterアプリの開発をしていく上で様々なプラグインを使用するためにCocoaPodsが必要となるのでインストールしておきます。
ターミナルを開いて次のコマンドを実行します。しばらくするとCocoaPodsがインストールされます。
//intelの場合
$ sudo gem install cocoapods
Android Studioのインストール
Android Studio公式サイトを開き「Download Android Studio」をクリック。

利用規約にチェックを入れて、使用しているMacのAndroid Studioをダウンロードします。

ダウンロードしたファイルを開き「Android Studio」を「Applications」にドラッグ&ドロップします。
ダウンロードが完了したら「Applications」から「Android Studio」を起動し、案内に従ってインストールしてます。

Android Studioのインストールが完了したらホーム画面の左サイドバーにある「Plugins」をクリック。

検索ボックスから「Flutter」、「Dart」を検索しインストールします。


インストールが完了したらAndroid Studioを再起動します。
すると「New Flutter Project」が追加されています。

「More Actions」から「SDK Manager」を開きます。

「Android SDK」>「SDK Tools」を選択します。
そして「Android SDK Build-Tools」、「Android SDK Command-line Tools (latest)」、「Android Emulator」、「Android SDK Platform-Tools」の4つにチェックが入っているのを確認し「OK」をクリック。

利用規約に同意するか聞かれるので同意してインストールします。
これでAndroid Studioの作業は完了です。
VSCodeのインストール
VSCode公式サイトからmacOS対応のVSCodeをダウンロードします。

ダウンロードしたファイルを解凍しVSCode起動させます。
VSCodeを起動させたら画面左のリストにある「Extenstions」を選択し、「Flutter」と「Dart」プラグインをインストールします。
プラグインのインストールが完了すると下画像のように「アンインストール」と表示されます。


プラグインをインストールしたらVSCodeを再起動します。
これでVSCodeのセットアップは完了です。
Flutterのプロジェクトを作成
VSCodeを開き「Manage」から「Command Palette」を開きます。
またはショートカットキーShift
+Command
+P
を使って「Command Palette」を開くことも可能です。

「Command Palette」を開いたら「Flutter」と入力し「Flutter New Project」を選択します。

Flutterプロジェクト名を入力して「Enter」をクリック。

するとFlutterプロジェクトが作成されます。

iOSシミュレーターでアプリを起動
VSCodeの画面右下にあるデバイスを選択します。

画面中央上で起動できるデバイス(シミュレーター)が一覧表示さるので「Start iOS Simulator」を選択。

しばらくするとiOSシミュレーターが起動されます。

Flutterアプリを起動させるには画面右上にある「Start Debugging」を選択。

しばらくするとiOSシミュレーターでFlutterアプリが起動されます。

Androidエミュレーターでアプリを起動
VSCodeの画面右下にあるデバイスを選択します。

すると画面中央上で起動できるデバイス(シミュレーター)が一覧表示さるので、好みのAndroidエミュレーターを選択。

しばらくするとAndroidエミュレーターが起動されます。

続いて起動させたAndroidエミュレーターでFlutterアプリを起動させるために画面右上にある「Start Debugging」を選択。

Flutterアプリを起動させるには画面右上にある「Start Debugging」を選択。

これでVSCodeによるFlutter環境構築は完了です。
Android Studioでアプリを開発したい方はこちら
Android StudioでFlutterアプリ開発をしたい方の環境構築はこちらで紹介しています。
