Flutter社區(qū)

北半球的冬意已至，黃葉與氣溫均隨風(fēng)而落。年終的最后一個(gè) Flutter 穩(wěn)定版本 已悄然來(lái)到你的面前。讓我們向 Flutter 2.8 打聲招呼～

本次更新包含了 207 位貢獻(xiàn)者和 178 位審核者 的辛勤勞作，所有人共同產(chǎn)出了 2424 個(gè) PR，關(guān)閉了 2976 個(gè) issue。在此特別感謝本次發(fā)布中最突出的社區(qū)貢獻(xiàn)者: 來(lái)自 VGV 的 Flutter 開(kāi)發(fā)工程師 Bartosz Selwesiuk，他為 Web 平臺(tái)的 camera 插件并提交了 23 個(gè) PR。

以上的所有產(chǎn)出讓 Flutter 引擎和開(kāi)發(fā)者工具 (DevTools) 都有了非常顯著的性能提升，同時(shí)帶來(lái)的還有 Google 移動(dòng)端廣告 SDK Flutter 版本的穩(wěn)定版發(fā)布、一系列針對(duì) Firebase 的新功能和優(yōu)化、Flutter WebView 3.0、新的 Flutter Favorite package、向桌面端穩(wěn)定版邁出的一大步，以及支持更多 package 的新版 DartPad。讓我們一起來(lái)看看吧！

性能提升

Flutter 的首要目標(biāo)是一如既往地保證其質(zhì)量。我們花費(fèi)了大量時(shí)間以確保 Flutter 在多種多樣的設(shè)備上都能流暢且穩(wěn)定地運(yùn)行。

應(yīng)用啟動(dòng)性能

本次更新優(yōu)化了應(yīng)用啟動(dòng)的延遲。我們?cè)趽碛幸话偃f(wàn)行以上的代碼量的 GPay 應(yīng)用上進(jìn)行了測(cè)試，以確保改動(dòng)在實(shí)際生產(chǎn)的應(yīng)用上有效。這些改動(dòng)將 GPay 在低端 Android 設(shè)備上啟動(dòng)的時(shí)間減少了約 50%、高端設(shè)備上減少了約 10%。

我們對(duì) Flutter 調(diào)用 Dart VM 的 GC 策略也做了一些改進(jìn)，以此避免在程序啟動(dòng)期間出現(xiàn)不合時(shí)宜的 GC。例如，在 Android 設(shè)備上渲染出第一幀前，F(xiàn)lutter 僅在 TRIM_LEVEL_RUNNING_CRITYCAL 及高于其等級(jí)的信號(hào)出現(xiàn)時(shí)，通知 Dart VM 有內(nèi)存壓力。在本地測(cè)試中，低端 Android 設(shè)備的初始幀出現(xiàn)間隔時(shí)間最多減少了約 300ms。

在先前的 Flutter 版本中，出于謹(jǐn)慎考慮，在創(chuàng)建 PlatformView 時(shí)會(huì)阻塞平臺(tái)線(xiàn)程。在經(jīng)過(guò)仔細(xì)的推理和測(cè)試后，我們刪除了部分序列化的步驟，使得 GPay 在低端設(shè)備上的啟動(dòng)時(shí)間至少減少了 100ms。

長(zhǎng)久以來(lái)，在初始化首個(gè) Dart isolate 前初始化默認(rèn)的字體管理器會(huì)引入人為的延遲。由于它是首要的延遲瓶頸，所以 將默認(rèn)字體管理器的初始化延遲 到與首個(gè) Dart isolate 同時(shí)運(yùn)行，降低了啟動(dòng)的延遲，并讓上述的所有啟動(dòng)優(yōu)化的表現(xiàn)更加明顯。

應(yīng)用內(nèi)存

由于 Flutter 會(huì)盡可能快地加載 Dart VM 的服務(wù) isolate，并將其和綁定在應(yīng)用內(nèi)的 AOT 代碼一并加載到內(nèi)存中，這會(huì)導(dǎo)致 Flutter 開(kāi)發(fā)人員在部分內(nèi)存 有限制的設(shè)備上難以追蹤內(nèi)存指標(biāo)。在 Flutter 2.8 版本中，Android 設(shè)備上 Dart VM 的服務(wù) isolate 已被拆分至單獨(dú)的 bundle 中，可以單獨(dú)加載，減少了在其加載前約 40MB 的內(nèi)存使用。原本 Dart VM 向操作系統(tǒng)發(fā)送 AOT 程序的內(nèi)存用量的通知，已轉(zhuǎn)由一個(gè)無(wú)需多次讀取的文件支持，后續(xù)的內(nèi)存占用量進(jìn)一步減少了約 10%。因此，先前保存了文件數(shù)據(jù)拷貝的內(nèi)存可以回收并用于其他用途。

