1. 准备工作
在此 Codelab 中，您将学习一些 Firebase 基础知识，帮助您创建适用于 Android 和 iOS 的 Flutter 移动应用。
前提条件
- 熟悉 Flutter
- Flutter SDK
- 自行挑选文本编辑器
学习内容
- 如何使用 Flutter 在 Android、iOS、Web 和 macOS 上构建事件回复和留言板聊天应用。
- 如何使用 Firebase Authentication 对用户进行身份验证，并使用 Firestore 同步数据。
|
|
|
|
所需条件
以下任意设备：
- 一台连接到计算机并设置为开发者模式的实体 Android 或 iOS 设备。
- iOS 模拟器（需要 Xcode 工具）。
- Android 模拟器（需要在 Android Studio 中进行设置）。
您还需要以下各项：
- 您选择的浏览器，例如 Google Chrome。
- 您选择配置了 Dart 和 Flutter 插件（例如 Android Studio 或 Visual Studio Code）的 IDE 或文本编辑器。
- 最新的
stable版本的 Flutter 或beta（如果您喜欢边缘化）。 - 一个用于创建和管理 Firebase 项目的 Google 账号。
- 通过
FirebaseCLI 登录了您的 Google 账号。
2. 获取示例代码
从 GitHub 下载项目的初始版本：
- 在命令行中，克隆
flutter-codelabs目录中的 GitHub 代码库：
git clone https://github.com/flutter/codelabs.git flutter-codelabs
flutter-codelabs 目录包含一系列 Codelab 的代码。此 Codelab 的代码位于 flutter-codelabs/firebase-get-to-know-flutter 目录中。该目录包含一系列快照，展示了项目在每个步骤结束时应呈现的样子。例如，您目前处于第二步。
- 查找第二步的匹配文件：
cd flutter-codelabs/firebase-get-to-know-flutter/step_02
如果您想跳转或查看某个步骤之后的内容，请查看以您感兴趣的步骤命名的目录。
导入 starter 应用
- 在您的首选 IDE 中打开或导入
flutter-codelabs/firebase-get-to-know-flutter/step_02目录。此目录包含此 Codelab 的起始代码，其中包含一个尚未正常运行的 Flutter 聚会应用。
找到需要处理的文件
此应用中的代码分布在多个目录中。这种功能拆分可按功能对代码进行分组，从而简化工作。
- 找到以下文件：
lib/main.dart：此文件包含主入口点和应用 widget。lib/home_page.dart：此文件包含首页 widget。lib/src/widgets.dart：此文件包含一些有助于实现应用样式标准化的 widget。它们构成了起始应用的屏幕。lib/src/authentication.dart：此文件包含 Authentication 的部分实现，其中包含一组微件，用于为基于电子邮件地址的 Firebase 身份验证创建登录用户体验。身份验证流程的这些 widget 尚未在起始应用中使用过，但您很快便会添加。
您可以根据需要添加其他文件，以构建应用的其余部分。
查看 lib/main.dart 文件
此应用利用 google_fonts 软件包，将 Roboto 设为整个应用的默认字体。您可以浏览 fonts.google.com，并使用您可以在应用的不同部分找到的字体。
您能以 Header、Paragraph 和 IconAndDetail 的形式使用 lib/src/widgets.dart 文件中的辅助 widget。这些 widget 消除了重复的代码，以减少 HomePage 中所述的页面布局中的杂乱现象。这也可以实现一致的外观和风格。
以下是您的应用在 Android、iOS、Web 和 macOS 上的显示效果：
|
|
|
|
3. 创建和配置 Firebase 项目
显示活动信息能给宾客带来极大的便利，但对自己来说就不是很有用。您需要向应用添加一些动态功能。为此，您需要将 Firebase 关联到您的应用。要开始使用 Firebase，您需要创建并配置 Firebase 项目。
创建 Firebase 项目
- 登录 Firebase。
- 在控制台中，点击添加项目或创建项目。
- 在项目名称字段中，输入 Firebase-Flutter-Codelab，然后点击继续。
- 点击各个项目创建选项。如果出现提示，请接受 Firebase 条款，但跳过设置 Google Analytics（分析），因为您不会在此应用中使用 Google Analytics（分析）。
如需详细了解 Firebase 项目，请参阅了解 Firebase 项目。
该应用使用以下适用于 Web 应用的 Firebase 产品：
- Authentication：允许用户登录您的应用。
- Firestore：将结构化数据保存到云端，并在数据发生变化时即时获得通知。
- Firebase 安全规则：保护您的数据库。
其中一些产品需要特殊配置，或者您需要在 Firebase 控制台中启用它们。
启用电子邮件登录身份验证
- 在 Firebase 控制台的项目概览窗格中，展开构建菜单。
- 点击身份验证 > 开始使用 > 登录方法 > 电子邮件/密码 > 启用 > 保存。
启用 Firestore
Web 应用使用 Firestore 保存聊天消息并接收新的聊天消息。
启用 Firestore：
- 在构建菜单中，依次点击 Firestore 数据库 > 创建数据库。
- 选择以测试模式开始，然后阅读有关安全规则的免责声明。测试模式可确保您在开发过程中可以随意向数据库写入数据。
- 点击下一步，然后选择数据库的位置。您可以使用默认值。位置以后无法更改。
- 点击启用。
4.配置 Firebase
如需将 Firebase 与 Flutter 搭配使用，您需要完成以下任务，将 Flutter 项目配置为正确使用 FlutterFire 库：
- 为您的项目添加
FlutterFire依赖项。 - 在 Firebase 项目中注册所需的平台。
- 下载平台专用的配置文件，然后将其添加到代码中。
在 Flutter 应用的顶级目录中，有 android、ios、macos 和 web 子目录，分别用于存放针对具体平台（iOS 和 Android）的配置文件。
配置依赖项
您需要为在此应用中使用的两款 Firebase 产品（Authentication 和 Firestore）添加 FlutterFire 库。
- 在命令行中，添加以下依赖项：
$ flutter pub add firebase_core
firebase_core 软件包是所有 Firebase Flutter 插件所需的通用代码。
$ flutter pub add firebase_auth
firebase_auth 软件包支持与 Authentication 集成。
$ flutter pub add cloud_firestore
cloud_firestore 软件包支持访问 Firestore 数据存储。
$ flutter pub add provider
firebase_ui_auth 软件包提供了一组 widget 和实用程序，可提高开发者在身份验证流程方面的速度。
$ flutter pub add firebase_ui_auth
您添加了所需的软件包，但还需要配置 iOS、Android、macOS 和 Web runner 项目以正确使用 Firebase。您还可以使用 provider 软件包，它将业务逻辑与显示逻辑分离开来。
安装 FlutterFire CLI
FlutterFire CLI 依赖于底层 Firebase CLI。
- 如果您尚未在您的机器上安装 Firebase CLI，请执行此操作。
- 安装 FlutterFire CLI：
$ dart pub global activate flutterfire_cli
安装后，flutterfire 命令可全局使用。
配置应用
CLI 会从您的 Firebase 项目和所选项目应用中提取信息，以生成特定平台的所有配置。
在应用的根目录中，运行 configure 命令：
$ flutterfire configure
配置命令将指导您完成以下过程：
- 根据
.firebaserc文件或从 Firebase 控制台选择一个 Firebase 项目。 - 确定用于配置的平台，例如 Android、iOS、macOS 和 Web。
- 确定要从中提取配置的 Firebase 应用。默认情况下，CLI 会尝试根据您当前的项目配置自动匹配 Firebase 应用。
- 在项目中生成
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>
如需了解详情，请参阅 Flutter 的桌面支持。
5. 添加回复功能
现在，您已将 Firebase 添加到该应用，接下来可以创建一个 RSVP 按钮来注册 Authentication 用户。对于 Android 原生、iOS 原生和 Web，我们提供了预构建的 FirebaseUI Auth 软件包，但您需要针对 Flutter 构建此功能。
您之前检索的项目包含一组 widget，这些 widget 可以为大多数身份验证流程实现界面。您将实现业务逻辑，将 Authentication 与应用集成。
使用 Provider 软件包添加业务逻辑
使用 provider 软件包在应用的 Flutter widget 树中提供集中式应用状态对象：
- 创建名为
app_state.dart且包含以下内容的新文件：
lib/app_state.dart
import 'package:firebase_auth/firebase_auth.dart'
hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
class ApplicationState extends ChangeNotifier {
ApplicationState() {
init();
}
bool _loggedIn = false;
bool get loggedIn => _loggedIn;
Future<void> init() async {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([
EmailAuthProvider(),
]);
FirebaseAuth.instance.userChanges().listen((user) {
if (user != null) {
_loggedIn = true;
} else {
_loggedIn = false;
}
notifyListeners();
});
}
}
import 语句引入了 Firebase Core 和 Auth，提取了 provider 软件包（使应用状态对象在整个 widget 树中可用），并包含 firebase_ui_auth 软件包中的身份验证 widget。
此 ApplicationState 应用状态对象对此步骤的主要责任是提醒 widget 树，其经过身份验证的状态有更新。
您仅使用提供程序将用户登录状态的状态传达给应用。如需让用户登录，您可以使用 firebase_ui_auth 软件包提供的界面，这是快速引导应用中的登录屏幕的好方法。
集成身份验证流程
- 修改
lib/main.dart文件顶部的 import 语句：
lib/main.dart
import 'package:firebase_ui_auth/firebase_ui_auth.dart'; // new
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; // new
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart'; // new
import 'app_state.dart'; // new
import 'home_page.dart';
- 将应用状态与应用初始化相关联，然后将身份验证流程添加到
HomePage：
lib/main.dart
void main() {
// Modify from here...
WidgetsFlutterBinding.ensureInitialized();
runApp(ChangeNotifierProvider(
create: (context) => ApplicationState(),
builder: ((context, child) => const App()),
));
// ...to here.
}
修改 main() 函数后，提供程序软件包将负责使用 ChangeNotifierProvider widget 实例化应用状态对象。之所以使用以下特定的 provider 类，是因为应用状态对象扩展了 ChangeNotifier 类，该类可让 provider 软件包知道何时重新显示从属 widget。
- 通过创建
GoRouter配置，更新您的应用，以便处理导航到 FirebaseUI 为您提供的不同屏幕的操作：
lib/main.dart
// Add GoRouter configuration outside the App class
final _router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => const HomePage(),
routes: [
GoRoute(
path: 'sign-in',
builder: (context, state) {
return SignInScreen(
actions: [
ForgotPasswordAction(((context, email) {
final uri = Uri(
path: '/sign-in/forgot-password',
queryParameters: <String, String?>{
'email': email,
},
);
context.push(uri.toString());
})),
AuthStateChangeAction(((context, state) {
final user = switch (state) {
SignedIn state => state.user,
UserCreated state => state.credential.user,
_ => null
};
if (user == null) {
return;
}
if (state is UserCreated) {
user.updateDisplayName(user.email!.split('@')[0]);
}
if (!user.emailVerified) {
user.sendEmailVerification();
const snackBar = SnackBar(
content: Text(
'Please check your email to verify your email address'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
context.pushReplacement('/');
})),
],
);
},
routes: [
GoRoute(
path: 'forgot-password',
builder: (context, state) {
final arguments = state.uri.queryParameters;
return ForgotPasswordScreen(
email: arguments['email'],
headerMaxExtent: 200,
);
},
),
],
),
GoRoute(
path: 'profile',
builder: (context, state) {
return ProfileScreen(
providers: const [],
actions: [
SignedOutAction((context) {
context.pushReplacement('/');
}),
],
);
},
),
],
),
],
);
// end of GoRouter configuration
// Change MaterialApp to MaterialApp.router and add the routerConfig
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'Firebase Meetup',
theme: ThemeData(
buttonTheme: Theme.of(context).buttonTheme.copyWith(
highlightColor: Colors.deepPurple,
),
primarySwatch: Colors.deepPurple,
textTheme: GoogleFonts.robotoTextTheme(
Theme.of(context).textTheme,
),
visualDensity: VisualDensity.adaptivePlatformDensity,
useMaterial3: true,
),
routerConfig: _router, // new
);
}
}
根据身份验证流程的新状态，每个屏幕都有与之关联的不同类型的操作。在身份验证中的大多数状态发生变化后，您都可以重新路由到首选屏幕，无论是主屏幕还是其他屏幕（例如个人资料）。
- 在
HomePage类的 build 方法中，将应用状态与AuthFuncwidget 集成：
lib/home_page.dart
import 'package:firebase_auth/firebase_auth.dart' // new
hide EmailAuthProvider, PhoneAuthProvider; // new
import 'package:flutter/material.dart'; // new
import 'package:provider/provider.dart'; // new
import 'app_state.dart'; // new
import 'src/authentication.dart'; // new
import 'src/widgets.dart';
class HomePage extends StatelessWidget {
const HomePage({super.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, _) => AuthFunc(
loggedIn: appState.loggedIn,
signOut: () {
FirebaseAuth.instance.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!',
),
],
),
);
}
}
您将实例化 AuthFunc widget 并将其封装在 Consumer widget 中。使用方 widget 是在应用状态发生变化时，使用 provider 软件包重新构建部分树的常用方法。AuthFunc widget 是您测试的补充 widget。
测试身份验证流程
- 在应用中，点按回复按钮以发起
SignInScreen。
- 输入电子邮件地址。如果您已经注册，系统会提示您输入密码。否则，系统会提示您填写注册表单。
- 请输入少于 6 个字符的密码，检查错误处理流程。如果您已注册，则会看到 的密码。
- 请输入错误的密码，检查错误处理流程。
- 请输入正确的密码。您会看到登录界面，这会为用户提供退出登录的功能。
6. 将消息写入 Firestore
得知有用户会加入，您非常高兴，但您需要允许访客在应用中执行其他操作。假如他们能在留言簿中留言，该怎么办？他们可以告诉大家为什么很高兴参加或希望见到谁。
要存储用户在应用中编写的聊天消息，您可以使用 Firestore。
数据模型
Firestore 是一种 NoSQL 数据库，存储在数据库中的数据会拆分为集合、文档、字段和子集合。您将聊天对话的每条消息作为文档存储在 guestbook 集合中，该集合是顶级集合。
向 Firestore 添加消息
在本部分中，您将为用户添加向数据库写入消息的功能。首先，添加一个表单字段和发送按钮，然后添加将这些元素与数据库连接的代码。
- 创建一个名为
guest_book.dart的新文件，添加一个GuestBook有状态 widget 来构建消息字段和发送按钮的界面元素：
lib/guest_book.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'src/widgets.dart';
class GuestBook extends StatefulWidget {
const GuestBook({required this.addMessage, super.key});
final FutureOr<void> Function(String message) addMessage;
@override
State<GuestBook> 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'),
],
),
),
],
),
),
);
}
}
这里有几个地图注点。首先，实例化一个表单，以便验证消息是否确实包含内容，并在没有内容的情况下向用户显示错误消息。如需验证表单，您可以使用 GlobalKey 访问表单后面的表单状态。如需详细了解密钥及其使用方法，请参阅何时使用密钥。
另请注意，widget 的布局方式是，有一个带有 TextFormField 的 Row 和一个包含 Row 的 StyledButton。另请注意，TextFormField 封装在 Expanded widget 中，这会强制 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 方法使用 guestbook 集合中自动生成的 ID 将消息内容添加到新文档中。
请注意，FirebaseAuth.instance.currentUser.uid 是对 Authentication 为所有已登录用户提供自动生成的唯一 ID 的引用。
- 在
lib/app_state.dart文件中，添加addMessageToGuestBook方法。您将在下一步中将此功能与界面相关联。
lib/app_state.dart
import 'package:cloud_firestore/cloud_firestore.dart'; // new
import 'package:firebase_auth/firebase_auth.dart'
hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
class ApplicationState extends ChangeNotifier {
// Current content of ApplicationState elided ...
// Add from here...
Future<DocumentReference> addMessageToGuestBook(String message) {
if (!_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.
}
连接界面和数据库
您将得到一个界面，用户可以在其中输入他们想要添加到留言簿的文本，并且您可以获得将条目添加到 Firestore 的代码。现在，您只需将这两者关联起来。
- 在
lib/home_page.dart文件中，对HomePagewidget 进行以下更改：
lib/home_page.dart
import 'package:firebase_auth/firebase_auth.dart'
hide EmailAuthProvider, PhoneAuthProvider;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'app_state.dart';
import 'guest_book.dart'; // new
import 'src/authentication.dart';
import 'src/widgets.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, _) => AuthFunc(
loggedIn: appState.loggedIn,
signOut: () {
FirebaseAuth.instance.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.loggedIn) ...[
const Header('Discussion'),
GuestBook(
addMessage: (message) =>
appState.addMessageToGuestBook(message),
),
],
],
),
),
// ...to here.
],
),
);
}
}
您已将此步骤开头添加的两行代码替换为完整实现代码。您再次使用 Consumer<ApplicationState> 将应用状态提供给所呈现的树部分。这样，当有人在界面中输入消息时，您可以对该消息做出回应，并将其发布到数据库中。在下一部分中，您将测试所添加的消息是否已发布到数据库中。
测试发送消息
- 如有必要，请登录应用。
- 输入消息，例如
Hey there!，然后点击发送。
此操作会将消息写入您的 Firestore 数据库。不过，您不会在实际 Flutter 应用中看到该消息，因为您仍然需要实现数据检索，您将在下一步中执行此操作。但是，在 Firebase 控制台的数据库信息中心中，您可以在 guestbook 集合中看到添加的消息。如果您发送更多消息，则会向 guestbook 集合添加更多文档。例如，请参阅以下代码段：
7. 阅读消息
访客可以将消息写入数据库，但还不能在应用中查看这些消息，这一点非常高兴。是时候解决此问题了！
同步邮件
如需显示消息，您需要添加数据更改时触发的监听器，然后创建显示新消息的界面元素。您将代码添加到应用状态，以监听来自应用的新添加消息。
- 创建一个新文件
guest_book_message.dart，添加以下类，以公开您存储在 Firestore 中的数据的结构化视图。
lib/guest_book_message.dart
class GuestBookMessage {
GuestBookMessage({required this.name, required this.message});
final String name;
final String message;
}
- 在
lib/app_state.dart文件中，添加以下导入：
lib/app_state.dart
import 'dart:async'; // new
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart'
hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
import 'guest_book_message.dart'; // new
- 在
ApplicationState中您定义状态和 getter 的部分，添加以下行：
lib/app_state.dart
bool _loggedIn = false;
bool get loggedIn => _loggedIn;
// Add from here...
StreamSubscription<QuerySnapshot>? _guestBookSubscription;
List<GuestBookMessage> _guestBookMessages = [];
List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
// ...to here.
- 在
ApplicationState的初始化部分中，添加以下几行代码，以便在用户登录时订阅对文档集合的查询，并在用户退出时退订：
lib/app_state.dart
Future<void> init() async {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([
EmailAuthProvider(),
]);
FirebaseAuth.instance.userChanges().listen((user) {
if (user != null) {
_loggedIn = true;
_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();
});
} else {
_loggedIn = false;
_guestBookMessages = [];
_guestBookSubscription?.cancel();
}
notifyListeners();
});
}
本部分非常重要，因为您可以在其中对 guestbook 集合构造查询，并处理对该集合的订阅和退订。您将监听该数据流，并从中重建 guestbook 集合中的消息的本地缓存，并存储对此订阅的引用，以便日后退订。这里执行了很多操作，因此您应该在调试程序中探索，看看发生了什么，以获得更清晰的心智模式。如需了解详情，请参阅使用 Firestore 获取实时更新。
- 在
lib/guest_book.dart文件中，添加以下导入：
import 'guest_book_message.dart';
- 在
GuestBookwidget 中，添加消息列表作为配置的一部分，以将这种不断变化的状态连接到界面：
lib/guest_book.dart
class GuestBook extends StatefulWidget {
// Modify the following line:
const GuestBook({
super.key,
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/guest_book.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 widget 封装 build() 方法的先前内容，然后在 Column 子项的尾部添加一个集合，为消息列表中的每条消息生成一个新的 Paragraph。
- 更新
HomePage的正文，以使用新的messages参数正确构造GuestBook：
lib/home_page.dart
Consumer<ApplicationState>(
builder: (context, appState, _) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (appState.loggedIn) ...[
const Header('Discussion'),
GuestBook(
addMessage: (message) =>
appState.addMessageToGuestBook(message),
messages: appState.guestBookMessages, // new
),
],
],
),
),
测试邮件同步
Firestore 会自动并即时地与订阅了该数据库的客户端同步数据。
测试邮件同步：
- 在应用中，找到您之前在数据库中创建的消息。
- 撰写新消息。它们会立即显示。
- 在多个窗口或标签页中打开工作区。邮件会跨窗口和标签页实时同步。
- 可选：在 Firebase 控制台的数据库菜单中，手动删除、修改或添加新消息。所有更改都会显示在界面中。
恭喜！您在应用中读取了 Firestore 文档！
应用预览
|
|
|
|
8. 设置基本安全规则
您最初将 Firestore 设置为使用测试模式，这意味着您的数据库可以进行读取和写入。不过，测试模式只应在开发的早期阶段使用。最佳实践是，在开发应用时为数据库设置安全规则。安全性是应用的结构和行为不可或缺的一部分。
借助 Firebase 安全规则，您可以控制对数据库中的文档和集合的访问权限。灵活的规则语法可让您创建适用于以下情况的规则：从对整个数据库执行的所有写入操作到对特定文档执行的操作。
设置基本安全规则：
- 在 Firebase 控制台的开发菜单中，点击数据库 > 规则。您应该会看到以下默认安全规则，以及一条有关规则公开的警告：
- 确定应用将数据写入的集合：
在 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. 额外步骤：练习所学内容
记录参加者的回复状态
目前，您的应用只允许用户对此活动感兴趣时聊天。此外，只有有人在聊天中说出了你的语音指令，你才能知道对方是否会参加。
在此步骤中，你需要让一切变得井井有条，并让参与者知道参加会的人数。您需要为应用状态添加几项功能。第一项功能是允许已登录用户指定是否参加。第二个是参加人数的计数器。
- 在
lib/app_state.dart文件中，将以下行添加到ApplicationState的存取器部分，以便界面代码能够与此状态交互：
lib/app_state.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/app_state.dart
Future<void> init() async {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([
EmailAuthProvider(),
]);
// 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) {
_loggedIn = true;
_emailVerified = user.emailVerified;
_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 {
_loggedIn = false;
_emailVerified = false;
_guestBookMessages = [];
_guestBookSubscription?.cancel();
_attendingSubscription?.cancel(); // new
}
notifyListeners();
});
}
此代码添加了一个始终订阅的查询以确定参加者的数量，以及另一个仅在用户登录时处于活动状态的查询，以确定用户是否参加。
- 在
lib/app_state.dart文件的顶部添加以下枚举。
lib/app_state.dart
enum Attending { yes, no, unknown }
- 创建一个新文件
yes_no_selection.dart，定义一个充当单选按钮的新 widget：
lib/yes_no_selection.dart
import 'package:flutter/material.dart';
import 'app_state.dart';
import 'src/widgets.dart';
class YesNoSelection extends StatelessWidget {
const YesNoSelection(
{super.key, 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: [
FilledButton(
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),
FilledButton(
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的build()方法以利用YesNoSelection，让已登录的用户指定他们是否参加，并显示活动的参加者人数：
lib/home_page.dart
Consumer<ApplicationState>(
builder: (context, appState, _) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Add from here...
switch (appState.attendees) {
1 => const Paragraph('1 person going'),
>= 2 => Paragraph('${appState.attendees} people going'),
_ => const Paragraph('No one going'),
},
// ...to here.
if (appState.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 控制台的 Firestore 信息中心内查看结果。
应用预览
|
|
|
|
10. 恭喜！
您已使用 Firebase 构建了一个交互式实时 Web 应用！