了解 Firebase for Flutter

1. 开始之前

在本程式码实验室中，您将学习一些基础知识的火力地堡创建Android和iOS扑移动应用。

先决条件

本程式码实验室假设您熟悉扑动，你已经安装了扑SDK和编辑。

你将创造什么

在此 Codelab 中，您将使用 Flutter 在 Android、iOS、Web 和 macOS 上构建一个事件 RSVP 和留言簿聊天应用程序。您将使用 Firebase 身份验证对用户进行身份验证，并使用 Cloud Firestore 同步数据。

你需要什么

您可以使用以下任何设备运行此代码实验室：

• 连接到您的计算机并设置为开发人员模式的物理设备（Android 或 iOS）。
• iOS 模拟器。 （需要安装的Xcode工具。）
• 安卓模拟器。 （需要在设置Android Studio中。）

除了上述内容，您还需要：

• 您选择的浏览器，例如 Chrome。
• 一个IDE或您选择的文本编辑器，如Android的工作室或VS代码与飞镖和颤振插件配置。
• 最新的stable版本扑动（或beta ，如果你喜欢生活在边缘）。
• 一个 Google 帐户，例如 gmail 帐户，用于创建和管理您的 Firebase 项目。
• 该firebase的命令行工具，登录到您的Gmail帐户。
• Codelab 的示例代码。有关如何获取代码，请参阅下一步。

2.获取示例代码

让我们首先从 GitHub 下载我们项目的初始版本。

克隆GitHub的库在命令行：

git clone https://github.com/flutter/codelabs.git flutter-codelabs

另外，如果你有GitHub的CLI工具安装：

gh repo clone flutter/codelabs flutter-codelabs

示例代码应被克隆到flutter-codelabs目录，其中包含了codelabs集合的代码。对于本程式码实验室的代码在flutter-codelabs/firebase-get-to-know-flutter 。

下的目录结构flutter-codelabs/firebase-get-to-know-flutter是一个系列的，你应该在每个命名步骤结束那里的快照。这是第 2 步，因此查找匹配文件非常简单：

cd flutter-codelabs/firebase-get-to-know-flutter/step_02

如果您想向前跳过，或者查看某个步骤之后的样子，请查看以您感兴趣的步骤命名的目录。

导入入门应用

打开或导入flutter-codelabs/firebase-get-to-know-flutter/step_02目录复制到您的首选IDE。此目录包含 codelab 的起始代码，其中包含一个尚未功能的 Flutter 聚会应用程序。

找到要处理的文件

此应用程序中的代码分布在多个目录中。这种功能拆分旨在通过按功能对代码进行分组来使其更易于使用。

在项目中找到以下文件：

• lib/main.dart ：此文件包含主入口点和应用程序窗口小部件。
• lib/src/widgets.dart ：此文件包含控件的一把利于规范应用的造型。这些用于组成入门应用程序的屏幕。
• lib/src/authentication.dart ：此文件包含的部分实现的FirebaseUI验证用一组小部件来创建基于火力地堡电子邮件认证的登录用户体验。用于身份验证流程的这些小部件尚未在入门应用程序中使用，但您很快就会将它们连接起来。

您将根据需要添加其他文件以构建应用程序的其余部分。

回顾lib/main.dart文件

这个应用程序需要的优势google_fonts包，使我们能够做出的Roboto在整个应用程序的默认字体。为激励读者的练习是探索fonts.google.com和使用您的应用程序的不同部分发现那里的字体。

您正在使用从辅助部件lib/src/widgets.dart的形式Header ， Paragraph和IconAndDetail 。这些部件减少中描述的页面布局杂乱HomePage通过消除重复的代码。这具有实现一致的外观和感觉的额外好处。

以下是您的应用在 Android、iOS、Web 和 macOS 上的外观：

应用预览

3. 创建并设置 Firebase 项目

显示活动信息对您的客人来说非常有用，但仅显示活动对任何人都不是很有用。让我们为这个应用程序添加一些动态功能。为此，您需要将 Firebase 连接到您的应用。要开始使用 Firebase，您需要创建并设置一个 Firebase 项目。