性能分析

某些場(chǎng)景下，開(kāi)發(fā)者希望能同時(shí)看到 Flutter 和 Android 的性能追蹤事件，又或者是在生產(chǎn)模式下查看追蹤事件來(lái)更好地了解應(yīng)用的性能問(wèn)題。為了這一需求，F(xiàn)lutter 2.8 現(xiàn)在可以選擇在應(yīng)用啟動(dòng)后，將性能追蹤事件發(fā)送至 Android 的事件記錄器，在生產(chǎn)模式下也同樣如此。

此外，一些開(kāi)發(fā)人員想要更多的關(guān)于光柵緩存行為的性能跟蹤信息，以減少制作動(dòng)畫(huà)效果時(shí)的卡頓，這允許 Flutter 快速地對(duì)昂貴的、重復(fù)使用的圖片進(jìn)行復(fù)用而不是重新繪制。性能跟蹤中的新的 流事件 讓開(kāi)發(fā)人員可以跟蹤光柵緩存圖片的生命周期。

Flutter 開(kāi)發(fā)者工具

對(duì)于調(diào)試性能問(wèn)題，新版的開(kāi)發(fā)者工具 (DevTools) 添加了一個(gè)新的「增強(qiáng)跟蹤」功能，用來(lái)幫助開(kāi)發(fā)者診斷消耗較大的構(gòu)建、布局和繪制操作引起的 UI 卡頓。

啟用任何一個(gè)追蹤功能后，時(shí)間軸中將視情況展示 Widget 的構(gòu)建、RenderObject 布局和 RenderObject 繪制的事件。

此外，新版的開(kāi)發(fā)者工具也增加了應(yīng)用啟動(dòng)性能的分析支持。該配置文件包含了從 Dart VM 初始化到第一幀 Flutter 渲染的 CPU 樣本。在你按下「Profile app start up」按鈕并加載應(yīng)用啟動(dòng)配置文件后，你將看到為配置文件選擇了「AppStartUp」標(biāo)簽。你還可以通過(guò)在可用用戶(hù)標(biāo)簽列表中選擇此用戶(hù)標(biāo)簽過(guò)濾器（如果存在）來(lái)加載應(yīng)用啟動(dòng)配置文件。選擇此標(biāo)簽會(huì)顯示你的應(yīng)用啟動(dòng)的個(gè)人資料數(shù)據(jù)。

Web 平臺(tái)的平臺(tái)視圖 (PlatformView)

不僅僅是 Android 和 iOS 平臺(tái)獲得了性能提升，本次發(fā)布同時(shí)包含了對(duì) Flutter Web 平臺(tái)視圖的性能優(yōu)化。平臺(tái)視圖是從宿主平臺(tái)向 Flutter 嵌入 UI 組件的媒介。Flutter Web 使用 HtmlElementView widget 實(shí)現(xiàn)了這一功能，讓你能在 Flutter Web 應(yīng)用中嵌入 HTML 元素。如果你正在使用 google_maps_flutter 插件或 video_player 插件的 Web 版本，或者你正在遵循 Flutter 團(tuán)隊(duì)關(guān)于 如何優(yōu)化網(wǎng)絡(luò)上顯示圖像 的建議，那說(shuō)明你已經(jīng)在使用平臺(tái)視圖了。

在之前版本的 Flutter 中，嵌入平臺(tái)視圖會(huì)創(chuàng)建一個(gè)新的 canvas，每嵌入一個(gè)平臺(tái)視圖都會(huì)新增一個(gè) canvas。
創(chuàng)建額外的 canvas 是十分消耗性能的操作，因?yàn)槊總€(gè) canvas 的大小都與整個(gè)窗口相等。在 Flutter 2.8 中，將 復(fù)用為先前的平臺(tái)視圖創(chuàng)建的 canvas。因此，你不會(huì)在應(yīng)用的整個(gè)生命周期內(nèi)產(chǎn)生每秒 60 倍的成本，而是只有一次創(chuàng)建的成本。這意味著你可以在 Web 應(yīng)用中擁有多個(gè) HtmlElementView 實(shí)例而不會(huì)降低性能，同時(shí)還可以減少使用平臺(tái)視圖時(shí)的滾動(dòng)卡頓。

生態(tài)

Flutter 不僅僅是框架、引擎和工具——pub.dev 上現(xiàn)有超過(guò) 2w 個(gè)與 Flutter 兼容的包和插件，而且每天都在增加。Flutter 開(kāi)發(fā)人員大量的日常操作也是龐大的生態(tài)系統(tǒng)的一部分，所以讓我們來(lái)看看自上一個(gè)版本以來(lái) Flutter 生態(tài)系統(tǒng)中有什么改變。

適用于 Flutter 廣告的 Google 廣告

