8月 12, 2026

Windows11のFlutterでFirebaseを使えるようにする

🔥 Windows 11 × Flutter × Firebase

VS CodeでFirebaseを使うための設定ガイド

Node.js → Firebase CLI → FlutterFire CLI → Firebase接続

🎯 1. 完成イメージ

Windows 11のVS CodeでFlutterアプリを開発し、 Firebaseを利用できる環境を構築します。

項目	役割	確認
Flutter	スマートフォンアプリを開発	✓
VS Code	プログラムを作成	✓
Node.js	Firebase CLIを動かすための環境	✓
Firebase CLI	Firebaseをコマンドから操作	✓
FlutterFire CLI	FlutterとFirebaseを接続	★重要
firebase_core	FlutterからFirebaseを利用	★重要

重要
Firebase CLIをインストールしただけでは、 FlutterアプリとFirebaseの接続は完了しません。
FlutterではFlutterFire CLIを使用します。

📋 2. 全体の手順

順番	作業内容
①	Node.jsをインストール
②	Firebase CLIをインストール
③	Firebase CLIを確認
④	Firebaseへログイン
⑤	FlutterFire CLIをインストール
⑥	FlutterFire CLIを確認
⑦	Firebaseプロジェクトを作成
⑧	FlutterプロジェクトをFirebaseへ接続
⑨	firebase_coreを追加
⑩	main.dartを設定
⑪	Flutterアプリを実行

① Node.jsをインストール

STEP 1

Node.jsをまだインストールしていない場合は、 node-v24.19.0-x64.msiを実行します。

基本的にはデフォルト設定のままでインストールできます。

インストール確認

VS Codeを起動して、

ターミナル → 新しいターミナル

を選択します。

PS> node --version

例えば、次のように表示されます。

v24.19.0

次にnpmを確認します。

PS> npm --version

✓ OK
Node.jsとnpmのバージョンが表示されれば成功です。

② Firebase CLIをインストール

STEP 2

用意した firebase-tools-instant-win.exe を実行します。

Firebase CLIとは？
Firebaseプロジェクトをコマンドラインから操作するためのツールです。

確認

PS> firebase --version

バージョン番号が表示されればOKです。

✓ Firebase CLI OK

③ Firebaseへログイン

STEP 3

Firebaseで使用するGoogleアカウントでログインします。

PS> firebase login

ブラウザが起動するので、 Firebase Consoleで使用するGoogleアカウントを選択します。

ログイン確認

PS> firebase projects:list

✓ OK
Firebaseプロジェクトの一覧が表示されれば成功です。

注意
Googleアカウントを複数持っている場合は、 Firebase Consoleと同じアカウントでログインしてください。

④ FlutterFire CLIをインストール

STEP 4 ★重要

FlutterとFirebaseを接続するために、 FlutterFire CLIをインストールします。

PS> dart pub global activate flutterfire_cli

FlutterFire CLIとは？
FlutterプロジェクトとFirebaseプロジェクトを接続し、 Firebase設定ファイルを自動生成するツールです。

⑤ FlutterFire CLIを確認

STEP 5

PS> flutterfire --version

バージョン番号が表示されれば成功です。

「flutterfireが認識されません」と表示された場合

Windowsの環境変数PATHに以下を追加します。

%LOCALAPPDATA%\Pub\Cache\bin

PATHの設定

Windows検索を開く
「環境変数」と入力
「環境変数を編集」を開く
「環境変数」をクリック
「Path」を選択
「編集」をクリック
「新規」をクリック
%LOCALAPPDATA%\Pub\Cache\binを追加
OKをクリック

注意
PATHを変更した場合は、 VS Codeを一度終了して再起動してください。

再起動後に確認します。

PS> flutterfire --version

⑥ Firebaseプロジェクトを作成

STEP 6

ブラウザでFirebase Consoleを開きます。

Firebase Consoleを開く

「プロジェクトを追加」をクリックします。

例：

Flutter Firebase Test

注意
FirebaseプロジェクトIDは、作成後に変更できません。アプリ名などを考えて作成してください。

⑦ Flutterプロジェクトを作成

STEP 7

VS CodeのターミナルでFlutterプロジェクトを作成します。

PS> cd D:\dev\projects

PS> flutter create firebase_test

プロジェクトへ移動します。

PS> cd firebase_test

VS Codeで開きます。

PS> code .

✓ OK
VS CodeでFlutterプロジェクトが開けば成功です。

⑧ FlutterとFirebaseを接続

STEP 8 ★最重要

VS Codeのターミナルで、 pubspec.yamlがある場所を確認します。

その場所で以下を実行します。

PS> flutterfire configure

画面で選択

Googleアカウント
Firebaseプロジェクト
使用するプラットフォーム

WindowsでAndroidアプリを開発する場合は、まずAndroidを選択します。

Webアプリも作る場合はWebも選択できます。

✓ 成功すると
lib/firebase_options.dart が作成されます。

⑨ firebase_coreを追加

STEP 9

FlutterアプリからFirebaseを利用するため、 Firebase Coreを追加します。

PS> flutter pub add firebase_core

その後、Firebase設定を確認・更新します。

PS> flutterfire configure

✓ firebase_coreの追加完了

⑩ main.dartを設定

STEP 10

VS Codeで以下のファイルを開きます。

lib/main.dart

Firebaseを初期化するコードを入れます。

import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Firebase Test', home: Scaffold( appBar: AppBar( title: const Text('Firebase Test'), ), body: const Center( child: Text( 'Firebase接続OK', style: TextStyle(fontSize: 24), ), ), ), ); } }

