Flutter 集成 Firebase 后端配置与前后端闭环实战

二、配置 Firebase 并关联项目

上一章已完成 Flutter 前端项目的搭建，现在要把「后端逻辑」整合到项目中，同时关联 Firebase 控制台的项目。核心思路是：Flutter 项目中集成 Firebase SDK → 编写后端逻辑（Firebase 云函数 / 数据库操作）→ 统一管理在 IDE 中。

1. 安装 Firebase CLI

本地操作 Firebase 的工具。需先安装 Node.js，若未安装可执行 winget install OpenJS.NodeJS。

终端执行以下命令安装 firebase-tools：

npm install -g firebase-tools

验证安装：执行 firebase --version，能显示版本号即成功。

2. 登录 Firebase

若网络环境受限，登录前的两个步骤非常重要：

• 在终端中设置临时环境变量，让 Firebase CLI 正确走代理：

set http_proxy=http://127.0.0.1:18081
set https_proxy=http://127.0.0.1:18081
set NODE_TLS_REJECT_UNAUTHORIZED=0

请将 18081 替换为本机实际端口。

• 终端执行新登录命令：

正常这里执行 firebase login，但开启代理后，本地回调链路被代理阻断，所以更改命令：

firebase login --no-localhost

把 code 码复制到终端，搞定。

在弹出的谷歌窗口中登录 CLI，复制终端中的链接在谷歌打开。

3. 关联项目

这个步骤要尽快做，授权超时需要重新登陆。

登录后，在 Flutter 项目根目录执行命令：

Flutter 项目根目录不仅能放前端代码，也能作为 Firebase 后端代码的管理目录，这是 Firebase 推荐的「前后端代码一体化管理」方式。

firebase init

选择要初始化的功能：按空格选中 Firestore（数据库）、Functions（云函数，后端代码）、Hosting（可选，部署用）；

选择 Firebase 项目：找到并选中 MyLearningApp（控制台新建的项目）；

其他选项：全部选默认（按回车即可），无需自定义。

4. 关联授权 Git 仓库

• 授权仓库
• Push 代码到远端仓库

# 1. 初始化本地 Git 仓库（如果还没初始化）
git init

# 2. 关联新的 GitHub 远程仓库（替换成你复制的新仓库地址）
git remote add origin https://github.com/M233333223/my-learning-app.git

# 3. 把 Firebase 初始化生成的所有文件加入暂存区
git add .

# 4. 提交文件（备注信息可自定义）
git commit -m "Initial commit: Flutter + Firebase configuration"

# 5. 创建主分支
git checkout -b main

# 6. 推送代码到新仓库的 main 分支（第一次推送加 -u 关联分支）
git push -u origin main

• 验证部署效果，终端运行：

flutter build web --release && firebase deploy

三、在 IDE 中创建 Firebase 后端代码

1. 编写 Firestore 数据库操作

打开 pubspec.yaml，在 dependencies 中添加：

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.4.3+1
  firebase_core: ^3.4.1 # Firebase 核心依赖（必须）
  cloud_firestore: ^5.3.1 # Firestore 数据库依赖

执行命令安装依赖：

flutter pub get

初始化 Firebase 并编写数据库操作代码。

在 lib/ 下新建 utils/firebase_service.dart（后端逻辑工具类），粘贴以下代码：

此处的 options 中配置需要回到第一步中，复制控制台中的真实数据替换到代码中。

import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/foundation.dart';

// 初始化 Firebase（App 启动时调用）
Future<void> initFirebase() async {
  try {
    await Firebase.initializeApp(
      // 若本地未自动生成配置文件，需从 Firebase 控制台复制你的配置
      options: const FirebaseOptions(
        apiKey: "你的 API Key",
        authDomain: "mylearningapp.firebaseapp.com",
        projectId: "mylearningapp",
        storageBucket: "mylearningapp.appspot.com",
        messagingSenderId: "你的 Sender ID",
        appId: "你的 App ID",
      ),
    );
    if (kDebugMode) {
      print("Firebase 初始化成功！关联项目：MyLearningApp");
    }
  } catch (e) {
    if (kDebugMode) {
      print("Firebase 初始化失败：$e");
    }
  }
}