首先也是最重要的是，Google Mobile SDK for Flutter 已于 11 月正式發(fā)布。此版本支持 5 種廣告格式，集成了 AdMob 和 Ad Manager 支持，并包含一個(gè)新的中轉(zhuǎn)功能的測(cè)試版，可以幫助你優(yōu)化廣告展現(xiàn)的效果。有關(guān)將 Google Ads 集成到 Flutter 應(yīng)用以及其他貨幣化選項(xiàng)的更多信息，請(qǐng)查看 Flutter 網(wǎng)站上的頁(yè)面。

WebView 3.0

這次 Flutter 附帶的另一個(gè)新版本是 webview_flutter 插件 的 3.0 版本。因?yàn)樾鹿δ艿臄?shù)量增加，我們提升了主要版本號(hào)，但也因?yàn)?Web 視圖在 Android 上的工作方式可能發(fā)生了重大變化。在之前的 webview_flutter 版本中，Hybrid composition 已經(jīng)可用，但不是默認(rèn)的。而現(xiàn)在它修復(fù)了先前默認(rèn)以虛擬顯示模式運(yùn)行的許多問(wèn)題。
根據(jù)用戶(hù)反饋和我們的問(wèn)題跟蹤，我們認(rèn)為是時(shí)候讓 Hybrid composition 成為默認(rèn)設(shè)置了。此外，webview_flutter 還增加了一些呼聲極高的功能:

• 支持使用 POST 和 GET 來(lái)加載內(nèi)容
• 加載文件或字符串內(nèi)容為 HTML
• 支持透明背景
• 在加載內(nèi)容前設(shè)置 Cookies

此外，在 3.0 版本中，webview_flutter 為新平臺(tái)提供了初步支持: Flutter Web。已經(jīng)有很多人要求能夠在 Flutter Web 應(yīng)用中托管 Web 視圖，這允許開(kāi)發(fā)者利用單個(gè)源代碼庫(kù)構(gòu)建移動(dòng)或 Web 應(yīng)用。在 Flutter Web 應(yīng)用中托管 Web 視圖是什么樣的？從編寫(xiě)代碼的角度來(lái)看，其實(shí)是一樣的:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void main() {
  runApp(const MaterialApp(home: HomePage()));
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();

    // required while web support is in preview
    if (kIsWeb) WebView.platform = WebWebViewPlatform();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('Flutter WebView example')),
    body: const WebView(initialUrl: 'https://flutter.dev'),
  ;
}

在 Flutter Web 上運(yùn)行時(shí)，它會(huì)按你的預(yù)期工作:

請(qǐng)注意，當(dāng)前 webview_flutter 的 web 實(shí)現(xiàn)有許多限制，因?yàn)樗鞘褂?iframe 構(gòu)建的，
iframe 僅支持簡(jiǎn)單的 URL 加載，無(wú)法控制加載的內(nèi)容或與加載的內(nèi)容交互。
但是，由于需求呼聲太高，我們決定將 webview_flutter_web 作為未經(jīng)認(rèn)可的插件提供。
如果你想嘗試一下，請(qǐng)將以下內(nèi)容添加到你的 pubspec.yaml 中:

dependencies:
  webview_flutter: ^3.0.0
  webview_flutter_web: ^0.1.0 # 顯式依賴(lài)未經(jīng)認(rèn)可的插件

如果你對(duì) webview_flutter v3.0 有任何反饋，無(wú)論是否是關(guān)于 Web 平臺(tái)，請(qǐng) 將問(wèn)題提交到 Flutter 倉(cāng)庫(kù)中。此外，如果你之前沒(méi)有使用過(guò) webview 或者想復(fù)習(xí)一下，請(qǐng)查看 新的 webview codelab，它將帶你逐步完成在 Flutter 應(yīng)用中托管 Web 內(nèi)容的過(guò)程。

Flutter Favorites 項(xiàng)目

Flutter 生態(tài)系統(tǒng)委員會(huì)再次召開(kāi)會(huì)議，將以下 package 指定為 Flutter Favorite 的 package:

• 新路由 API (又名 Navigator 2) 的三個(gè)自定義路由 package: beamer、routemaster 和 go_router；
• drift: 對(duì) Flutter 和 Dart 已經(jīng)功能強(qiáng)大且流行的響應(yīng)式持久性庫(kù)的重命名，基于 sqlite 構(gòu)建；
• freezed: 一個(gè) Dart「語(yǔ)言補(bǔ)丁」，為定義模型、克隆對(duì)象、模式匹配等提供簡(jiǎn)單的語(yǔ)法；
• dart_code_metrics: 一個(gè)幫助您分析和提高代碼質(zhì)量的靜態(tài)分析工具；
• 以及有著漂亮界面的 package: flex_color_scheme、flutter_svg、feedback、toggle_switch 和 auto_size_text。