创建一个 Firebase 项目

1. 登录火力地堡。
2. 在火力地堡控制台，点击添加项目（或创建一个项目），并命名您的火力地堡火力地堡项目，颤振程式码实验室。

3. 单击项目创建选项。如果出现提示，请接受 Firebase 条款。跳过设置 Google Analytics，因为您不会为此应用使用 Analytics。

要了解更多关于火力地堡项目，请参阅了解火力地堡项目。

您正在构建的应用使用了多个可用于网络应用的 Firebase 产品：

• 火力地堡认证，让您的用户登录到您的应用程序。
• 云公司的FireStore保存在云中的结构化数据，并得到即时通知的数据发生变化时。
• 火力地堡安全规则，以确保您的数据库。

其中一些产品需要特殊配置或需要使用 Firebase 控制台启用。

启用电子邮件登录的火力地堡认证

要允许用户在登录到Web应用程序，你会使用电子邮件/密码登录方法对本程式码实验室：

1. 在火力地堡控制台，展开左侧面板中生成菜单。
2. 点击身份验证，然后单击开始使用按钮，然后在登录方法选项卡（或点击这里直接进入到登录方法选项卡）。
3. 点击登录在供应商列表中的电子邮件/密码，设置启用开关至ON位置，然后单击保存。

启用 Cloud Firestore

Web应用程序使用云公司的FireStore保存聊天消息和接收新的聊天消息。

启用 Cloud Firestore：

1. 在火力地堡控制台的Build部分中，单击云公司的FireStore。
2. 单击创建数据库。

3. 在测试模式选项选择开始。阅读有关安全规则的免责声明。测试模式确保您可以在开发过程中自由写入数据库。单击下一步。

4. 选择数据库的位置（您可以使用默认位置）。请注意，此位置以后无法更改。
5. 单击启用。

4. Firebase 配置

为了将 Firebase 与 Flutter 一起使用，您需要按照流程配置 Flutter 项目以正确使用 FlutterFire 库：

• 将 FlutterFire 依赖项添加到您的项目中
• 在 Firebase 项目上注册所需的平台
• 下载特定于平台的配置文件，并将其添加到代码中。

在您的应用程序扑的顶级目录中，有子目录名为android ， ios ， macos和web 。这些目录分别保存 iOS 和 Android 的特定于平台的配置文件。

配置依赖项

您需要为您在此应用中使用的两个 Firebase 产品添加 FlutterFire 库 - Firebase Auth 和 Cloud Firestore。运行以下三个命令以添加依赖项。

$ flutter pub add firebase_core 
Resolving dependencies...
+ firebase_core 1.10.5
+ firebase_core_platform_interface 4.2.2
+ firebase_core_web 1.5.2
+ flutter_web_plugins 0.0.0 from sdk flutter
+ js 0.6.3
  test_api 0.4.3 (0.4.8 available)
Changed 5 dependencies!

该firebase_core是所有火力地堡扑插件所需的通用代码。

$ flutter pub add firebase_auth
Resolving dependencies...
+ firebase_auth 3.3.3
+ firebase_auth_platform_interface 6.1.8
+ firebase_auth_web 3.3.4
+ intl 0.17.0
  test_api 0.4.3 (0.4.8 available)
Changed 4 dependencies!

该firebase_auth能够与火力地堡的身份验证功能集成。

$ flutter pub add cloud_firestore
Resolving dependencies...
+ cloud_firestore 3.1.4
+ cloud_firestore_platform_interface 5.4.9
+ cloud_firestore_web 2.6.4
  test_api 0.4.3 (0.4.8 available)
Changed 3 dependencies!

该cloud_firestore可以访问云公司的FireStore数据存储。

$ flutter pub add provider
Resolving dependencies...
+ nested 1.0.0
+ provider 6.0.1
  test_api 0.4.3 (0.4.8 available)
Changed 2 dependencies!

在您添加了所需的包后，您还需要配置 iOS、Android、macOS 和 Web 运行程序项目以适当地利用 Firebase。您还使用provider包，使从显示逻辑的业务逻辑分离。