ポイント
Firebase.initializeApp() でFirebaseをFlutterアプリに初期化します。

⑪ Flutterアプリを実行

STEP 11

まず接続されているデバイスを確認します。

PS> flutter devices

AndroidエミュレーターまたはUSB接続したスマートフォンが表示されることを確認します。

その後、実行します。

PS> flutter run

🎉 Firebase接続OK
アプリ画面に「Firebase接続OK」と表示されれば、基本的なFirebase接続は完了です。

🔍 最終チェックリスト

☑ Node.js

PS> node --version

☑ npm

PS> npm --version

☑ Firebase CLI

PS> firebase --version

☑ Firebaseログイン

PS> firebase projects:list

☑ FlutterFire CLI

PS> flutterfire --version

☑ Flutter

PS> flutter doctor

☑ Firebase設定

lib/firebase_options.dart

☑ Firebase Core

PS> flutter pub deps

☑ アプリ実行

PS> flutter run

⚠️ よくあるエラー

症状	原因	対処
firebaseが認識されない	PATHの問題	Firebase CLIのPATHを確認
flutterfireが認識されない	Dart Pub CacheのPATH不足	%LOCALAPPDATA%\Pub\Cache\binをPATHへ追加
Firebaseプロジェクトが表示されない	Googleアカウントが違う	firebase loginを確認
firebase_options.dartがない	FlutterFire設定未実行	flutterfire configureを実行
Firebase.initializeAppエラー	Firebase Coreや設定ファイルの問題	firebase_coreとfirebase_options.dartを確認

🚨 Windows 11で特に注意

① Firebase CLIとFlutterFire CLIは別物

Firebase CLIをインストールしただけでは、 FlutterとFirebaseの接続は完了しません。

以下が必要です。

PS> dart pub global activate flutterfire_cli

② flutterfire configureはFlutterプロジェクト内で実行

pubspec.yamlがある場所で実行してください。

PS> flutterfire configure

③ WindowsではiOSアプリをビルドできない

Windows 11ではXcodeを使用できないため、 iOSアプリの最終ビルドにはMacが必要です。

WindowsではまずAndroidを対象に開発するのがおすすめです。

④ firebase_options.dartを不用意に削除しない

Firebase接続に必要な設定ファイルです。 Firebase設定を変更した場合は、

PS> flutterfire configure

を再実行してください。

🧩 Firebase機能を追加する場合

Firebase Authentication

PS> flutter pub add firebase_auth

Cloud Firestore

PS> flutter pub add cloud_firestore

Firebase Storage

PS> flutter pub add firebase_storage

Firebase Cloud Messaging

PS> flutter pub add firebase_messaging

Firebase機能を追加した場合は、Firebase Console側の設定も必要になる場合があります。

📁 最終的なプロジェクト構成

firebase_test/ │ ├─ android/ │ ├─ ios/ │ ├─ lib/ │ ├─ main.dart │ └─ firebase_options.dart │ ├─ test/ │ ├─ pubspec.yaml │ ├─ pubspec.lock │ └─ .firebaserc

ファイル	役割
pubspec.yaml	Flutterパッケージ管理
firebase_options.dart	Firebase接続設定
main.dart	Firebase初期化
.firebaserc	Firebaseプロジェクトとの関連付け

⭐ 最初に覚えるコマンド

コマンド	目的
`node --version`	Node.js確認
`npm --version`	npm確認
`firebase --version`	Firebase CLI確認
`firebase login`	Firebaseログイン
`firebase projects:list`	Firebaseプロジェクト確認
`dart pub global activate flutterfire_cli`	FlutterFire CLIインストール
`flutterfire --version`	FlutterFire確認
`flutterfire configure`	FlutterとFirebaseを接続
`flutter pub add firebase_core`	Firebase Core追加
`flutter run`	アプリ実行

🏁 最短セットアップ

すでにNode.js、Firebase CLI、Flutter、VS Codeがインストール済みなら、次の順番で実行してください。

PS> firebase login

PS> firebase projects:list

PS> dart pub global activate flutterfire_cli

PS> flutterfire --version

PS> flutter pub add firebase_core

PS> flutterfire configure

PS> flutter run

🎉 完了
Windows 11 + VS Code + Flutter + Firebaseの基本開発環境が完成です。

📚 公式サイト

Firebase公式：FlutterアプリにFirebaseを追加

Firebase公式：Firebase CLI

Dart公式：pub global

このブログを検索

一言いわせてもらいます。

Windows11のFlutterでFirebaseを使えるようにする

🔥 Windows 11 × Flutter × Firebase

🎯 1. 完成イメージ

📋 2. 全体の手順

① Node.jsをインストール

インストール確認

② Firebase CLIをインストール

確認

③ Firebaseへログイン

ログイン確認

④ FlutterFire CLIをインストール

⑤ FlutterFire CLIを確認

「flutterfireが認識されません」と表示された場合

PATHの設定

⑥ Firebaseプロジェクトを作成

⑦ Flutterプロジェクトを作成

⑧ FlutterとFirebaseを接続

画面で選択

⑨ firebase_coreを追加

⑩ main.dartを設定

⑪ Flutterアプリを実行

🔍 最終チェックリスト

⚠️ よくあるエラー

🚨 Windows 11で特に注意

🧩 Firebase機能を追加する場合

Firebase Authentication

Cloud Firestore

Firebase Storage

Firebase Cloud Messaging

📁 最終的なプロジェクト構成

⭐ 最初に覚えるコマンド

🏁 最短セットアップ

📚 公式サイト

コメント

人気の投稿

Arial Unicode MSのインストール

Fire7(第9世代：FireOS6)にGooglePlayをインストール