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

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

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

:::





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

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

![Flutter 拡張機能](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/11f3ac84-5d97-4583-b830-c2d3e024efff.png)

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

---

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

1. `⌘ + ⇧ + P` で **コマンドパレット**を開く  
2. 「flutter」と入力  
3. `Flutter: New Project` を選択
![スクリーンショット 2025-05-26 23.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/91baab0f-aa23-46ef-95f5-7fcaec7d3a09.png)
  
4. 下のような表示が出るので、**Download SDK** を選択！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/724165d0-c4cc-4587-b90c-4fdb44b5b5ff.png)
# 🛠 Flutter SDKのパスを VSCode に通す
ダウンロードが終わったら再度：
1. ⌘ + ⇧ + P を押す
2. 「flutter」と入力し Flutter: New Project を選ぶ
3. 再び下記のような表示が出るので、Locate SDK を選択！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/724165d0-c4cc-4587-b90c-4fdb44b5b5ff.png)
先ほどダウンロードした 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からダウンロード

https://apps.apple.com/jp/app/xcode/id497799835?mt=12

ダウンロード後にアプリを開くと下記のように出てきます。
使うのはiOSだけなので、iOS 18.5だけをダウンロードしましょう。
(predictive code completion modelも今回はVSCodeを使うのでインストールしませんでした)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/2c2af580-eb09-42b7-a81c-965ae236bad8.png)


そしてターミナルで下記を実行
```
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```
:::note info
xcodeのiphoneシミュレータ機能が必要なのでインストールしています。
Xcodeでコード編集などはせず、VSCodeで行います。
:::

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

:::note info
インストールには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` を選択
![スクリーンショット 2025-05-26 23.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/91baab0f-aa23-46ef-95f5-7fcaec7d3a09.png)
4. ```Application```を選択

新しいプロジェクトが作成されます
main.dartを選択して、右上のデバックマークをクリックするとデモがスタートします✅
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/2b7490e0-2dcc-4a4b-9800-160c5d22eede.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3607699/593a6cef-aac7-454b-aee9-8b7b9e724e18.png)