安装flutterfire

1. FlutterFire CLI 依赖于底层的 Firebase CLI。如果你还没有这样做的话，安装或更新到最新版本火力地堡CLI 。
2. ：接下来，通过运行以下命令安装FlutterFire CLI

   $ dart pub global activate flutterfire_cli
   

安装完成后， flutterfire命令将在全球范围内提供。

配置您的应用程序

CLI 从您的 Firebase 项目和选定的项目应用程序中提取信息，以生成特定平台的所有配置。

在应用程序的根目录中，运行配置命令：

$ flutterfire configure

配置命令将引导您完成多个过程：

1. 选择一个 Firebase 项目（基于 .firebaserc 文件或从 Firebase 控制台）。
2. 提示您想要配置的平台（例如 Android、iOS、macOS 和 Web）。
3. 确定应使用所选平台的哪些 Firebase 应用程序来提取配置。默认情况下，CLI 将尝试根据您当前的项目配置自动匹配 Firebase 应用。
4. 在您的项目中生成一个 firebase_options.dart 文件。

配置 macOS

macOS 上的 Flutter 构建完全沙盒化的应用程序。由于此应用程序正在集成使用网络与 Firebase 服务器进行通信，因此您需要为您的应用程序配置网络客户端权限。

macos/Runner/DebugProfile.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

macos/Runner/Release.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

见应享权利和App沙箱的更多细节。

5.添加用户登录（RSVP）

现在，您已经添加火力地堡的应用程序，你可以设置一个回复按钮，使用注册人火力地堡认证。对于 Android 原生、iOS 原生和 Web，有预构建的 FirebaseUI Auth 包，但对于 Flutter，您需要构建此功能。

您在第 2 步中检索到的项目包括一组小部件，它们为大多数身份验证流程实现了用户界面。您将实现业务逻辑以将 Firebase 身份验证集成到应用程序中。

提供者的业务逻辑

您将使用provider包装，使整个扑小部件的应用程序的目录树中可用的集中式应用程序状态的对象。要下手，修改了进口在顶部lib/main.dart ：

lib/main.dart

import 'package:firebase_auth/firebase_auth.dart'; // new
import 'package:firebase_core/firebase_core.dart'; // new
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';           // new

import 'firebase_options.dart';                    // new
import 'src/authentication.dart';                  // new
import 'src/widgets.dart';

该import线引进火力地堡的核心和验证，拉的provider ，你正在使用，使可通过widget树的应用程序状态对象封装，包括来自认证部件lib/src 。

此应用程序状态对象， ApplicationState ，有这一步的两个主要责任，但你在后面的步骤将应用程序添加更多的功能，将获得额外的责任。第一责任是要调用初始化火力地堡库Firebase.initializeApp()再有就是授权流程的处理。以下类添加到年底lib/main.dart ：

lib/main.dart

class ApplicationState extends ChangeNotifier {
  ApplicationState() {
    init();
  }

  Future<void> init() async {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
      } else {
        _loginState = ApplicationLoginState.loggedOut;
      }
      notifyListeners();
    });
  }

  ApplicationLoginState _loginState = ApplicationLoginState.loggedOut;
  ApplicationLoginState get loginState => _loginState;

  String? _email;
  String? get email => _email;

  void startLoginFlow() {
    _loginState = ApplicationLoginState.emailAddress;
    notifyListeners();
  }

  Future<void> verifyEmail(
    String email,
    void Function(FirebaseAuthException e) errorCallback,
  ) async {
    try {
      var methods =
          await FirebaseAuth.instance.fetchSignInMethodsForEmail(email);
      if (methods.contains('password')) {
        _loginState = ApplicationLoginState.password;
      } else {
        _loginState = ApplicationLoginState.register;
      }
      _email = email;
      notifyListeners();
    } on FirebaseAuthException catch (e) {
      errorCallback(e);
    }
  }

  Future<void> signInWithEmailAndPassword(
    String email,
    String password,
    void Function(FirebaseAuthException e) errorCallback,
  ) async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
    } on FirebaseAuthException catch (e) {
      errorCallback(e);
    }
  }

  void cancelRegistration() {
    _loginState = ApplicationLoginState.emailAddress;
    notifyListeners();
  }

  Future<void> registerAccount(
      String email,
      String displayName,
      String password,
      void Function(FirebaseAuthException e) errorCallback) async {
    try {
      var credential = await FirebaseAuth.instance
          .createUserWithEmailAndPassword(email: email, password: password);
      await credential.user!.updateDisplayName(displayName);
    } on FirebaseAuthException catch (e) {
      errorCallback(e);
    }
  }

  void signOut() {
    FirebaseAuth.instance.signOut();
  }
}