祝賀這些 package 的作者，并感謝你通過(guò)你的辛勤工作支持 Flutter 社區(qū)。如果你有興趣提名你最喜歡的 Flutter package 加入 Flutter Favorite 嘉獎(jiǎng)，請(qǐng)按照 Flutter Favorite 計(jì)劃頁(yè)面 上的指南和說(shuō)明進(jìn)行操作。

特定平臺(tái)的插件

如果你是 package / 插件作者，你需要聲明和實(shí)現(xiàn)支持哪些平臺(tái)。如果你正在使用特定于平臺(tái)的原生代碼構(gòu)建插件，你可以 使用項(xiàng)目 pubspec.yaml 中的 pluginClass 屬性
來(lái)實(shí)現(xiàn)，該屬性將指定提供原生功能的原生類(lèi)名:

flutter:
  plugin:
    platforms:
      android:
        package: com.example.hello
        pluginClass: HelloPlugin
      ios:
        pluginClass: HelloPlugin

然而，隨著 Dart FFI 變得更加成熟，有可能使用 100% 的 Dart 實(shí)現(xiàn)特定平臺(tái)的功能，就像 path_provider_windows package 所做的那樣。在這種情況下，你沒(méi)有任何本地類(lèi)可以使用，但你仍然希望將你的插件指定為僅支持某些平臺(tái)。此時(shí)你可以改用 dartPluginClass 屬性:

flutter:
  plugin:
    implements: hello
    platforms:
      windows:
        dartPluginClass: HelloPluginWindows

經(jīng)過(guò)這樣的設(shè)置后，即使你沒(méi)有任何本機(jī)代碼，也可以為特定平臺(tái)定制插件。你還必須提供 Dart 插件的類(lèi)，有關(guān)詳細(xì)內(nèi)容，你可以在 Flutter 文檔上閱讀 Dart 平臺(tái)實(shí)現(xiàn)文檔 以了解更多。

Firebase 相關(guān)的更新

Flutter 生態(tài)中另一個(gè)重要組成是 FlutterFire，大約有三分之二的 Flutter 應(yīng)用都在使用它。這次穩(wěn)定版增加了一系列新的功能，方便開(kāi)發(fā)者們更好的在 Flutter 里使用 Firebase:

• 所有 FlutterFire 插件都從測(cè)試版畢業(yè)，「成長(zhǎng)」為穩(wěn)定版
• DartPad 開(kāi)始支持部分 Firebase 服務(wù)，方便線(xiàn)上使用和體驗(yàn)
• 更方便構(gòu)建認(rèn)證和在實(shí)時(shí)查詢(xún) Firestore 數(shù)據(jù)的 UI 界面
• Flutter 中使用 Firestore Object/Document 映射的支持進(jìn)入 Alpha 版

生產(chǎn)質(zhì)量

The FlutterFire plugins 幾乎已經(jīng)全部從測(cè)試版轉(zhuǎn)為文穩(wěn)定版，可用于生產(chǎn)環(huán)境。

Android、iOS 和網(wǎng)頁(yè)版的插件已轉(zhuǎn)為穩(wěn)定版，包括 Analytics、Dynamic Links、In-App Messaging、Performance Monitoring、Realtime Database、Remote Config 和 Installations。有些 Firebase 庫(kù)本身在部分平臺(tái)上仍處于測(cè)試階段，所以它的 Flutter 插件也會(huì)是測(cè)試版狀態(tài)，比如 App Check 在 macOS 平臺(tái)。但類(lèi)似實(shí)時(shí)數(shù)據(jù)庫(kù) (Realtime Database)、分析 (Analytics)、遠(yuǎn)程配置 (Remote Config) 等 FlutterFire 插件已經(jīng)在生產(chǎn)環(huán)境中可用了，可以選擇試試看！

Firebase 初始化僅需在 Dart 代碼中配置即可

因?yàn)檫@些 package 已經(jīng)達(dá)到生產(chǎn)質(zhì)量，現(xiàn)在你 只用在 Dart 代碼中配置，就可以完成 Firebase 的初始化了。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // generated via `flutterfire` CLI

Future<void> main() async {
  // initialize firebase across all supported platforms
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  runApp(MyApp());
}

在 firebase_options.dart 文件中定義的各種配置信息，就可以在選擇的每個(gè)支持的平臺(tái)里初始化 Firebase:

static const FirebaseOptions web = FirebaseOptions(
  apiKey: 'AIzaSyCZFKryCEiKhD0JMPeq_weJguspf09h7Cg',
  appId: '1:111079797892:web:b9195888086158195ffed1',
  messagingSenderId: '111079797892',
  projectId: 'flutterfire-fun',
  authDomain: 'flutterfire-fun.firebaseapp.com',
  storageBucket: 'flutterfire-fun.appspot.com',
  measurementId: 'G-K029Y6KJDX',
);

