了解用於 Flutter 的 Firebase

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 開始之前

在此 Codelab 中,您將學習Firebase的一些基礎知識,以創建適用於 Android 和 iOS 的 Flutter 移動應用程序。

先決條件

你會學到什麼

  • 如何使用 Flutter 在 Android、iOS、Web 和 macOS 上構建事件 RSVP 和留言簿聊天應用程序。
  • 如何使用 Firebase 身份驗證對用戶進行身份驗證並使用 Firestore 同步數據。

你需要什麼

以下任何設備:

  • 連接到您的計算機並設置為開發者模式的物理 Android 或 iOS 設備。
  • iOS 模擬器(需要Xcode 工具)。
  • Android 模擬器(需要在Android Studio中設置)。

您還需要以下內容:

  • 您選擇的瀏覽器,例如 Google Chrome。
  • 您選擇的 IDE 或文本編輯器配置了 Dart 和 Flutter 插件,例如Android StudioVisual Studio Code
  • 如果您喜歡生活在邊緣,請使用最新的stableFlutterbeta
  • 用於創建和管理您的 Firebase 項目的 Google 帳戶。
  • Firebase CLI登錄到您的 Google 帳戶。

2.獲取示例代碼

從 GitHub 下載項目的初始版本:

  1. 從命令行克隆flutter-codelabs目錄中的GitHub 存儲庫
git clone https://github.com/flutter/codelabs.git flutter-codelabs

flutter-codelabs目錄包含一組代碼實驗室的代碼。此 Codelab 的代碼位於flutter-codelabs/firebase-get-to-know-flutter目錄中。該目錄包含一系列快照,顯示您的項目在每個步驟結束時的外觀。例如,您在第二步。

  1. 找到第二步的匹配文件:
cd flutter-codelabs/firebase-get-to-know-flutter/step_02

如果您想向前跳轉或查看某個步驟後的內容,請查看以您感興趣的步驟命名的目錄。

導入入門應用

  • 在您首選的 IDE 中打開或導入flutter-codelabs/firebase-get-to-know-flutter/step_02目錄。此目錄包含 Codelab 的起始代碼,其中包含一個尚未正常運行的 Flutter 聚會應用程序。

找到需要工作的文件

此應用程序中的代碼分佈在多個目錄中。這種功能拆分使工作更容易,因為它按功能對代碼進行了分組。

  • 找到以下文件:
    • lib/main.dart :此文件包含主入口點和應用程序小部件。
    • lib/src/widgets.dart :此文件包含一些小部件,以幫助標準化應用程序的樣式。它們構成了起始應用程序的屏幕。
    • lib/src/authentication.dart :此文件包含帶有一組小部件的身份驗證的部分實現,用於為基於 Firebase 電子郵件的身份驗證創建登錄用戶體驗。這些用於身份驗證流程的小部件尚未在入門應用程序中使用,但您很快就會添加它們。

您可以根據需要添加其他文件來構建應用程序的其餘部分。

查看lib/main.dart文件

此應用利用google_fonts包使 Roboto 成為整個應用的默認字體。您可以瀏覽fonts.google.com並在應用程序的不同部分使用您在那裡發現的字體。

您以HeaderParagraphIconAndDetail的形式使用lib/src/widgets.dart文件中的輔助小部件。這些小部件消除了重複的代碼,以減少HomePage中描述的頁面佈局中的混亂情況。這也可以實現一致的外觀和感覺。

以下是您的應用程序在 Android、iOS、Web 和 macOS 上的外觀:

3.創建並配置一個Firebase項目

事件信息的顯示對您的客人來說非常有用,但它本身對任何人都不是很有用。您需要向應用程序添加一些動態功能。為此,您需要將 Firebase 連接到您的應用。要開始使用 Firebase,您需要創建和配置一個 Firebase 項目。

創建一個 Firebase 項目

  1. 登錄到Firebase
  2. 在控制台中,單擊添加項目創建項目
  3. Project name字段中,輸入Firebase-Flutter-Codelab ,然後單擊Continue

4395e4e67c08043a.png

  1. 單擊項目創建選項。如果出現提示,請接受 Firebase 條款,但跳過 Google Analytics 的設置,因為您不會將其用於此應用。

b7138cde5f2c7b61.png

