Flutterのチーム開発を始める準備｜VS Codeの設定共有とSDKのバージョン管理

別のメンバーも起動できるFlutterプロジェクトへ

自分のMacでアプリが動いたら、次は「別のメンバーがプロジェクトを受け取ったとき、同じ手順で開発を始められるか」を考えましょう。Flutterのバージョンやコードの整形方法を決めておくと、環境の違いによるつまずきや、変更していない箇所の整形差分を減らせます。

この記事では、小規模なチームで使える構成例として、Flutterのバージョンを管理するFVM、VS Codeの共有設定、Gitで管理するファイル、参加者向けREADMEを用意します。MacでFlutterアプリを起動でき、Gitの基本操作を使えることを前提に、Chromeで動くサンプルを扱います。最初の準備はmacOS向けのFlutter環境構築記事を参照してください。

Gitで共有する

Flutterのバージョン指定、VS Codeの共通設定、推奨拡張機能、依存パッケージの記録、準備手順。

各自のMacに用意する

SDKと拡張機能の本体、ダウンロードしたパッケージ、ビルド結果。テーマや文字サイズも各自で選べます。

共有設定を置くファイルの構成

作業する場所は、pubspec.yamlがあるアプリのルートフォルダです。以降はフォルダ名をteam_appとします。既存のアプリで試す場合は、自分のフォルダ名に読み替えてください。

team_app/
├── .fvmrc
├── .gitignore
├── .vscode/
│   ├── settings.json
│   └── extensions.json
├── analysis_options.yaml
├── pubspec.yaml
├── pubspec.lock
├── README.md
├── lib/
└── test/

.vscode/settings.jsonは、そのフォルダをVS Codeで開いたときに使う設定です。同じ設定項目がユーザー設定にもある場合、適用範囲に応じてプロジェクト側の設定が優先されます。共有ファイルにはDartの整形など開発に必要な項目を置き、見た目の好みは各自のユーザー設定へ残しましょう。VS Codeのユーザー設定とワークスペース設定で、保存場所と適用範囲を確認できます。

FVMでFlutter SDKのバージョンを指定する

FVMは、プロジェクトごとに使うFlutter SDKのバージョンを管理するツールです。チームの設定担当者がバージョンを決め、参加するメンバーは共有された指定を使ってSDKを準備します。ここでは動作確認に使った3.47.5を例にします。既存のチームへ参加する場合は、そのプロジェクトの指定を優先してください。

FVMを各自のMacへ導入する

FVMの公式インストール手順から、自分の環境に合う方法を選びます。Homebrewを導入済みのMacなら、次のコマンドでインストールできます。

brew install fvm
fvm --version

fvm --versionで表示される数字はFVM自体のバージョンです。Flutter SDKのバージョンは、後述するfvm flutter --versionで確認します。Homebrewを使っていない場合は、公式ページの別の導入方法を利用してください。この記事の手順はFVM 4.3.1で確認しました。2026年11月7日時点の最新は4.3.2で、ここで使うfvm use、fvm install、.fvmrc、.fvm/versions/の手順は4.3.2でもそのまま使えます。

設定担当者が、アプリのルートでバージョンを選ぶ

ターミナルでアプリのルートへ移動してから、次を実行します。.vscodeフォルダを先に用意すると、FVMがVS Code向けのSDKパスも設定します。

mkdir -p .vscode
fvm use 3.47.5
fvm flutter --version

SDKがFVMの保存領域にあれば再利用し、なければダウンロードします。アプリのルートに作成される.fvmrcには、選んだバージョンが記録されます。

{
  "flutter": "3.47.5"
}

チームで固定する場合は、このように具体的なバージョン番号を記録します。stableのようなチャンネル名は、SDKを取得・更新するタイミングで指すバージョンが変わります。コマンドの詳細はFVMのコマンドリファレンスを参照してください。

同じ指定から、各自のSDKを準備する

1　共有する指定
.fvmrcにFlutterのバージョンを記録する。

↓ 各メンバーが fvm install を実行

2　各自のMacにあるSDK本体
FVMが保存したSDKへ、プロジェクト内の.fvm/からリンクする。

↓ エディターとコマンドが参照

3　同じSDKで開発する
VS Codeはdart.flutterSdkPath、ターミナルはfvm flutterから使う。

共有するのはバージョンの指定です。SDKの実体は各自のMacへ保存し、.fvm/に作られるリンクも各自の環境で生成します。SDK本体をGitへ追加する必要はありません。FVMの設定ファイルと保存領域の説明でも、.fvmrcと.fvm/の役割を確認できます。

VS Codeの設定と推奨拡張機能を共有する