如果你想為每個(gè)平臺(tái)的初始化自定義數(shù)據(jù)結(jié)構(gòu)的話(huà)，請(qǐng)使用這個(gè) flutterfire 命令行工具完成:

這個(gè)命令行工具會(huì)從每個(gè)平臺(tái)的子文件夾中找到唯一的 bundle ID，進(jìn)而用它來(lái)查找以及創(chuàng)建匹配的特定平臺(tái)下的 Firebase 工程詳情。這意味著你將省去下載 .json文件到 Android 工程、下載 .plist 文件到 iOS 和 macOS 工程的時(shí)間了，當(dāng)然，也無(wú)需再?gòu)?fù)制粘貼代碼到你的 Web 工程了。換句話(huà)說(shuō)，無(wú)論你的應(yīng)用要為哪些平臺(tái)初始化 Firebase，這句代碼都可以幫你做到。當(dāng)然，這也可能不是唯一一處初始化代碼的地方，比如你需要在 Android 或 iOS 中創(chuàng)建 Crashlytics 調(diào)試符號(hào) (dSYM) 的時(shí)候。但至少可以針對(duì)新的 Firebase 工程能夠快速跑起來(lái)。

在 DartPad 中使用 Firebase

由于我們可以只在 Dart 代碼中初始化并使用 FlutterFire，那 DartPad 自然也就支持使用 Firebase 啦:

這里有一個(gè)使用 Flutter 和 Firebase 構(gòu)建的在線(xiàn)聊天的演示，所有這些都可以在 DartPad 中直接使用而無(wú)需安裝任何內(nèi)容。DartPad 對(duì) Firebase 的支持已經(jīng)包括了核心 API、身份驗(yàn)證和 Firestore，隨著時(shí)間的推進(jìn)，未來(lái) DartPad 會(huì)支持更多 Firebase 服務(wù)。

另一個(gè)支持是在 FlutterFire 文檔中直接內(nèi)嵌了 DartPad 實(shí)例，比如 Firestore 的示例頁(yè)面:

在這個(gè)示例中，你將看到 Cloud Firestore 的文檔以及 示例應(yīng)用 的代碼，并且可以在瀏覽器中直接運(yùn)行和編輯，無(wú)需安裝任何軟件。

Firebase 用戶(hù)界面

大多數(shù)用戶(hù)都有身份驗(yàn)證的流程，包括但不僅限于通過(guò)郵箱和密碼或者第三方賬號(hào)登陸等。使用 Firebase 身份認(rèn)證 (Authentication) 服務(wù)，你就可以完成創(chuàng)建新用戶(hù)、郵箱認(rèn)證、重置密碼，甚至是短信兩步驗(yàn)證、使用手機(jī)號(hào)碼登錄、將多個(gè)賬號(hào)合并為一個(gè)賬號(hào)等功能。直到今天，開(kāi)發(fā)者們?nèi)孕枰孕衼?lái)完成這些邏輯和 UI。

今天我們很希望大家嘗試一個(gè)新的 package，名為 flutterfire_ui。這個(gè) package 可以用少量的代碼構(gòu)建一個(gè)基本的身份驗(yàn)證體驗(yàn)，例如，在 Firebase 項(xiàng)目中設(shè)置了使用郵箱和 Google 賬號(hào)登陸:

通過(guò)這個(gè)配置你可以通過(guò)下面的代碼構(gòu)建一個(gè)身份驗(yàn)證:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutterfire_ui/auth.dart';
import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: AuthenticationGate(),
      );
}

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

  @override
  Widget build(BuildContext context) => StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          // User is not signed in - show a sign-in screen
          if (!snapshot.hasData) {
            return SignInScreen(
              providerConfigs: [
                EmailProviderConfiguration(),
                GoogleProviderConfiguration(
                  clientId: 'xxxx-xxxx.apps.googleusercontent.com',
                ),
              ],
            );
          }

          return HomePage(); // show your app’s home page after login
        },
      );
}

這段代碼將首先初始化 Firebase，然后會(huì)發(fā)現(xiàn)用戶(hù)尚未登陸進(jìn)而顯示登錄界面，SigninScreen widget 配置了郵件和 Google 賬號(hào)登陸，代碼里還使用了 firebase_auth package 來(lái)監(jiān)測(cè)用戶(hù)的身份驗(yàn)證狀態(tài)，因此一旦用戶(hù)登錄完成，你就可以顯示接下來(lái)的應(yīng)用內(nèi)容。使用這個(gè)代碼片段，你將可以在所有 Firebase 支持的平臺(tái)上完成身份驗(yàn)證功能。

再加入一些其他配置的話(huà)，你還可以添加一些圖像和自定義文本 (詳情見(jiàn) 本文檔)，從而為你提供更全面的用戶(hù)身份驗(yàn)證體驗(yàn):