要了解有關 Firebase 項目的更多信息,請參閱了解 Firebase 項目

該應用程序使用以下適用於網絡應用程序的 Firebase 產品:

  • 身份驗證:讓用戶登錄您的應用程序。
  • Firestore:將結構化數據保存在雲端,並在數據發生變化時獲得即時通知。
  • Firebase 安全規則:保護您的數據庫。

其中一些產品需要特殊配置,或者您需要在 Firebase 控制台中啟用它們。

啟用電子郵件登錄身份驗證

  1. 在 Firebase 控制台的項目概覽窗格中,展開構建菜單。
  2. 單擊身份驗證 > 開始 > 登錄方法 > 電子郵件/密碼 > 啟用 > 保存

58e3e3e23c2f16a4.png

啟用 Firestore

該 Web 應用程序使用Firestore來保存聊天消息和接收新的聊天消息。

啟用 Firestore:

  • 構建菜單中,點擊Cloud Firestore > 創建數據庫

99e8429832d23fa3.png

  1. 選擇以測試模式啟動,然後閱讀有關安全規則的免責聲明。測試模式確保您可以在開發過程中自由寫入數據庫。

6be00e26c72ea032.png

  1. 單擊下一步,然後選擇數據庫的位置。您可以使用默認值。您以後無法更改位置。

278656eefcfb0216.png

  1. 單擊啟用

4.配置火力地堡

要將 Firebase 與 Flutter 一起使用,您需要完成以下任務來配置 Flutter 項目以正確使用FlutterFire庫:

  1. FlutterFire依賴項添加到您的項目中。
  2. 在 Firebase 項目上註冊所需的平台。
  3. 下載特定於平台的配置文件,然後將其添加到代碼中。

在您的 Flutter 應用程序的頂級目錄中,有androidiosmacosweb子目錄,它們分別包含 iOS 和 Android 的特定於平台的配置文件。

配置依賴

您需要為您在此應用中使用的兩個 Firebase 產品添加FlutterFire庫:Authentication 和 Firestore。

  • 從命令行添加以下依賴項:
$ flutter pub add firebase_core

firebase_core是所有 Firebase Flutter 插件所需的通用代碼。

$ flutter pub add firebase_auth

firebase_auth支持與身份驗證集成。

$ flutter pub add cloud_firestore

cloud_firestore支持訪問 Firestore 數據存儲。

$ flutter pub add provider

firebase_ui_auth提供了一組小部件和實用程序,以提高開發人員使用身份驗證流程的速度。

$ flutter pub add firebase_ui_auth

您添加了所需的包,但您還需要配置 iOS、Android、macOS 和 Web 運行器項目以正確使用 Firebase。您還可以使用provider來實現業務邏輯與顯示邏輯的分離。

安裝 FlutterFire CLI

FlutterFire CLI 依賴於底層的 Firebase CLI。

  1. 如果您還沒有這樣做,請在您的計算機上安裝Firebase CLI
  2. 安裝 FlutterFire CLI:
$ dart pub global activate flutterfire_cli

安裝後, flutterfire命令在全球範圍內可用。

配置您的應用程序

CLI 從您的 Firebase 項目和選定的項目應用程序中提取信息,以生成特定平台的所有配置。

在您的應用程序的根目錄中,運行configure命令:

$ flutterfire configure

配置命令將指導您完成以下過程:

  1. 根據.firebaserc文件或從 Firebase 控制台選擇一個 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>

有關詳細信息,請參閱桌面對 Flutter 的支持

5.增加回复功能

現在您已將 Firebase 添加到應用程序,您可以創建一個RSVP按鈕來為人們註冊Authentication 。對於 Android native、iOS native 和 Web,有預構建的FirebaseUI Auth包,但您需要為 Flutter 構建此功能。

您之前檢索到的項目包含一組小部件,這些小部件為大多數身份驗證流程實現了用戶界面。您實施業務邏輯以將身份驗證與應用程序集成。

使用Provider包添加業務邏輯

使用provider使集中的應用程序狀態對像在整個應用程序的 Flutter 小部件樹中可用:

  1. 修改lib/main.dart文件頂部的導入:

庫/main.dart

import 'dart:async';                                     // new
import 'package:firebase_auth/firebase_auth.dart'        // new
    hide EmailAuthProvider, PhoneAuthProvider;           // new