// Firestore 数据库操作示例（增删改查）
class FirestoreService {
  // 1. 添加数据（比如保存学习记录）
  Future<void> addLearningRecord(String title, String content) async {
    try {
      await FirebaseFirestore.instance
          .collection("learning_records") // 集合名（类似数据库表名）
          .add({
            "title": title,
            "content": content,
            "create_time": Timestamp.now(), // 时间戳
          });
      if (kDebugMode) {
        print("学习记录添加成功！");
      }
    } catch (e) {
      if (kDebugMode) {
        print("添加失败：$e");
      }
    }
  }

  // 2. 获取所有学习记录
  Stream<QuerySnapshot> getLearningRecords() {
    return FirebaseFirestore.instance
        .collection("learning_records")
        .orderBy("create_time", descending: true)
        .snapshots(); // 实时监听数据变化
  }

  // 3. 删除学习记录
  Future<void> deleteLearningRecord(String docId) async {
    try {
      await FirebaseFirestore.instance
          .collection("learning_records")
          .doc(docId)
          .delete();
      if (kDebugMode) {
        print("记录删除成功！");
      }
    } catch (e) {
      if (kDebugMode) {
        print("删除失败：$e");
      }
    }
  }
}

四、Demo 页面测试接口

1. 写一个简易页面

修改 lib/main.dart 文件：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'utils/firebase_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initFirebase(); // 初始化 Firebase（已替换真实配置）
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyLearningApp',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const LearningRecordPage(), // 跳转到测试页面
    );
  }
}

// 测试页面：包含添加/展示学习记录的功能
class LearningRecordPage extends StatefulWidget {
  const LearningRecordPage({super.key});

  @override
  State<LearningRecordPage> createState() => _LearningRecordPageState();
}

class _LearningRecordPageState extends State<LearningRecordPage> {
  final FirestoreService _firestoreService = FirestoreService();
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _contentController = TextEditingController();

  // 点击按钮添加学习记录
  void _addRecord() {
    String title = _titleController.text.trim();
    String content = _contentController.text.trim();
    if (title.isNotEmpty) {
      _firestoreService.addLearningRecord(title, content);
      // 清空输入框
      _titleController.clear();
      _contentController.clear();
      // 提示添加成功
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('学习记录添加成功！')),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('标题不能为空！')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MyLearningApp 测试')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 输入框：填写学习记录标题和内容
            TextField(
              controller: _titleController,
              decoration: const InputDecoration(
                labelText: '学习记录标题',
                hintText: '比如：Flutter 集成 Firebase',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 10),
            TextField(
              controller: _contentController,
              maxLines: 3,
              decoration: const InputDecoration(
                labelText: '学习记录内容',
                hintText: '比如：完成了 Firebase 初始化',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            // 添加记录按钮
            ElevatedButton(
              onPressed: _addRecord,
              child: const Text('添加学习记录'),
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(double.infinity, 50),
              ),
            ),
            const SizedBox(height: 20),
            const Text('已添加的学习记录：', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 10),
            // 实时展示数据库中的学习记录
            Expanded(
              child: StreamBuilder<QuerySnapshot>(
                stream: _firestoreService.getLearningRecords(), // 监听数据库变化
                builder: (context, snapshot) {
                  // 处理加载/错误状态
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Center(child: CircularProgressIndicator());
                  }
                  if (snapshot.hasError) {
                    return Center(child: Text('加载失败：${snapshot.error}'));
                  }
                  // 获取数据列表
                  final records = snapshot.data?.docs ?? [];
                  if (records.isEmpty) {
                    return const Center(child: Text('暂无学习记录，点击按钮添加吧！'));
                  }
                  // 展示记录列表
                  return ListView.builder(
                    itemCount: records.length,
                    itemBuilder: (context, index) {
                      var record = records[index];
                      Map<String, dynamic> data = record.data() as Map<String, dynamic>;
                      return ListTile(
                        title: Text(data['title'] ?? '无标题'),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(data['content'] ?? '无内容'),
                            Text(
                              '添加时间：${(data['create_time'] as Timestamp).toDate().toString()}',
                              style: const TextStyle(fontSize: 12, color: Colors.grey),
                            ),
                          ],
                        ),
                        trailing: IconButton(
                          icon: const Icon(Icons.delete, color: Colors.red),
                          onPressed: () {
                            // 删除记录
                            _firestoreService.deleteLearningRecord(record.id);
                          },
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• 运行项目：

flutter run -d chrome

页面功能正常，接口跑通。

Firebase 控制台可以看到操作数据。

这种 Serverless 架构极大降低了运维成本，不用手动启动服务，也不用手动建库建表，非常适合快速构建全栈应用。