值得注意的是这节课的几个关键点。用户在未经身份验证的情况下开始，应用程序显示一个请求用户电子邮件地址的表单，取决于该电子邮件地址是否存档，应用程序将要求用户注册或要求他们的密码，然后假设一切正常，用户已通过身份验证。

必须注意，这不是 FirebaseUI 身份验证流程的完整实现，因为它不处理使用现有帐户的用户无法登录的情况。实现此附加功能将作为练习留给有动力的读者。

集成身份验证流程

现在，你有应用程序状态的开始，是时候来连线应用程序的状态到应用程序初始化并添加认证流入HomePage 。更新的主要切入点通过整合应用程序状态provider包：

lib/main.dart

void main() {
  // Modify from here
  runApp(
    ChangeNotifierProvider(
      create: (context) => ApplicationState(),
      builder: (context, _) => App(),
    ),
  );
  // to here.
}

于修改main功能使得负责使用实例化的应用程序状态对象提供者包ChangeNotifierProvider插件。因为应用程序状态对象扩展您正在使用这个特定的提供者类ChangeNotifier ，这使得provider封装知道什么时候重新显示相关的部件。最后，集成与应用国家Authentication通过更新HomePage的build方法：

lib/main.dart

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          // Add from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Authentication(
              email: appState.email,
              loginState: appState.loginState,
              startLoginFlow: appState.startLoginFlow,
              verifyEmail: appState.verifyEmail,
              signInWithEmailAndPassword: appState.signInWithEmailAndPassword,
              cancelRegistration: appState.cancelRegistration,
              registerAccount: appState.registerAccount,
              signOut: appState.signOut,
            ),
          ),
          // to here
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
        ],
      ),
    );
  }
}

你实例化Authentication控件，并在其包装Consumer部件。消费者小部件通常的方式使provider包可以用来重建树当应用程序状态发生变化的一部分。该Authentication控件是认证用户界面，你现在将测试。

测试身份验证流程

这是身份验证流程的开始，用户可以点击 RSVP 按钮来启动电子邮件表单。

输入电子邮件后，系统会确认用户是否已经注册，在这种情况下，系统会提示用户输入密码，或者如果用户未注册，则他们会通过注册表单。

请务必尝试输入短密码（少于六个字符）以检查错误处理流程。如果用户已注册，他们将看到密码。

在此页面上确保输入错误的密码以检查此页面上的错误处理。最后，一旦用户登录，您将看到登录体验，使用户能够再次注销。

这样，您就实现了身份验证流程。恭喜！

6. 向 Cloud Firestore 写入消息

知道用户来了很好，但让我们在应用程序中为客人提供其他事情要做。如果他们可以在留言簿中留言怎么办？他们可以分享为什么他们很高兴来到这里或他们希望见到谁。

要存储用户在应用程序写入聊天消息，您将使用云计算公司的FireStore 。

数据模型

Cloud Firestore 是一个 NoSQL 数据库，存储在数据库中的数据分为集合、文档、字段和子集合。你会聊天的每封邮件存储为称为顶级集合文档guestbook 。

向 Firestore 添加消息

在本节中，您将为用户添加将新消息写入数据库的功能。首先，添加 UI 元素（表单字段和发送按钮），然后添加将这些元素连接到数据库的代码。

首先，添加进口的cloud_firestore包和dart:async 。

lib/main.dart

