【⚙️Flutter最小限環境構築ガイド】Mac × VSCode ではじめるiOSアプリ開発！

本記事はflutterをMacで使ってみたい方向けの環境構築手順を説明しています。

今回はiOSアプリ開発向けの環境構築です。
そのため、その他のAndroid Studioなどの余計に容量を圧迫させるもののインストールは省略しています。(というのも筆者のMacbookの容量がカツカツなので、、)

🧩 VSCode拡張機能のインストール

まずは Flutter 拡張機能をインストールしましょう！

1. VSCode 左側の「拡張機能（四角アイコン）」をクリック
2. 「flutter」と検索
3. 「Flutter」拡張機能をインストール（Dart拡張も一緒に入ります）

---

📦 Flutter SDKをダウンロード（VSCode経由）

1. ⌘ + ⇧ + P で コマンドパレットを開く

2. 「flutter」と入力

3. Flutter: New Project を選択
   

4. 下のような表示が出るので、Download SDK を選択！
   

🛠 Flutter SDKのパスを VSCode に通す

ダウンロードが終わったら再度：

1. ⌘ + ⇧ + P を押す
2. 「flutter」と入力し Flutter: New Project を選ぶ
3. 再び下記のような表示が出るので、Locate SDK を選択！
   
   先ほどダウンロードした flutter フォルダを選択（たいていフォルダ名が flutter です）

これで VSCode 側の設定は完了です🎉

🖥 Macに Flutter のパスを通す（ターミナル）

ターミナルを開いて、以下を実行
※ {Flutterのフォルダまでのパス} を実際のパスに置き換えてください

bash

echo 'export PATH="$PATH:$HOME/{Flutterのフォルダまでのパス}/bin"' >> ~/.zshrc
source ~/.zshrc

✅ 例：

bash

echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

✅ 動作確認
以下のコマンドを実行：

bash

flutter --version

出力例：

Flutter 3.32.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision be698c48a6 (7 days ago) • 2025-05-19 12:59:14 -0700
Engine • revision 1881800949 (7 days ago) • 2025-05-19 10:54:07 -0700
Tools • Dart 3.8.0 • DevTools 2.45.1

このように表示されればインストール完了です 🎉✨

---

📦 Xcodeのインストール(まだの方)

App storeからダウンロード

ダウンロード後にアプリを開くと下記のように出てきます。
使うのはiOSだけなので、iOS 18.5だけをダウンロードしましょう。
(predictive code completion modelも今回はVSCodeを使うのでインストールしませんでした)

そしてターミナルで下記を実行

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

xcodeのiphoneシミュレータ機能が必要なのでインストールしています。
Xcodeでコード編集などはせず、VSCodeで行います。

CocoaPodsのインストール

CocoaPods（ココアポッズ）は、iOSやmacOSアプリのライブラリ管理ツールです。簡単に言えば、Xcodeプロジェクトに外部ライブラリ（ex) Flutter ）を導入・管理するためのツールです。

インストールにはRuby version >= 3.1.0である必要があります。
ターミナルで、

ruby -v

として、3.1.0未満である場合は下記を実行してください。

# rbenvをインストール（まだなら）
brew install rbenv

# .zshrcなどにパスを通す（初回のみ）
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc

# Rubyの最新版をインストール（例: 3.3.0）
rbenv install 3.3.0

# デフォルトを変更
rbenv global 3.3.0

# バージョン確認（3.3.0 になっていればOK）
ruby -v

そして、下記を実行してcocoapodsをインストール

sudo gem install cocoapods

(パスワードの入力が求められます)

確認!flutter doctor🧑‍⚕️

ターミナルで👇を実行する

flutter doctor

出力が👇のような、Android以外全てOKだったら終了です!

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.32.0, on macOS 15.5 24F74 darwin-arm64, locale
    ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/to/macos-android-setup for detailed
      instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.100.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

📦 Flutter Projectの作成

1. ⌘ + ⇧ + P で コマンドパレットを開く
2. 「flutter」と入力
3. Flutter: New Project を選択
   
4. Applicationを選択

新しいプロジェクトが作成されます
main.dartを選択して、右上のデバックマークをクリックするとデモがスタートします✅