SDKの場所と、Dartの保存時整形を設定する

fvm useのあとに.vscode/settings.jsonを開きます。SDKのパスを残し、Dartファイルの整形設定を追加しましょう。すでに別の設定がある場合は、その項目も残して編集します。

{
  "dart.flutterSdkPath": ".fvm/versions/3.47.5",
  "[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true
  }
}

上のSDKパスは、FVM 4.3.1が今回のサンプルに生成した値です。.fvm/versions/3.47.5は、アプリのルートを起点にした相対パスで、その先にSDK本体へのリンクがあります。各メンバーのユーザー名やホームフォルダの場所を設定へ書き込まずに共有できます。FVMが生成したパスがある場合は、その値を使ってください。

dart.flutterSdkPathは、Flutter SDKの場所を拡張機能へ伝える設定です。[dart]内ではDartファイルだけを対象に、Dart拡張機能による保存時整形を有効にしています。項目の意味はDart CodeのSDK設定と推奨設定で確認できます。

Flutterのプロジェクトでは、Flutter SDKに含まれるDart SDKが使われます。今回の構成ではdart.sdkPathを別に指定せず、Flutterのバージョンと一緒にDartもそろえます。

拡張機能は、推奨する一覧を共有する

.vscode/extensions.jsonを作成し、FlutterとDartの拡張機能を記載します。

{
  "recommendations": [
    "Dart-Code.flutter",
    "Dart-Code.dart-code"
  ]
}

メンバーはプロジェクトを開き、拡張機能ビューの検索欄へ@recommendedと入力して、ワークスペースの推奨拡張機能をインストールします。このファイルが共有するのは拡張機能のID一覧です。インストールの操作は各自が行い、拡張機能のバージョンも個別に管理されます。仕組みはVS Codeの推奨拡張機能の説明を参照してください。

設定後は、VS CodeのFile → Open…から、pubspec.yamlがあるフォルダを開きます。codeコマンドを導入済みなら、アプリのルートでcode .を実行しても開けます。

Gitで共有するファイルと、各自で生成するファイル

Gitへ追加する前に、ファイルの役割を確認しましょう。アプリのソースコードに加え、環境を準備するための指定を共有し、SDKのリンクやビルド結果は各自の環境で生成します。

ファイル・フォルダ扱い理由
.fvmrc
.gitignore		共有Flutterのバージョン指定と、Gitから除外するファイルのルール
.vscode/settings.json
.vscode/extensions.json		共有共通設定と推奨拡張機能
pubspec.yaml
pubspec.lock		アプリでは両方共有依存条件と、解決されたパッケージのバージョン
analysis_options.yaml
README.md		共有コードの検査ルールと参加手順
.fvm/
.dart_tool/
build/		Gitの対象から除外各自のSDKリンクや生成物

.gitignoreへFVMとエディターの扱いを追加する

Flutterが生成した.gitignoreを残し、次の設定を追加します。この例では、VS Codeの2つの共有ファイルを追跡対象にします。

.fvm/