import 'dart:async';                                    // new

import 'package:cloud_firestore/cloud_firestore.dart';  // new
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'firebase_options.dart';
import 'src/authentication.dart';
import 'src/widgets.dart';

为了构建一个消息字段和发送按钮的UI元素，添加一个新的状态插件GuestBook在底部lib/main.dart 。

lib/main.dart

class GuestBook extends StatefulWidget {
  const GuestBook({required this.addMessage});
  final FutureOr<void> Function(String message) addMessage;

  @override
  _GuestBookState createState() => _GuestBookState();
}

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Form(
        key: _formKey,
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: _controller,
                decoration: const InputDecoration(
                  hintText: 'Leave a message',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Enter your message to continue';
                  }
                  return null;
                },
              ),
            ),
            const SizedBox(width: 8),
            StyledButton(
              onPressed: () async {
                if (_formKey.currentState!.validate()) {
                  await widget.addMessage(_controller.text);
                  _controller.clear();
                }
              },
              child: Row(
                children: const [
                  Icon(Icons.send),
                  SizedBox(width: 4),
                  Text('SEND'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这里有几个有趣的地方。首先，您正在实例化一个表单，因此 upi 可以验证消息实际上是否有一些内容，如果没有，则向用户显示错误消息。验证一个表单的方式包括访问形式背后的形式状态，为此您使用GlobalKey 。有关密钥的详细信息，以及如何使用它们，请参阅扑小工具101集“时使用的键” 。

还要注意小部件的布局方式，你有一个Row ，一个TextFormField和StyledButton ，它本身包含一个Row 。还要注意TextFormField被包装在一个Expanded插件，这股势力的TextFormField占用行中的任何额外的空间。为了更好地理解为什么这是必需的，请通读理解的制约。

现在您有了一个允许用户输入一些文本以添加到留言簿的小部件，您需要将其显示在屏幕上。要做到这一点，编辑的身体HomePage下面两行添加在底部ListView的孩子：

const Header("What we'll be doing"),
const Paragraph(
  'Join us for a day full of Firebase Workshops and Pizza!',
),
// Add the following two lines.
const Header('Discussion'),
GuestBook(addMessage: (message) => print(message)),

虽然这足以显示 Widget，但还不足以做任何有用的事情。您将很快更新此代码以使其正常工作。

应用预览

单击发送按钮的用户将触发下面的代码段。它增加了消息输入字段的内容向guestbook数据库的集合。具体而言， addMessageToGuestBook方法将所述消息内容到一个新的文件（带有自动生成ID）到guestbook集合。

需要注意的是FirebaseAuth.instance.currentUser.uid是自动生成的唯一ID的引用火力地堡认证给所有登录的用户。

另一个变化到lib/main.dart文件。添加addMessageToGuestBook方法。您将在下一步中将用户界面和此功能连接在一起。

lib/main.dart

class ApplicationState extends ChangeNotifier {

  // Current content of ApplicationState elided ...

  // Add from here
  Future<DocumentReference> addMessageToGuestBook(String message) {
    if (_loginState != ApplicationLoginState.loggedIn) {
      throw Exception('Must be logged in');
    }

    return FirebaseFirestore.instance
        .collection('guestbook')
        .add(<String, dynamic>{
      'text': message,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'name': FirebaseAuth.instance.currentUser!.displayName,
      'userId': FirebaseAuth.instance.currentUser!.uid,
    });
  }
  // To here
}

将 UI 连接到数据库

您有一个 UI，用户可以在其中输入他们想要添加到留言簿的文本，并且您有将条目添加到 Cloud Firestore 的代码。现在您需要做的就是将两者连接在一起。在lib/main.dart做出以下更改HomePage窗口小部件。

lib/main.dart

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Authentication(
              email: appState.email,
              loginState: appState.loginState,
              startLoginFlow: appState.startLoginFlow,
              verifyEmail: appState.verifyEmail,
              signInWithEmailAndPassword: appState.signInWithEmailAndPassword,
              cancelRegistration: appState.cancelRegistration,
              registerAccount: appState.registerAccount,
              signOut: appState.signOut,
            ),
          ),
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
          // Modify from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (appState.loginState == ApplicationLoginState.loggedIn) ...[
                  const Header('Discussion'),
                  GuestBook(
                    addMessage: (message) =>
                        appState.addMessageToGuestBook(message),
                  ),
                ],
              ],
            ),
          ),
          // To here.
        ],
      ),
    );
  }
}