上面這個(gè)截圖是移動(dòng)端的身份認(rèn)證，不過(guò)因?yàn)?flutterfire_ui 的 UI 是響應(yīng)性設(shè)計(jì)，因此在桌面瀏覽器上，它會(huì)是這樣的效果:

用戶(hù)可以使用郵箱地址和密碼直接完成登陸，如果他們選擇使用通過(guò)谷歌身份驗(yàn)證登陸，不論是在移動(dòng)端、Web 端還是桌面端，則將會(huì)看到常見(jiàn)的 Google 身份驗(yàn)證流程。如果用戶(hù)還沒(méi)有賬戶(hù)，他們可以點(diǎn)擊注冊(cè)按鈕進(jìn)入注冊(cè)流程。用戶(hù)登陸之后就會(huì)有電子郵件驗(yàn)證、密碼重置、登出以及社交賬戶(hù)綁定功能。通過(guò)電子郵件和密碼的身份驗(yàn)證適用于所有平臺(tái)，并支持使用 Google、Facebook 和 Twitter 賬號(hào)登陸，以及在 iOS 系統(tǒng)上支持通過(guò) Apple ID 登陸。flutterfire_ui 的身份認(rèn)證支持多種場(chǎng)景和導(dǎo)航方案以及自定義和本地化選項(xiàng)等。查看 FlutterFire UI 的文檔 了解更多。

此外，身份認(rèn)證不是 flutterfire_ui 唯一支持的 Flutter UI 的相關(guān)功能。它還可以向用戶(hù)展示一個(gè)來(lái)自 Firebase 數(shù)據(jù)查詢(xún)并無(wú)限滾動(dòng)的數(shù)據(jù)列表，這個(gè)版本也包含了一個(gè) FirestoreListView 可以使用:

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

  // live Firestore query
  final usersCollection = FirebaseFirestore.instance.collection('users');

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: FirestoreListView<Map>(
          query: usersCollection,
          pageSize: 15,
          primary: true,
          padding: const EdgeInsets.all(8),
          itemBuilder: (context, snapshot) {
            final user = snapshot.data();

            return Column(
              children: [
                Row(
                  children: [
                    CircleAvatar(
                      child: Text((user['firstName'] ?? 'Unknown')[0]),
                    ),
                    const SizedBox(width: 8),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          '${user['firstName'] ?? 'unknown'} '
                          '${user['lastName'] ?? 'unknown'}',
                          style: Theme.of(context).textTheme.subtitle1,
                        ),
                        Text(
                          user['number'] ?? 'unknown',
                          style: Theme.of(context).textTheme.caption,
                        ),
                      ],
                    ),
                  ],
                ),
                const Divider(),
              ],
            );
          },
        ),
      );
}

實(shí)際的運(yùn)行效果如下:

或者你想為用戶(hù)提供對(duì)表格數(shù)據(jù)的增刪改查功能，你可以使用 FirestoreDataTable:

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

  // live Firestore query
  final usersCollection = FirebaseFirestore.instance.collection('users');

  @override
  Widget build(BuildContext context) {
    return FirestoreDataTable(
      query: usersCollection,
      columnLabels: const {
        'firstName': Text('First name'),
        'lastName': Text('Last name'),
        'prefix': Text('Prefix'),
        'userName': Text('User name'),
        'email': Text('Email'),
        'number': Text('Phone number'),
        'streetName': Text('Street name'),
        'city': Text('City'),
        'zipCode': Text('Zip code'),
        'country': Text('Country'),
      },
    );
  }
}

效果是這樣的:

有關(guān)身份驗(yàn)證、列表視圖和數(shù)據(jù)表的更多信息，請(qǐng)查閱 flutterfire_ui 文檔。這個(gè) package 仍處于預(yù)覽狀態(tài)，可能會(huì)加入更多新的特性，如果你有任何使用的問(wèn)題或者新的特性需求，請(qǐng) 在 GitHub repo 里參與我們的討論。

Firestore Object/Document 映射 (ODM)

我們同時(shí)發(fā)布了 Firestore 對(duì)象 / 文檔映射 (ODM) 的 Alpha 版本，F(xiàn)irestore ODM 的目標(biāo)是讓開(kāi)發(fā)者更高效的通過(guò)類(lèi)型安全、結(jié)構(gòu)化對(duì)象和方法來(lái)簡(jiǎn)化 Firestore 的使用。通過(guò)生成代碼，你可以以類(lèi)型安全的方式對(duì)數(shù)據(jù)進(jìn)行建模，從而改進(jìn)與文檔和集合交互的語(yǔ)法：

@JsonSerializable()
class Person {
  Person({required this.name, required this.age});

  final String name;
  final int age;
}