.vscode/*
!.vscode/settings.json
!.vscode/extensions.json

既存の.gitignoreに.vscode/という有効な行がある場合は、その行を上の3行へ置き換えます。フォルダ全体の除外が残ると、配下の共有ファイルも追加できません。launch.jsonなどをチームで使う場合は、共有対象を確認してから例外へ追加してください。

パッケージのバージョンと検査ルールも共有する

pubspec.yamlには利用するパッケージとバージョンの条件を書き、pubspec.lockには実際に解決されたバージョンが記録されます。Flutterアプリでは両方をGitへ追加し、参加者はfvm flutter pub getで依存パッケージを取得します。SDKや依存条件を変える際は、lockファイルの差分も一緒に確認しましょう。Flutter公式の依存関係管理も、アプリのlockファイルをバージョン管理する方針です。

analysis_options.yamlでは、実行前にコードを調べる静的解析のルールを共有します。新規Flutterアプリでは、pubspec.yamlのdev_dependenciesにflutter_lintsがあり、解析設定から次のように読み込みます。既存の解析ルールがある場合は、それを保って調整してください。

include: package:flutter_lints/flutter.yaml

設定の役割はDartの静的解析の説明で確認できます。検査に同じSDKを使うため、コマンドもチームでそろえます。

fvm dart format --output=none --set-exit-if-changed lib test
fvm flutter analyze
fvm flutter test

1行目は、ファイルを書き換えずに整形のずれを検出します。整形が必要ならfvm dart format lib testで直し、差分を確認してください。オプションの意味はDartの整形コマンドの説明にあります。2行目はコードの問題を調べ、3行目はtest/内のテストを実行します。保存時の整形と、この共通の確認手順を組み合わせて運用します。

新しく参加するメンバーの手順をREADMEにまとめる

設定担当者の準備が終わったら、参加者が読むREADME.mdへ初回の操作を記載します。リポジトリはGitで管理するプロジェクトの保存先、cloneはその内容を手元へ取得する操作です。次の例のリポジトリのURLを、チームが使う実際のURLへ置き換えてください。

参加者は、この順に準備する

1　取得する

Gitでアプリと共有設定をcloneする。

2　そろえる

FVMでSDKを準備し、依存パッケージを取得する。

3　確かめる

推奨拡張を入れ、検査とアプリの起動を確認する。

# 開発環境の準備

## 前提
- macOSでFlutterとChromeを利用できること
- Git、VS Code、FVMを導入済みであること
- FVM 4.3.1で手順を確認
- Flutterのバージョン指定は .fvmrc を参照

## 初回の準備
```sh
git clone <リポジトリのURL> team_app
cd team_app
fvm install
fvm flutter --version
fvm flutter pub get
```

VS Codeの File → Open… で team_app フォルダを開く。
VS Codeの拡張機能ビューで @recommended を検索し、
このプロジェクトの推奨拡張機能をインストールする。

## 開発前の確認
```sh
fvm dart format --output=none --set-exit-if-changed lib test
fvm flutter analyze
fvm flutter test
```

## Chromeで起動
```sh
fvm flutter run -d chrome
```

参加者が実行するfvm installは、取得した.fvmrcの指定を使います。設定担当者が選んだバージョンを引き継ぐため、参加者が別の番号でfvm useを実行する必要はありません。fvm flutterとfvm dartを使えば、VS Code内のターミナルでもmacOSのターミナルでも、プロジェクトのSDK指定で操作できます。

READMEと共有設定の差分を確認したら、設定担当者がコミットし、チームで使うリモートリポジトリへpushします。参加者は、その内容をcloneして準備を始めます。

このREADMEはChromeで動かすサンプル向けです。Android・iOS向けのアプリでは、対象に応じてAndroid SDKやXcode、シミュレーター、必要な署名設定の手順も加えてください。

別フォルダへcloneして、参加者の手順を確かめる

共有ファイルをコミットしたら、元の作業フォルダとは別の場所へcloneし、READMEの操作を順に試します。普段のフォルダにだけ存在する設定や生成物へ依存していると、この段階で気付きやすくなります。

2026年9月20日、Apple Silicon搭載Mac・macOS 27.0・FVM 4.3.1・Flutter 3.47.5／Dart 3.13.4で、ローカルのGitリポジトリから別フォルダへのcloneと初回準備を確認しました。以下は、その取得先での実行結果の抜粋です。

整形チェック: Formatted 2 files (0 changed)
静的解析: No issues found!
テスト: All tests passed!
pubspec.lock: 取得・確認後の差分なし
別フォルダへcloneしたFlutterアプリをChromeで開き、カウンターが1になった画面
取得先でアプリを起動し、「＋」を押すとカウンターが0から1へ変化しました。macOS 27.0、Flutter 3.47.5、Chromeで2026年9月20日に確認。

SDKのバージョンが合わない場合

アプリのルートでfvm flutter --versionを実行し、.fvmrcの指定と見比べます。通常のflutter --versionは、そのターミナルのPATHにある別のSDKを示すことがあります。チームの手順では、READMEのfvm付きコマンドへ統一すると確認対象が明確になります。

VS CodeがSDKを見つけられない場合

まずアプリのルートでfvm installを実行し、.vscode/settings.jsonのSDKパスと、対応する.fvm/内のリンクを確認します。そのあとVS Codeでアプリのフォルダを開き直してください。新しく取得したフォルダでは、SDKの準備を先に済ませるとエディターが参照できます。

共有ファイルがGitへ追加されない場合

git check-ignore -v .vscode/settings.jsonを実行すると、除外に関係するルールを調べられます。.gitignoreにフォルダ全体の除外が残っていないか確認し、git status --shortで追加・変更するファイルを見直してください。

まずはREADMEだけで起動できる状態を作る

チームの準備ができたかは、新しく参加する人が共有ファイルとREADMEを使って起動できるかで確かめられます。最初はこの記事の構成を使い、参加時につまずいた操作があればREADMEへ補っていきましょう。

学習を続ける場合はFlutterの学習ロードマップからDartとWidgetへ進み、仕様や実装例を探すときはFlutter開発の参考サイト集を利用してください。

Flutterアプリ開発,プログラミング

Posted by Negichou Lab 編集部