您已将在此步骤开始时添加的两行替换为完整的实现。您再次使用Consumer<ApplicationState>以提供给你渲染树的部分应用程序状态。这使您能够对在 UI 中输入消息的人做出反应，并将其发布到数据库中。在下一节中，您将测试添加的消息是否已发布到数据库中。

测试发送消息

1. 确保您已登录该应用程序。
2. 输入消息，如“嘿！”，然后单击发送。

此操作会将消息写入您的 Cloud Firestore 数据库。但是，您还不会在实际的 Flutter 应用程序中看到该消息，因为您仍然需要实现检索数据。您将在下一步中执行此操作。

但是您可以在 Firebase 控制台中看到新添加的消息。

在火力地堡控制台，在数据库仪表板，你应该看到guestbook的收集与新添加的消息。如果您继续发送消息，您的留言簿集合将包含许多文档，如下所示：

Firebase 控制台

7.阅读消息

客人可以将消息写入数据库，但他们还不能在应用程序中看到它们，这真是太棒了。让我们解决这个问题！

同步消息

要显示消息，您需要添加在数据更改时触发的侦听器，然后创建一个显示新消息的 UI 元素。您将向应用程序状态添加代码，以侦听来自应用程序的新添加消息。

只是上面的GuestBook窗口小部件以下值类。此类公开您存储在 Cloud Firestore 中的数据的结构化视图。

lib/main.dart

class GuestBookMessage {
  GuestBookMessage({required this.name, required this.message});
  final String name;
  final String message;
}

在部分ApplicationState你定义状态和getter，添加以下新行：

lib/main.dart

  ApplicationLoginState _loginState = ApplicationLoginState.loggedOut;
  ApplicationLoginState get loginState => _loginState;

  String? _email;
  String? get email => _email;

  // Add from here
  StreamSubscription<QuerySnapshot>? _guestBookSubscription;
  List<GuestBookMessage> _guestBookMessages = [];
  List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
  // to here.

最后，在初始化部分ApplicationState ，添加以下在文档集合订阅查询时用户登录，并取消当他们注销。

lib/main.dart

  Future<void> init() async {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
        // Add from here
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // to here.
      } else {
        _loginState = ApplicationLoginState.loggedOut;
        // Add from here
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        // to here.
      }
      notifyListeners();
    });
  }

这部分是很重要的，因为在这里你构建在一个查询guestbook的收集和处理注册和取消对这个集合。你听流，您可以重建的消息的本地缓存guestbook的收集，并存储该订阅的引用，以便你可以从它以后退订。这里发生了很多事情，值得花一些时间在调试器中检查什么时候会发生什么以获得更清晰的心智模型。

欲了解更多信息，请参阅云公司的FireStore文档。

在GuestBook窗口小部件，你需要这个不断变化的状态下连接到用户界面。您可以通过添加消息列表作为其配置的一部分来修改小部件。

lib/main.dart

class GuestBook extends StatefulWidget {
  // Modify the following line
  const GuestBook({required this.addMessage, required this.messages});
  final FutureOr<void> Function(String message) addMessage;
  final List<GuestBookMessage> messages; // new

  @override
  _GuestBookState createState() => _GuestBookState();
}

接下来，我们暴露了这个新的配置_GuestBookState通过修改build方法如下。

lib/main.dart

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  // Modify from here
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // to here.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Leave a message',
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Enter your message to continue';
                      }
                      return null;
                    },
                  ),
                ),
                const SizedBox(width: 8),
                StyledButton(
                  onPressed: () async {
                    if (_formKey.currentState!.validate()) {
                      await widget.addMessage(_controller.text);
                      _controller.clear();
                    }
                  },
                  child: Row(
                    children: const [
                      Icon(Icons.send),
                      SizedBox(width: 4),
                      Text('SEND'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        // Modify from here
        const SizedBox(height: 8),
        for (var message in widget.messages)
          Paragraph('${message.name}: ${message.message}'),
        const SizedBox(height: 8),
      ],
      // to here.
    );
  }
}