@Collection<Person>(‘/persons’)
final personsRef = PersonCollectionReference();

有了這些類(lèi)型，你可以執(zhí)行類(lèi)型安全的查詢(xún):

personsRef.whereName(isEqualTo: 'Bob');
personsRef.whereAge(isGreaterThan: 42);

ODM 還支持強(qiáng)類(lèi)型子集合，也提供了一些內(nèi)置、優(yōu)化過(guò)的 widget 來(lái)重建其 select 功能，你可以在 Firestore ODM 文檔 中閱讀相關(guān)內(nèi)容。因?yàn)檫@個(gè)還是 Alpha 版本，請(qǐng)盡可能 在 GitHub repo 里向我們提出反饋。

桌面平臺(tái)更新

Flutter 2.8 版本在 Windows、macOS 和 Linux 穩(wěn)定版本的道路上又邁出了一大步。
我們的目標(biāo)質(zhì)量標(biāo)準(zhǔn)很高，包括國(guó)際化和本地化支持，例如 新的中文輸入法支持、韓語(yǔ)輸入法支持 以及剛剛合并的 Kanji（日文）輸入法 支持。或者，就像我們?cè)诰o密構(gòu)建 Windows 輔助功能的支持 一樣。
對(duì)于 Flutter 來(lái)說(shuō)，在穩(wěn)定版渠道的桌面端上“運(yùn)行”是不夠的，它必須在世界各地的語(yǔ)言和文化以及不同能力的設(shè)備上運(yùn)行良好。我們還沒(méi)有達(dá)到我們想要的目標(biāo)，但未來(lái)可期！

其中一個(gè)例子是我們重構(gòu)了 Flutter 處理鍵盤(pán)事件以允許同步響應(yīng)的架構(gòu)。這使 widget 能夠處理按鍵并攔截它在整個(gè) widget tree 中的其余部分中的傳遞。我們?cè)?Flutter 2.5 中完成了這項(xiàng)工作的落地，并在 Flutter 2.8 中修復(fù)了許多問(wèn)題。這是對(duì)我們?nèi)绾翁幚硖囟ㄓ谠O(shè)備的鍵盤(pán)輸入的方式的重新設(shè)計(jì)，以及和重構(gòu) Flutter 處理文本編輯方式的持續(xù)工作的補(bǔ)充，所有這些都是用鍵盤(pán)這樣輸入密集型的桌面應(yīng)用所必需的。

此外，我們還在繼續(xù) 向 Flutter 擴(kuò)展視覺(jué)密度的定義，暴露對(duì)話(huà)框?qū)R方式的設(shè)置，以便開(kāi)發(fā)者可以實(shí)現(xiàn)更加友好的桌面 UI。

最后，F(xiàn)lutter 團(tuán)隊(duì)并不是唯一一個(gè)在為了 Flutter desktop 付出心血的團(tuán)隊(duì)。舉個(gè)例子，Canonical 的桌面團(tuán)隊(duì)正在與 Invertase 合作，在 Linux 和 Windows 上開(kāi)發(fā)最流行的 Flutter Firebase 插件。

你可以在 Invertase 博客上 閱讀有關(guān)預(yù)覽版的更多信息。

DartPad

如果沒(méi)有工具的改進(jìn)，那么這個(gè) Flutter 新版本的發(fā)布是不完整的。我們將重點(diǎn)介紹 DartPad 的改進(jìn)，其中最大的改進(jìn)是對(duì)更多軟件包的支持。事實(shí)上，目前共有 23 個(gè) package 可供導(dǎo)入使用。除了幾個(gè) Firebase 服務(wù)之外，該列表還包括諸如 bloc、characters、collection、google_fonts 和 flutter_riverpod 等流行的 package。
DartPad 團(tuán)隊(duì)會(huì)繼續(xù)添加新的 package，如果你想查看當(dāng)前支持哪些 package 的話(huà)，可以單擊右下角的信息圖標(biāo)。

如果你想了解未來(lái)我們向 DartPad 添加新 package 的計(jì)劃，請(qǐng)查看 Dart wiki 上的這篇文章。
還有另一個(gè)新的 DartPad 功能也非常方便，在此之前，DartPad 總是以運(yùn)行最新的穩(wěn)定版本運(yùn)行。在新版本中，你可以使用狀態(tài)欄中新的 Channel 菜單 來(lái)切換到使用最新的 Beta 渠道版本以及先前穩(wěn)定版本 (我們稱(chēng)為 "old channel" 舊渠道)。

DartPad 里舊渠道的使用場(chǎng)景比如你正在撰寫(xiě)一篇博客文章，而最新的穩(wěn)定版本還是特別流行，那這將非常有用。

移除 Dev 渠道