import 'package:firebase_core/firebase_core.dart';       // new
import 'package:firebase_ui_auth/firebase_ui_auth.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語句引入了 Firebase Core 和 Auth,引入了使應用程序狀態對像在整個小部件樹中可用的provider包,並包含了來自firebase_ui_auth包的身份驗證小部件。

ApplicationState應用程序狀態對像對這一步有一個主要職責,即提醒小部件樹存在對已驗證狀態的更新。

  1. 將以下類添加到lib/main.dart文件的末尾:

庫/main.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();
    });
  }
}

您僅使用提供程序將用戶登錄狀態的狀態傳達給應用程序。要讓用戶登錄,您可以使用firebase_ui_auth包提供的 UI,這是在您的應用中快速引導登錄屏幕的好方法。

集成身份驗證流程

  1. 將應用程序狀態與應用程序初始化連接起來,然後將身份驗證流程添加到HomePage

庫/main.dart

void main() {
  // Modify from here...
  WidgetsFlutterBinding.ensureInitialized();

  runApp(ChangeNotifierProvider(
    create: (context) => ApplicationState(),
    builder: ((context, child) => const App()),
  ));
  // ...to here.
}

main()函數的修改使提供程序包負責使用ChangeNotifierProvider小部件實例化應用程序狀態對象。您使用這個特定的provider類是因為應用程序狀態對象擴展了ChangeNotifier類,它讓provider包知道何時重新顯示依賴的小部件。

  1. 更新您的應用以處理導航到 FirebaseUI 為您提供的不同屏幕:

庫/main.dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //Start adding here
      initialRoute: '/home',
      routes: {
        '/home': (context) {
          return const HomePage();
        },
        '/sign-in': ((context) {
          return SignInScreen(
            actions: [
              ForgotPasswordAction(((context, email) {
                Navigator.of(context)
                    .pushNamed('/forgot-password', arguments: {'email': email});
              })),
              AuthStateChangeAction(((context, state) {
                if (state is SignedIn || state is UserCreated) {
                  var user = (state is SignedIn)
                      ? state.user
                      : (state as UserCreated).credential.user;
                  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);
                  }
                  Navigator.of(context).pushReplacementNamed('/home');
                }
              })),
            ],
          );
        }),
        '/forgot-password': ((context) {
          final arguments = ModalRoute.of(context)?.settings.arguments
              as Map<String, dynamic>?;

          return ForgotPasswordScreen(
            email: arguments?['email'] as String,
            headerMaxExtent: 200,
          );
        }),
        '/profile': ((context) {
          return ProfileScreen(
            providers: [],
            actions: [
              SignedOutAction(
                ((context) {
                  Navigator.of(context).pushReplacementNamed('/home');
                }),
              ),
            ],
          );
        })
      },
      // end adding here
      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,
      ),
    );
  }
}

根據身份驗證流程的新狀態,每個屏幕都有與之關聯的不同類型的操作。在身份驗證的大多數狀態發生變化後,您可以重新路由回首選屏幕,無論是主屏幕還是其他屏幕,例如個人資料。

  1. HomePage類的構建方法中,將應用程序狀態與AuthFunc小部件集成:

庫/main.dart

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

  @override
  Widget build(BuildContext context) {
    return Consumer<ApplicationState>(
        builder: (context, appState, child) => 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小部件並將其包裝在Consumer小部件中。 Consumer widget 是provider包可用於在應用程序狀態更改時重建樹的一部分的常用方式。 AuthFunc小部件是您測試的補充小部件。

測試身份驗證流程

cdf2d25e436bd48d.png

  1. 在應用程序中,點擊RSVP按鈕以啟動SignInScreen

2a2cd6d69d172369.png

  1. 輸入電子郵件地址。如果您已經註冊,系統會提示您輸入密碼。否則,系統會提示您填寫註冊表。

e5e65065dba36b54.png

  1. 輸入少於六個字符的密碼以檢查錯誤處理流程。如果您已註冊,則會看到密碼。
  2. 輸入錯誤的密碼以檢查錯誤處理流程。
  3. 輸入正確的密碼。您會看到登錄體驗,它為用戶提供了註銷功能。

4ed811a25b0cf816.png

6. 將消息寫入 Firestore

很高興知道用戶來了,但您需要在應用程序中為客人提供其他事情。如果他們可以在留言簿中留言怎麼辦?他們可以分享為什麼他們很高興來或他們希望見到誰。

要存儲用戶在應用中編寫的聊天消息,您可以使用Firestore

數據模型

Firestore 是一個 NoSQL 數據庫,存儲在數據庫中的數據被拆分為集合、文檔、字段和子集合。您將聊天的每條消息作為文檔存儲在gustbook集合中,這是一個頂級集合。

7c20dc8424bb1d84.png

將消息添加到 Firestore

在本節中,您將為用戶添加將消息寫入數據庫的功能。首先,添加一個表單字段和發送按鈕,然後添加將這些元素與數據庫連接起來的代碼。

  1. lib/main.dart文件中,為cloud_firestoredart:async包添加導入:

庫/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';
  1. lib/main.dart文件的末尾,添加一個GuestBook有狀態小部件來構建消息字段和發送按鈕的 UI 元素:

庫/main.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訪問表單背後的表單狀態。有關密鑰以及如何使用它們的更多信息,請參閱何時使用密鑰

還要注意小部件的佈局方式,您有一個帶有TextFormFieldRow和一個包含RowStyledButton 。另請注意, TextFormField包裝在一個Expanded小部件中,這會強制TextFormField填充行中的任何額外空間。要更好地理解為什麼需要這樣做,請參閱了解約束

現在您已經有了一個小部件,可以讓用戶輸入一些文本以添加到留言簿中,您需要將它顯示在屏幕上。

  1. 編輯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)),

雖然這足以顯示小部件,但還不足以做任何有用的事情。您很快就會更新此代碼以使其正常運行。

應用預覽

當用戶點擊SEND時,它會觸發以下代碼片段。它將消息輸入字段的內容添加到數據庫的guestbook集合中。具體來說, addMessageToGuestBook方法將消息內容添加到新文檔中,並在guestbook集合中使用自動生成的 ID。

請注意, FirebaseAuth.instance.currentUser.uid是對身份驗證為所有登錄用戶提供的自動生成的唯一 ID 的引用。

  • lib/main.dart文件中,添加addMessageToGuestBook方法。您將在下一步中將此功能與用戶界面連接起來。

庫/main.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.
}

連接 UI 和數據庫

您有一個 UI,用戶可以在其中輸入他們想要添加到留言簿的文本,並且您有用於將條目添加到 Firestore 的代碼。現在您需要做的就是將兩者連接起來。

  • lib/main.dart文件中,對HomePage小部件進行以下更改:

庫/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, _) => 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>使應用程序狀態可用於您呈現的樹部分。這使您可以對在 UI 中輸入消息並將其發佈到數據庫中的人做出反應。在下一節中,您將測試添加的消息是否已發佈到數據庫中。

測試發送消息

  1. 如有必要,請登錄該應用程序。
  2. 輸入消息,例如Hey there! ,然後點擊發送

此操作會將消息寫入您的 Firestore 數據庫。但是,您在實際的 Flutter 應用程序中看不到該消息,因為您仍然需要實現數據檢索,這將在下一步中執行。但是,在 Firebase 控制台的數據庫儀表板中,您可以在guestbook集合中看到您添加的消息。如果您發送更多消息,您會向您的guestbook收藏添加更多文檔。例如,請參見以下代碼片段:

713870af0b3b63c.png

7.閱讀消息

客人可以將消息寫入數據庫,這很好,但他們還不能在應用程序中看到它們。是時候解決這個問題了!

同步消息

要顯示消息,您需要添加在數據更改時觸發的偵聽器,然後創建顯示新消息的 UI 元素。您將代碼添加到應用程序狀態,以偵聽來自應用程序的新添加消息。

  1. GuestBook小部件之前的lib/main.dart文件中,添加以下類以公開您存儲在 Firestore 中的數據的結構化視圖。

庫/main.dart

class GuestBookMessage {
  GuestBookMessage({required this.name, required this.message});
  final String name;
  final String message;
}
  1. 在定義狀態和 getter 的ApplicationState部分,添加以下行:

庫/main.dart

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  // Add from here...
  StreamSubscription<QuerySnapshot>? _guestBookSubscription;
  List<GuestBookMessage> _guestBookMessages = [];
  List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
  // ...to here.
  1. ApplicationState的初始化部分,添加以下行以在用戶登錄時訂閱對文檔集合的查詢,並在用戶註銷時取消訂閱:

庫/main.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 獲取實時更新

  1. GuestBook小部件中,添加消息列表作為配置的一部分,以將這種不斷變化的狀態連接到用戶界面:

庫/main.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();
}
  1. _GuestBookState中,修改build方法以暴露此配置:

庫/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小部件包裝build()方法的先前內容,然後在Column的子項的尾部添加一個集合,以便為消息列表中的每條消息生成一個新的Paragraph

  1. 更新HomePage的主體以使用新的messages參數正確構造GuestBook

庫/main.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 自動即時與訂閱數據庫的客戶端同步數據。

測試消息同步:

  1. 在應用程序中,找到您之前在數據庫中創建的消息。
  2. 寫新消息。它們立即出現。
  3. 在多個窗口或選項卡中打開您的工作區。消息在窗口和選項卡之間實時同步。
  4. 可選:在 Firebase 控制台的數據庫菜單中,手動刪除、修改或添加新消息。所有更改都顯示在 UI 中。

恭喜!您在應用中閱讀 Firestore 文檔!

應用預覽

8.設置基本的安全規則

您最初將 Firestore 設置為使用測試模式,這意味著您的數據庫已打開以進行讀寫。但是,您應該只在開發的早期階段使用測試模式。作為最佳實踐,您應該在開發應用程序時為數據庫設置安全規則。安全性是應用程序結構和行為不可或缺的一部分。

Firebase 安全規則可讓您控制對數據庫中文檔和集合的訪問。靈活的規則語法讓您可以創建匹配任何內容的規則,從對整個數據庫的所有寫入到對特定文檔的操作。

設置基本安全規則:

  1. 在 Firebase 控制台的Develop菜單中,單擊Database > Rules 。您應該看到以下默認安全規則和有關公開規則的警告:

7767a2d2e64e7275.png

  1. 識別應用寫入數據的集合:

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。

  1. 將讀寫規則添加到您的規則集中:
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;
    }
  }
}

現在,只有登錄用戶才能閱讀留言簿中的消息,但只有消息的作者才能編輯消息。

  1. 添加數據驗證以確保文檔中存在所有預期的字段:
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 狀態

現在,您的應用只允許人們在對活動感興趣時聊天。此外,您知道某人是否來的唯一方法是當他們在聊天中這樣說時。

在這一步中,您將組織起來並讓人們知道有多少人來了。您向應用程序狀態添加了一些功能。第一個是登錄用戶可以指定他們是否參加。第二個是有多少人參加的計數器。

  1. lib/main.dart文件中,將以下行添加到訪問器部分,以便 UI 代碼可以與此狀態交互:

庫/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});
  }
}
  1. 更新ApplicationStateinit()方法如下:

庫/main.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) {
        _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();
    });
  }

此代碼添加一個始終訂閱的查詢以確定與會者的數量,以及僅在用戶登錄時才處於活動狀態的第二個查詢以確定用戶是否參加。

  1. GuestBookMessage聲明之後添加以下枚舉:

庫/main.dart

enum Attending { yes, no, unknown }
  1. 定義一個新的小部件,其作用類似於舊的單選按鈕:

庫/main.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: [
              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'),
              ),
            ],
          ),
        );
    }
  }
}

它以不確定狀態開始,既沒有選擇Yes沒有選擇 No。一旦用戶選擇了他們是否參加,您就會顯示該選項用填充按鈕突出顯示,而另一個選項則用平面渲染後退。

  1. 更新HomePagebuild()方法以利用YesNoSelection ,使登錄用戶能夠指定他們是否參加,並顯示活動的參加者人數:

庫/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.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集合中。

  1. 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;
    }
  }
}

這讓每個人都可以閱讀與會者列表,因為那裡沒有私人數據,但只有創建者可以更新它。

  1. 添加數據驗證以確保文檔中存在所有預期的字段:
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;

    }
  }
}
  1. 可選:在應用程序中,單擊按鈕以在 Firebase 控制台的 Firestore 儀表板中查看結果。

應用預覽

10. 恭喜!

您使用 Firebase 構建了一個交互式實時網絡應用程序!

學到更多