你包构建方法与以前的内容Column小工具，然后在尾Column的孩子你添加一个集合来生成新的Paragraph在邮件列表中的每个消息。

最后，您现在需要更新的体HomePage正确构建GuestBook新messages参数。

lib/main.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (appState.loginState == ApplicationLoginState.loggedIn) ...[
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages, // new
        ),
      ],
    ],
  ),
),

测试同步消息

Cloud Firestore 会自动与订阅数据库的客户端即时同步数据。

1. 您之前在数据库中创建的消息应显示在应用程序中。随意写新消息；它们应该立即出现。
2. 如果您在多个窗口或选项卡中打开工作区，消息将在选项卡之间实时同步。
3. （可选）可以尝试手动删除，修改，或直接在火力地堡控制台的数据库部分添加新的消息;任何更改都应显示在 UI 中。

恭喜！您正在应用中阅读 Cloud Firestore 文档！

应用p回顾

8.设置基本安全规则

您最初将 Cloud Firestore 设置为使用测试模式，这意味着您的数据库对读写是开放的。但是，您应该只在开发的早期阶段使用测试模式。作为最佳实践，您应该在开发应用程序时为数据库设置安全规则。安全性应该是应用程序结构和行为不可或缺的一部分。

安全规则允许您控制对数据库中文档和集合的访问。灵活的规则语法允许您创建匹配任何内容的规则，从对整个数据库的所有写入到对特定文档的操作。

您可以在 Firebase 控制台中为 Cloud Firestore 编写安全规则：

1. 在火力地堡控制台的开发部分，单击数据库，然后选择规则选项卡（或点击这里直接进入到规则选项卡）。
2. 您应该会看到以下默认安全规则，以及有关公开规则的警告。

识别集合

首先，确定应用程序向其写入数据的集合。

在match /databases/{database}/documents ，确定要保护的集合：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

添加安全规则

因为您在每个留言簿文档中使用了身份验证 UID 作为字段，所以您可以获得身份验证 UID 并验证尝试写入文档的任何人是否具有匹配的身份验证 UID。

将读写规则添加到您的规则集中，如下所示：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

现在，对于留言簿，只有登录用户才能阅读消息（任何消息！），但只有消息的作者可以编辑消息。

添加验证规则

添加数据验证以确保文档中存在所有预期的字段：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

9. 奖励步骤：练习你所学的

记录与会者的 RSVP 状态

现在，您的应用程序只允许人们在对活动感兴趣时开始聊天。此外，您知道某人是否来的唯一方法是他们是否在聊天中发布。让我们组织起来，让人们知道有多少人来。

您将向应用程序状态添加一些新功能。第一个是登录用户能够提名他们是否参加。第二个能力是实际参加人数的计数器。

在lib/main.dart ，添加以下的存取部分，以使UI代码与该状态交互：

lib/main.dart

int _attendees = 0;
int get attendees => _attendees;

Attending _attending = Attending.unknown;
StreamSubscription<DocumentSnapshot>? _attendingSubscription;
Attending get attending => _attending;
set attending(Attending attending) {
  final userDoc = FirebaseFirestore.instance
      .collection('attendees')
      .doc(FirebaseAuth.instance.currentUser!.uid);
  if (attending == Attending.yes) {
    userDoc.set(<String, dynamic>{'attending': true});
  } else {
    userDoc.set(<String, dynamic>{'attending': false});
  }
}

更新ApplicationState的init方法如下：