Flutter 的發(fā)布「渠道」(也就是 channel) 決定了 Flutter 框架和引擎在你的開(kāi)發(fā)機(jī)器上變化的速度，stable 代表最少的變更，而 master 代表最多。由于資源有限，我們決定最近將停止更新 dev 渠道。雖然我們確實(shí)收到了一些關(guān)于 dev 渠道的問(wèn)題，但我們發(fā)現(xiàn)只有不到 3% 的 Flutter 開(kāi)發(fā)人員使用 dev 渠道，因此，我們決定 不久將正式停用 dev 渠道。

因?yàn)殡m然很少有開(kāi)發(fā)人員使用 dev 渠道，但 Flutter 工程師仍需要花費(fèi)大量時(shí)間和精力來(lái)維護(hù)它。
如果你基本都只使用 stable 渠道的 Flutter 版本 (超過(guò) 90% 的 Flutter 者都在這么做)，那么這項(xiàng)改動(dòng)將不會(huì)影響你的日常開(kāi)發(fā)。通過(guò)放棄維護(hù)這個(gè)渠道，開(kāi)發(fā)者們也可以少做一個(gè)渠道選擇的決定，同時(shí) Flutter 團(tuán)隊(duì)也可以將時(shí)間和精力花在其他事情上。你可以使用 flutter channel 命令來(lái)決定你想要哪個(gè)渠道。以下是 Flutter 團(tuán)隊(duì)對(duì)每個(gè)渠道的計(jì)劃:

• Stable 渠道: 代表我們擁有的最高質(zhì)量的構(gòu)建。它們每季度（大致）發(fā)布一次，并針對(duì)中間的關(guān)鍵問(wèn)題進(jìn)行熱修復(fù)。這是「慢」通道: 安全、成熟、長(zhǎng)期服務(wù)；
• Beta 渠道: 為那些習(xí)慣于更快節(jié)奏的開(kāi)發(fā)者提供一種快速調(diào)整的替代方案。目前每月發(fā)布，穩(wěn)定測(cè)試后會(huì)發(fā)布。這是一個(gè)「快速」通道，如果我們發(fā)現(xiàn) dev 渠道相較于 beta 渠道有特別的需求和需求而 beta 渠道無(wú)法滿(mǎn)足，我們可能會(huì)改變 beta 渠道的計(jì)劃來(lái)滿(mǎn)足 (比如，加速發(fā)布節(jié)奏或降低我們對(duì)該渠道執(zhí)行的測(cè)試和熱修復(fù)級(jí)別)；
• Master 渠道: 是我們活躍的開(kāi)發(fā)渠道。我們不提供對(duì)該渠道的支持，但我們針對(duì)它運(yùn)行了一套全面的單元測(cè)試。對(duì)于對(duì)不穩(wěn)定的構(gòu)建感到滿(mǎn)意的貢獻(xiàn)者或高級(jí)開(kāi)發(fā)者而言，這是適合他們的渠道。在這個(gè)頻道上，我們跑得很快，打破了一些東西 (然后會(huì)很快地修復(fù)它們)。

當(dāng)我們?cè)谖磥?lái)幾個(gè)月停用 dev 渠道時(shí)，請(qǐng)考慮使用 beta 或 master 渠道，這取決于你對(duì)變更的容忍度以及對(duì)使用「最新」還是「最好」的平衡點(diǎn)。

破壞性改動(dòng) (breaking changes)

與往常一樣，我們努力減少每個(gè)版本中破壞性更改的數(shù)量。在此版本中，F(xiàn)lutter 2.8 除了已過(guò)期并根據(jù)我們的 破壞性改動(dòng)政策 被刪除的已棄用 API 之外，沒(méi)有重大變更。

• 90292 移除已廢棄的 autovalidate
• 90293 移除已廢棄的 FloatingHeaderSnapConfiguration.vsync
• 90294 移除已廢棄的 AndroidViewController.id
• 90295 移除已廢棄的 BottomNavigationBarItem.title
• 90296 移除已廢棄的文本輸入格式化類(lèi)

如果你仍在使用這些 API 并想了解如何遷移代碼，你可以閱讀 Flutter 文檔網(wǎng)站上的遷移指南。
與往常一樣，非常感謝社區(qū) 貢獻(xiàn)的測(cè)試用例，幫助我們識(shí)別這些破壞性改動(dòng)。

總結(jié)

在我們結(jié)束 2021 年并展望 2022 年之際，F(xiàn)lutter 團(tuán)隊(duì)要對(duì)整個(gè) Flutter 社區(qū)的工作和支持表示感謝。誠(chéng)然，我們正在為世界上越來(lái)越多的開(kāi)發(fā)人員構(gòu)建 Flutter，但如果沒(méi)有你和每位開(kāi)發(fā)者的存在，我們也無(wú)法維護(hù)并構(gòu)建它。Flutter 社區(qū)與眾不同，感謝你所做的一切！