lib/main.dart

  Future<void> init() async {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    // Add from here
    FirebaseFirestore.instance
        .collection('attendees')
        .where('attending', isEqualTo: true)
        .snapshots()
        .listen((snapshot) {
      _attendees = snapshot.docs.length;
      notifyListeners();
    });
    // To here

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // Add from here
        _attendingSubscription = FirebaseFirestore.instance
            .collection('attendees')
            .doc(user.uid)
            .snapshots()
            .listen((snapshot) {
          if (snapshot.data() != null) {
            if (snapshot.data()!['attending'] as bool) {
              _attending = Attending.yes;
            } else {
              _attending = Attending.no;
            }
          } else {
            _attending = Attending.unknown;
          }
          notifyListeners();
        });
        // to here
      } else {
        _loginState = ApplicationLoginState.loggedOut;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        _attendingSubscription?.cancel(); // new
      }
      notifyListeners();
    });
  }

上面添加了一个始终订阅的查询以查明参加者的数量，并添加了第二个查询，该查询仅在用户登录时才处于活动状态，以查明用户是否正在参加。接下来，添加下列枚举后GuestBookMessage声明：

lib/main.dart

enum Attending { yes, no, unknown }

您现在将定义一个新的小部件，其作用类似于旧的单选按钮。它以不确定的状态开始，既没有选择“是”也没有选择“否”，但是一旦用户选择了他们是否参加，然后您会显示该选项以填充按钮突出显示，而另一个选项以平面渲染后退。

lib/main.dart

class YesNoSelection extends StatelessWidget {
  const YesNoSelection({required this.state, required this.onSelection});
  final Attending state;
  final void Function(Attending selection) onSelection;

  @override
  Widget build(BuildContext context) {
    switch (state) {
      case Attending.yes:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(elevation: 0),
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              TextButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      case Attending.no:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              TextButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              ElevatedButton(
                style: ElevatedButton.styleFrom(elevation: 0),
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      default:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              StyledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              StyledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
    }
  }
}

接下来，你需要更新HomePage的构建方法是趁YesNoSelection ，实现了登录的用户提名，如果他们参加。您还将显示此活动的参加者人数。

lib/main.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Add from here
      if (appState.attendees >= 2)
        Paragraph('${appState.attendees} people going')
      else if (appState.attendees == 1)
        const Paragraph('1 person going')
      else
        const Paragraph('No one going'),
      // To here.
      if (appState.loginState == ApplicationLoginState.loggedIn) ...[
        // Add from here
        YesNoSelection(
          state: appState.attending,
          onSelection: (attending) => appState.attending = attending,
        ),
        // To here.
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages,
        ),
      ],
    ],
  ),
),

添加规则

因为您已经设置了一些规则，所以您使用按钮添加的新数据将被拒绝。你将需要更新的规则允许添加到attendees集合。

对于attendees集合，因为你使用的认证UID为文件名，就可以抓住它，并确认提交的uid是一样的，他们正在编写的文档。您将允许所有人阅读与会者列表（因为那里没有私人数据），但只有创建者才能更新它。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

添加验证规则

添加数据验证以确保文档中存在所有预期的字段：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

（可选）您现在可以查看点击按钮的结果。转到 Firebase 控制台中的 Cloud Firestore 信息中心。

应用预览

10. 恭喜！

您已经使用 Firebase 构建了一个交互式实时网络应用程序！

我们涵盖的内容

• Firebase 身份验证
• 云防火墙
• Firebase 安全规则

下一步

• 想详细了解其他 Firebase 产品？也许您想存储用户上传的图像文件？或者向您的用户发送通知？退房的火力地堡文档。想了解有关 Firebase 的 Flutter 插件的更多信息？退房FlutterFire以获取更多信息。
• 想了解有关 Cloud Firestore 的更多信息？也许您想了解子集合和事务？头向云公司的FireStore网页代码实验室为进入云公司的FireStore更深入一个代码实验室。或者看看这个YouTube系列影片来了解云计算公司的FireStore ！

学到更多

• 火力地堡网站： firebase.google.com
• 扑网站： flutter.dev
• FlutterFire火力地堡扑部件： firebase.flutter.dev
• Firebase YouTube 频道
• 颤振 YouTube 频道

进展如何？

我们希望得到您的反馈！请填写一个（非常）简短的形式在这里。