作者 / Chris Sells, Flutter 開發(fā)者體驗產(chǎn)品經(jīng)理

又到了北半球每年的這個時節(jié): 樹葉變黃、氣溫下降，而今年的最終穩(wěn)定版本也在此時發(fā)布: Flutter 2.8 閃亮登場！這個版本凝聚了 207 位貢獻(xiàn)者和 178 位審閱者的辛勤付出，合并了 2,424 個 PR，并解決了 2,976 個問題。在這里，我們要特別感謝此版本的杰出社區(qū)貢獻(xiàn)者 Bartosz Selwesiuk，作為 Very Good Ventures 的 Flutter 工程師，他提供了 23 個 PR，其中大部分主要 "專注于"(原文如此) 面向 Web 的攝像頭插件。

所有人的通力合作給引擎和 Flutter DevTools 帶來了顯著的性能改進(jìn)、穩(wěn)定的 Google Mobile Ads SDK for Flutter 版本、一系列全新的 Firebase 功能和改進(jìn)、WebView 3.0、一批新的 Flutter Favorite package、朝著穩(wěn)定版桌面端支持更進(jìn)一步的大量更新，以及支持更多 package (包括 Firebase) 的新版本 DartPad。這應(yīng)該是今年發(fā)布的最后一個版本，相信不負(fù)大家的期待。我們一起走進(jìn) Flutter 2.8！

性能

一如往常，F(xiàn)lutter 的第一要務(wù)是質(zhì)量。我們的絕大部分工作旨在確保 Flutter 在其支持的設(shè)備上盡可能順暢和穩(wěn)健地運行。

啟動

此版本對應(yīng)用啟動延遲進(jìn)行了改進(jìn)。我們通過 Google Pay 對這些改進(jìn)進(jìn)行了測試。作為一個熱門的大型應(yīng)用，Google Pay 擁有超過 100 萬行代碼，可以確保這些改進(jìn)能夠在現(xiàn)實環(huán)境中產(chǎn)生顯著的積極影響。所有相關(guān)改進(jìn)使 Google Pay 在低端 Android 設(shè)備上運行時的啟動延遲降低了 50%，在高端設(shè)備上降低了 10%。

對于 Flutter 影響 Dart VM 垃圾回收策略機(jī)制的改進(jìn)，現(xiàn)在有助于避免在應(yīng)用啟動序列中出現(xiàn)錯誤的垃圾回收 (GC) 周期。例如，在 Android 上渲染第一幀之前，F(xiàn)lutter 現(xiàn)在只通知 Dart VM "TRIM_LEVEL_RUNNING_CRITICAL" 及以上的內(nèi)存壓力。在本地測試中，此改進(jìn)將低端設(shè)備上的第一幀時間減少了多達(dá) 300 毫秒。

#90551: 只通知 Dart VM "TRIM_LEVEL_RUNNING_CRITICAL" 及以上的內(nèi)存壓力 https://github.com/flutter/flutter/issues/90551

出于謹(jǐn)慎考慮，在之前的版本中，F(xiàn)lutter 在創(chuàng)建平臺視圖時會阻塞平臺線程。經(jīng)過仔細(xì)推敲和測試，我們確定可以移除一些序列化操作，這使得在低端設(shè)備上啟動 Google Pay 時減少了超過 100 毫秒的阻塞。

#29145: 在 UI/Raster 線程上不要對 Shell::OnCreatePlatformView 進(jìn)行序列化操作 https://github.com/flutter/engine/pull/29145#pullrequestreview-778935616

#91711: UI 線程上的 Shell::OnPlatformViewCreated 不應(yīng)進(jìn)行序列化 https://github.com/flutter/flutter/issues/91711

以前，設(shè)置默認(rèn)字體管理器會在設(shè)置第一個 Dart Isolate 時引入人為延遲。延遲默認(rèn)字體管理器設(shè)置，使其與 Dart Isolate 設(shè)置同時運行，既改善了啟動延遲時間，又使得上述優(yōu)化的效果更加明顯，因為主要的瓶頸就在這里。

#29291: 延遲默認(rèn)字體管理器，使其與 Isolate 設(shè)置同時運行

https://github.com/flutter/engine/pull/29291

內(nèi)存 由于 Flutter 會急切地加載 Dart VM 的 "Service Isolate"，其 AOT 代碼與應(yīng)用捆綁在一起，以便 Flutter 可以同時將兩者讀入內(nèi)存，因此以內(nèi)存受限設(shè)備為目標(biāo)平臺的 Flutter 開發(fā)者在進(jìn)行性能跟蹤時遇到了問題。對于使用 2.8 版本的 Android 設(shè)備，Dart VM 的 Service Isolate 會被分離到自己的軟件包內(nèi)，可單獨加載，因此在需要使用 Service Isolate 之前，可以節(jié)省多達(dá) 40 MB 的內(nèi)存。Dart VM 會通知操作系統(tǒng)，AOT 程序使用的內(nèi)存分頁被備份到了一個可能無需再次讀取的文件里，這使得內(nèi)存占用量進(jìn)一步減少達(dá) 10%。因此，之前用于保存文件備份數(shù)據(jù)副本的分頁可以被回收，并用于其他用途。

#91382: 引擎不應(yīng)使用應(yīng)用快照加載 VM 服務(wù) https://github.com/flutter/flutter/issues/91382

#29245: 構(gòu)建一個用于在 Android 分析模式啟動 Service Isolate 的專用快照 https://github.com/flutter/engine/pull/29245

#92120: 為提供給 Dart VM 的類型映射提供提示 https://github.com/flutter/flutter/issues/92120

性能分析 有時，開發(fā)者希望能夠同時查看來自 Flutter 的性能跟蹤數(shù)據(jù)以及 Android 原生跟蹤事件。此外，他們也會希望能查看以發(fā)布模式構(gòu)建的應(yīng)用中的跟蹤事件，以便深入了解所部署的應(yīng)用中的性能問題。為此，2.8 穩(wěn)定版現(xiàn)在會將跟蹤事件發(fā)送到 Android systrace 記錄器 (如果其已在應(yīng)用啟動時啟用)，同時，即使 Flutter 應(yīng)用在發(fā)布模式下構(gòu)建，這些事件也會發(fā)送出來。 △ Flutter 跟蹤事件現(xiàn)在顯示在 Android systrace 記錄工具中 (見底端)

#28903: 如在應(yīng)用啟動時啟用 systrace，則使用 systrace 記錄器，并在 Android 發(fā)布模式下啟用 systrace https://github.com/flutter/engine/pull/28903

此外，為了創(chuàng)建卡頓更少的動畫，一些開發(fā)者希望性能跟蹤記錄中包含更多關(guān)于光柵緩存行為的信息，這使得 Flutter 能夠?qū)Π嘿F和重復(fù)使用的圖片進(jìn)行圖塊搬移，無需在每一幀上重新進(jìn)行繪制。性能跟蹤記錄中的新流程事件現(xiàn)在允許開發(fā)者跟蹤光柵緩存圖片的生命周期。

#92286: 為光柵緩存的生成至刪除事件添加流程或異步事件 https://github.com/flutter/flutter/issues/92286

Flutter DevTools 在調(diào)試性能問題方面，此版本的 DevTools 添加了新的 "增強(qiáng)跟蹤 (Enhance Tracing)" 功能，以幫助用戶診斷由成本高昂的構(gòu)建、布局和繪制操作引起的界面卡頓。

#3451:在性能頁面增加跟蹤繪制和跟蹤布局開關(guān) https://github.com/flutter/devtools/pull/3451

啟用任一跟蹤功能時，時間軸將根據(jù)選項相應(yīng)地包含新的 "已構(gòu)建 widget"、"已布局渲染對象" 和 "已繪制渲染對象" 事件。

另外，此版本的 DevTools 添加了新功能來分析應(yīng)用啟動時的性能表現(xiàn)。此剖析文件包含從 Dart VM 初始化到第一個 Flutter 幀渲染完成的所有 CPU 采樣。在點擊 "剖析應(yīng)用啟動 (Profile app starup)" 按鈕并加載應(yīng)用啟動剖析文件后，您將看到剖析文件的 "AppStartUp" 用戶標(biāo)簽已被選中。您還可以通過在列表中選擇這個用戶標(biāo)簽過濾器 (如果可用)，來加載應(yīng)用啟動剖析文件。選擇此標(biāo)簽會顯示您應(yīng)用啟動的剖析數(shù)據(jù)。

#3357: 增加應(yīng)用啟動剖析功能，以及改進(jìn) CPU 剖析緩存 https://github.com/flutter/devtools/pull/3357

Web 版平臺視圖 并不是僅有 Android 和 iOS 平臺的性能得到了改進(jìn)，此版本還改進(jìn)了 Web 版 Flutter 平臺視圖的性能。如果您不熟悉平臺視圖，這里簡單介紹一下: 它是 Flutter 供您托管來自應(yīng)用底層平臺的原生界面組件的方式。Web 版 Flutter 使用 HtmlElementView widget 實現(xiàn)這一功能，用于在 Flutter web 應(yīng)用中托管 HTML 元素。如果您正在使用 google_maps_flutter 或 video_player 插件的 Web 版本，或者您正在遵循 Flutter 團(tuán)隊關(guān)于如何在 Web 平臺優(yōu)化顯示圖像的建議，那么您就是在使用平臺視圖。

HtmlElementView https://api.flutter.cn/flutter/widgets/HtmlElementView-class.html

在 Web 中展示圖片 https://flutter.cn/docs/development/platform-integration/web-images#use-img-in-a-platform-view

在 Flutter 之前的版本中，嵌入平臺視圖會立即構(gòu)建一個新的 canvas，每增加一個平臺視圖，都會添加一個新的 canvas。這些額外生成的 canvas 成本高昂，因為每個 canvas 都是整個窗口的大小。而在新版本中，我們復(fù)用了為之前的平臺視圖創(chuàng)建的 canvas，因此相比較之前每秒承擔(dān) 60 倍的成本，如今在整個應(yīng)用的生命周期內(nèi)只需要承擔(dān)一次成本即可。這意味著您可以在 Web 應(yīng)用中創(chuàng)建多個 HtmlElementView 而不損失性能，同時可減少使用平臺視圖時的滾動卡頓。

#28087: 優(yōu)化特殊用例下的 CanvasKit 平臺視圖 https://github.com/flutter/engine/pull/28087

生態(tài)系統(tǒng)

Flutter 不僅僅是框架、引擎和工具: pub.dev 上有超過 20,000 個與 Flutter 兼容的 package 和插件，而且每天還在不斷產(chǎn)生更多的內(nèi)容。Flutter 開發(fā)者日常大量互動的內(nèi)容構(gòu)成了一個更為龐大的生態(tài)系統(tǒng)，讓我們一起來看看自上個版本以來 Flutter 生態(tài)系統(tǒng)的發(fā)展吧。

Flutter Ads 正式發(fā)布

首先，也是最重要的是，Google Mobile Ads SDK for Flutter 已正式發(fā)布。

此版本支持 5 種廣告格式，集成了 AdMob 和 Ad Manager 支持，并包含新中介功能的測試版，可幫助您優(yōu)化廣告效果。有關(guān)將 Google Ads 集成到 Flutter 應(yīng)用以及其他獲利方案的更多信息，請查看有關(guān)獲利的詳細(xì)信息:

https://flutter.cn/monetization

WebView 3.0

這次 Flutter 還帶來了 webview_flutter 插件的 3.0 版本:

https://pub.flutter-io.cn/packages/webview_flutter

因為新功能數(shù)量眾多，以及 Web 視圖在 Android 上運行時會出現(xiàn)潛在的重大變更，我們提高了版本號。在 webview_flutter 的上一版本中，我們已提供混合集成模式，但沒有將其設(shè)為默認(rèn)。混合集成修復(fù)了原先默認(rèn)虛擬顯示模式存在的若干問題?；谟脩舴答伜臀覀兊膯栴}追蹤，我們認(rèn)為是時候讓混合集成變成默認(rèn)模式了。此外，webview_flutter 也增加了若干呼聲很高的功能:

支持使用 POST 和 GET 填充內(nèi)容 (#4450、#4479、#4480、#4573)

https://github.com/flutter/plugins/pull/4450

https://github.com/flutter/plugins/pull/4479

https://github.com/flutter/plugins/pull/4480

https://github.com/flutter/plugins/pull/4573

從文件和字符串加載 HTML (#4446、#4486、#4544、#4558)

https://github.com/flutter/plugins/pull/4446

https://github.com/flutter/plugins/pull/4486

https://github.com/flutter/plugins/pull/4544

https://github.com/flutter/plugins/pull/4558

透明背景支持 (#3431、#4569、#4570)

https://github.com/flutter/plugins/pull/3431

https://github.com/flutter/plugins/pull/4569

https://github.com/flutter/plugins/pull/4570

在加載內(nèi)容前寫入 Cookie (#4555、#4556、#4557)

https://github.com/flutter/plugins/pull/4555

https://github.com/flutter/plugins/pull/4556

https://github.com/flutter/plugins/pull/4557

而且在 3.0 版本中，webview_flutter 還新增了對 Web 平臺的初步支持。有許多人希望能在 Flutter Web 應(yīng)用中托管 WebView，這可讓他們通過單個源代碼庫來構(gòu)建移動或 Web 應(yīng)用。那如何在 Flutter Web 應(yīng)用中托管 WebView 呢？代碼如下:

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 createState() => _HomePageState();}
class _HomePageState extends State {  @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'),      );}

它在 Web 上運行時的效果也正如您預(yù)期的那樣:

注意，當(dāng)前 Web 端 webview_flutter 的實現(xiàn)有許多限制，因為它是借助 iframe 構(gòu)建的，而 iframe 只能支持簡單的網(wǎng)址加載，無法控制加載的內(nèi)容或與其交互 (更多詳細(xì)信息見 webview_flutter_web README)。但是，應(yīng)大家需求，我們將提供 webview_flutter_web，作為未整合的插件供大家使用。如果您想一試，請將以下代碼行添加到您的 pubspec.yaml 中:

dependencies:  webview_flutter: ^3.0.0  webview_flutter_web: ^0.1.0 # add unendorsed plugin explicitly

Webview_flutter_web README https://pub.flutter-io.cn/packages/webview_flutter_web

未整合的聯(lián)合插件 https://flutter.cn/docs/development/packages-and-plugins/developing-packages#endorsed-federated-plugin

如果您對 webview_flutter v3.0 有任何反饋，無論是否基于 Web 端，請將其作為 WebView 問題提交至 Flutter repo。此外，如果您之前沒有使用過 WebView 或想回顧一下其用法，請查看全新的 WebView Codelab，它會向您逐步介紹在 Flutter 應(yīng)用中托管 Web 內(nèi)容的過程。

提交問題 https://github.com/flutter/flutter/issues

WebView Codelab https://codelabs.developers.google.com/codelabs/flutter-webview

Flutter Favorites Flutter 生態(tài)系統(tǒng)委員會再次舉行會議，并將以下內(nèi)容指定為 Flutter Favorite package:

https://flutter.cn/docs/development/packages-and-plugins/favorites#flutter-ecosystem--committee

新 Router API 的三個自定義路由 package: beamer、routemaster 和 go_router

https://pub.flutter-io.cn/packages/beamer

https://pub.flutter-io.cn/packages/routemaster

https://pub.flutter-io.cn/packages/go_router

drift，重命名自 Flutter 和 Dart 中的一個已經(jīng)可用且頗為流行的反應(yīng)式持久性庫，它建立于 sqlite 之上:

https://pub.flutter-io.cn/packages/drift

https://pub.flutter-io.cn/packages/sqlite3

freezed 是一個 Dart 的 "語言補(bǔ)丁"，為定義模型、克隆對象、模式匹配等提供簡單的語法

https://pub.flutter-io.cn/packages/freezed

dart_code_metrics

https://pub.flutter-io.cn/packages/dart_code_metrics

此外還有幾個好用的圖形用戶界面 package: flex_color_scheme、flutter_svg、feedback、toggle_switch 和 auto_size_text

https://pub.flutter-io.cn/packages/flex_color_scheme

https://pub.flutter-io.cn/packages/flutter_svg

https://pub.flutter-io.cn/packages/feedback

https://pub.flutter-io.cn/packages/toggle_switch

https://pub.flutter-io.cn/packages/auto_size_text

△ Flexfold 應(yīng)用就使用了 flex_color_scheme

祝賀這些 package 的作者，感謝您用自己的辛勤努力支持 Flutter 社區(qū)。如果您想要提名最喜歡的 Flutter package 來獲得 Flutter Favorite 獎項，請遵循 Flutter Favorite 計劃頁面上的指南和說明:

https://flutter.cn/docs/development/packages-and-plugins/favorites

特定平臺的 package 如果您是 package 作者，您必須確定自己準(zhǔn)備支持哪些平臺。如果您要用特定平臺的原生代碼來構(gòu)建插件，您可以在項目的 pubspec.yaml 中使用 pluginClass 屬性，用來表示提供該功能的原生類:

https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin-platforms

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

然而，隨著 Dart FFI 越來越成熟，您也有可能完全在 Dart 中實現(xiàn)特定平臺的功能，就像 path_provider_windows package 那樣。在這種情況下，沒有任何原生類可以使用，但您仍然需要指定 package 只支持某些平臺，您可以使用 dartPluginClass 屬性代替:

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

Dart FFI https://dart.dev/guides/libraries/c-interop

path_provider_windows https://pub.flutter-io.cn/packages/path_provider_windows

有了這個設(shè)置，在沒有任何原生代碼的情況下，您也可以把 package 設(shè)置成只支持某些特定平臺。您還必須提供 Dart 插件類，您可以通過僅 Dart 的平臺實現(xiàn)官方文檔中了解詳情:

https://flutter.cn/docs/development/packages-and-plugins/developing-packages#dart-only-platform-implementations

Firebase Flutter 生態(tài)系統(tǒng)的另一個重要部分是 FlutterFire，有 2/3 的 Flutter 應(yīng)用在使用它。這個版本帶來了一系列新功能，讓使用 Flutter 和 Firebase 構(gòu)建應(yīng)用變得更加輕松:

所有 FlutterFire 插件已從 Beta 版過渡到穩(wěn)定版

Dartpad 中增加了對若干 Firebase 服務(wù)的支持

用于更輕松構(gòu)建身份驗證和實時 Firestore 查詢界面的庫

針對 Flutter 的新 Firestore 對象/文檔映射 (Alpha 版)

生產(chǎn)質(zhì)量 FlutterFire 插件已經(jīng)基本從 Beta 版轉(zhuǎn)換至穩(wěn)定版:

http://firebase.flutter.dev/

Android、iOS 和 Web 平臺中已經(jīng)穩(wěn)定的插件包括 Analytics、Dynamic Links、In-App Messaging、Performance Monitoring、Realtime Database、Remote Config 以及新增的 Installations。App Check 插件和 macOS 平臺支持仍處于 Beta 版，因為 Firebase 庫本身也處于 Beta 版階段。如果您因為 FlutterFire 庫還未就緒而猶豫是否要選擇 Realtime Database、Analytics 或 Remote Config，那么請不用再擔(dān)心了?，F(xiàn)在它們已經(jīng)是完全受支持的插件，可供生產(chǎn)使用。

Analytics https://firebase.flutter.dev/docs/analytics/overview

Dynamic Links https://firebase.flutter.dev/docs/dynamic-links/overview

In-App Messaging https://firebase.flutter.dev/docs/in-app-messaging/overview/

Performance Monitoring https://firebase.flutter.dev/docs/performance/overview

Realtime Database https://firebase.flutter.dev/docs/database/overview

Remote Config https://firebase.flutter.dev/docs/remote-config/overview

Installations https://firebase.flutter.dev/docs/installations/overview

僅使用 Dart 初始化 Firebase 隨著 package 轉(zhuǎn)向生產(chǎn)質(zhì)量，我們增加了通過 Dart 在任何受支持平臺上初始化 Firebase 的功能:

https://github.com/FirebaseExtended/flutterfire/pull/6549

import 'package:firebase_core/firebase_core.dart';import 'firebase_options.dart'; // generated via `flutterfire` CLI
Future main() async {  // initialize firebase across all supported platforms  WidgetsFlutterBinding.ensureInitialized();  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MyApp());}

上面的代碼使用適合每個受支持平臺的選項初始化 Firebase 應(yīng)用，這些選項在 firebase_options.dart 文件中定義，該文件包含每個平臺的數(shù)據(jù)結(jié)構(gòu)，如下所示:

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

要收集每個平臺初始化選項數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)，請使用新的 flutterfire CLI 工具:

https://pub.flutter-io.cn/packages/flutterfire_cli

此工具會深入挖掘平臺特定子文件夾中的數(shù)據(jù)，以找到唯一的軟件包 ID，然后用它來查找匹配平臺特定應(yīng)用的 Firebase 項目特定詳細(xì)信息，如果沒有查找到的話，甚至還會創(chuàng)建一個新的 Firebase 項目和/或新的平臺特定應(yīng)用。這意味著，您不再需要下載 json 文件并將其添加到 Android 項目、或下載 plist 文件并將其添加到 iOS 和 macOS 項目，或?qū)⒋a粘貼到您 Web 項目的 index.html 中: 無論您的 Firebase 項目支持哪個平臺，這段 Dart 代碼都將為您的應(yīng)用完成Firebase 的初始化。請注意，要讓 FlutterFire 應(yīng)用正常工作，需要的初始化工作可能不止于此，例如，您可能需要將 Crashlytics 符號的創(chuàng)建集成到您的 Android 構(gòu)建或 iOS 構(gòu)建中，但在一個新的 Firebase 項目中，這些操作應(yīng)該只需要幾分鐘就可以完成并順利運行。

#7359: 自動注入 Firebase JS SDK https://github.com/FirebaseExtended/flutterfire/pull/7359

將 Crashlytics 插件添加至應(yīng)用 https://firebase.google.com/docs/crashlytics/get-started?platform=android#add-plugin

設(shè)置 Xcode 以自動上傳 dSYM 文件 https://firebase.google.com/docs/crashlytics/get-started?platform=ios#set-up-dsym-uploading

在 DartPad 里使用 Firebase 借助僅使用 Dart 初始化 FlutterFire 的功能，您現(xiàn)在可以在 DartPad 中使用 Firebase。

上圖的示例使用 Flutter、Firebase 和 DartPad (都是無需安裝即可使用) 構(gòu)建了一個小型聊天應(yīng)用。如今，DartPad 的 Firebase 支持已包含核心 API、身份驗證和 Firestore。將來會有更多 Firebase 服務(wù)出現(xiàn)在 DartPad 中。

Dart 聊天應(yīng)用示例 https://dartpad.dev/?id=d57c6c898dabb8c6fb41018588b8cf73

原作者動態(tài) https://twitter.com/puf/status/1458516522133909506

DartPad 的 FlutterFire 支持還包含在文檔中直接嵌入 DartPad 實例的功能:

https://firebase.flutter.dev/docs/firestore/example/

在上面的示例中，您可以看到 Cloud Firestore 的文檔和示例應(yīng)用的代碼，您可以直接在瀏覽器中運行和編輯這些代碼，而無需安裝內(nèi)容、創(chuàng)建測試項目，甚至不需要復(fù)制/粘貼代碼。代碼已經(jīng)在頁面中就緒，可以立即使用。

示例應(yīng)用 https://github.com/FirebaseExtended/flutterfire/tree/master/packages/cloud_firestore/cloud_firestore/example

Firebase 界面 我們注意到，當(dāng)人們將 Firebase 集成到他們的應(yīng)用中時，大多數(shù)應(yīng)用都有某種身份驗證流程。其中包括讓人們通過電子郵件地址和密碼或社交身份驗證服務(wù) (例如 Google 提供的服務(wù)) 登錄。Firebase 身份驗證還允許實時創(chuàng)建新帳號、驗證電子郵件地址和重置密碼，以及支持需要使用短信進(jìn)行的兩步驗證、用電話號碼登錄，甚至能將多個用戶帳號合并為一個帳號。Firebase 身份驗證支持以上所有的功能，而 Flutter 開發(fā)者以前是需要負(fù)責(zé)為這些功能實現(xiàn)相應(yīng)界面的。但從今以后就不用了。 現(xiàn)在，我們很高興地推出 flutterfire_ui package，通過它即可使用少量代碼創(chuàng)建基本的身份驗證體驗。例如，假設(shè)您在 Firebase 項目中設(shè)置了電子郵件和 Google 身份驗證:

flutterfire_ui https://pub.flutter-io.cn/packages/flutterfire_ui

有了這個配置，您就可以使用如下代碼觸發(fā)身份驗證流程:

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 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(        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，由于用戶尚未登錄，因此顯示登錄屏幕。SigninScreen widget 配置了電子郵件登錄和 Google 身份驗證登錄。我們還使用 firebase_auth package 監(jiān)聽用戶的身份驗證狀態(tài)，一旦他們完成登錄，我們就可以顯示應(yīng)用的其余部分。使用上面這段代碼，您就可以為所有支持 Firebase 的平臺 (Android、iOS、Web 和 macOS) 提供可用的登錄流程。

只需增加一些配置，即可輕松添加圖像和自定義文本 (詳細(xì)信息見文檔)，從而構(gòu)建出功能齊備的登錄體驗:

https://firebase.flutter.dev/docs/ui/overview

上面是移動版本的截圖，但由于 flutterfire_ui 屏幕是響應(yīng)式的，以下即為桌面設(shè)備上的界面:

如果用戶已經(jīng)使用電子郵件/密碼注冊過賬號，那他們可以立即登錄。如果他們使用 Google 身份驗證，無論是在移動設(shè)備、Web 還是桌面設(shè)備上，系統(tǒng)都會顯示常規(guī)的 Google 身份驗證流程。如果他們還沒有帳號，可以按下登錄屏幕上的按鈕并轉(zhuǎn)到注冊屏幕。在他們登錄或注冊后，會有以下流程可用: 驗證電子郵件地址、重置密碼、登出和關(guān)聯(lián)社交身份驗證帳號。所有平臺都適用電子郵件登錄，并支持 Google、Facebook 和 Twitter 的社交身份驗證，部分支持 Apple (因為它不適用于 Android)。flutterfire_ui 中的身份驗證支持多種場景和導(dǎo)航方案，以及自定義和本地化選項。您可以在官方文檔中參閱詳細(xì)文檔和示例:

https://firebase.flutter.dev/docs/ui/overview

并且，身份驗證不是 flutterfire_ui 支持的唯一 Firebase 界面相關(guān)功能。在向用戶展示來自 Firebase 查詢的實時、無限滾動的數(shù)據(jù)列表時，此版本提供 FirestoreListView，您可以使用它在應(yīng)用中呈現(xiàn)實時查詢的結(jié)果，如下所示:

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

實際運行效果如下:

或者，如果您想為用戶提供在表格中創(chuàng)建、讀取、更新和刪除條目的功能，可以使用 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'),      },    );  }}

運行結(jié)果如下所示:

有關(guān)身份驗證、列表視圖和數(shù)據(jù)表的詳細(xì)信息，請查看 flutterfire_ui 文檔。由于這是一個預(yù)覽版，我們計劃添加更多功能。如果您有問題或功能需求，請前往 GitHub repo 的討論專區(qū)提交或提出問題。

flutterfire_ui 文檔 https://firebase.flutter.dev/docs/ui/overview/

GitHub repo https://github.com/FirebaseExtended/flutterfire/discussions/6978

Firestore 對象/文檔映射 最后，我們在 Firebase 和 Flutter 的集成方面添加了一個新功能: Firestore 對象/文檔映射器的 Alpha 版。Firestore ODM 旨在通過熟悉的類型安全、結(jié)構(gòu)化對象和方法簡化 Firestore 的使用，從而幫助 Flutter 開發(fā)者提高工作效率。Firestore ODM 使用代碼生成，允許您用類型安全的方式對數(shù)據(jù)建模，從而改進(jìn)與文檔和集合交互的語法:

@JsonSerializable()class Person {  Person({required this.name, required this.age});
  final String name;  final int age;}
@Collection(‘/persons’)final personsRef = PersonCollectionReference();

Firestore ODM

https://firebase.flutter.dev/docs/firestore-odm/overview/

這些類型就位后，您就可以執(zhí)行類型安全查詢:

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

ODM 還支持定義強(qiáng)類型子集，且提供內(nèi)置選項，通過 select 功能優(yōu)化 widget 重建。您可以在 Firestore ODM 文檔中了解所有這些功能及更多內(nèi)容。由于這是一個 Alpha 版，我們正在尋求早期反饋，歡迎加入 FlutterFire 討論中的 Firestore ODM 會話以提供反饋和提問。

Firestore ODM 文檔 https://firebase.flutter.dev/docs/firestore-odm/overview/

Firestore ODM 會話 https://github.com/FirebaseExtended/flutterfire/discussions/7475

桌面端

Flutter 2.8 版本朝著桌面端 (Windows、macOS 和 Linux) 的穩(wěn)定支持又前進(jìn)了一大步。我們對質(zhì)量的要求很高，包括國際化和本地化支持，例如我們新增的中文、韓文以及日文漢字 IME 支持?；蛘哂直热缥覀冋跇?gòu)建的對 Windows 無障礙支持的緊密整合。僅僅讓穩(wěn)定渠道的 Flutter 在桌面設(shè)備上運行是不夠的 (即便它已經(jīng)能在帶標(biāo)識的 beta 渠道運行了)，它還必須針對世界各地的語言和文化以及不同能力的用戶提供良好的運行狀態(tài)。Flutter 桌面端支持在質(zhì)量方面尚未達(dá)到預(yù)期的水平，但我們正在向這個目標(biāo)邁進(jìn)！

#29620: 中文 IME 支持 https://github.com/flutter/engine/pull/29620

#24713: 韓文 IME 支持 https://github.com/flutter/engine/pull/24713

#29761: 日文漢字 IME 支持 https://github.com/flutter/engine/pull/29761

#77838: Windows 無障礙支持 https://github.com/flutter/flutter/issues/77838

Stable 渠道包含了一份 Beta 渠道的桌面支持 https://flutter.cn/docs/desktop#beta-snapshot-in-stable-channel

為了讓桌面端支持進(jìn)入穩(wěn)定版本，我們做了許多工作，其中包括完全重新構(gòu)建 Flutter 處理鍵盤事件的架構(gòu)，以實現(xiàn)同步響應(yīng)。如此一來就可以用 widget 來處理按鍵，并取消其在樹的其他部分的傳遞。這方面的成果首先出現(xiàn)在 Flutter 2.5 中，并在 Flutter 2.8 中修復(fù)了一些問題和回歸，實現(xiàn)了穩(wěn)定的質(zhì)量。除此之外，我們還在重新設(shè)計特定設(shè)備的鍵盤輸入處理方式，以及重構(gòu) Flutter 處理文本編輯的方式，所有這些對于鍵盤輸入密集型的桌面應(yīng)用都很有必要。

處理同步鍵盤事件

https://docs.google.com/document/d/1rWXSjkb2ZKv-cpg26lVK0aZi4cVeXJ8j7YmSJdq2TOM/edit#heading=h.pub7jnop54q0

#33521: 需要一個從嵌入器發(fā)送同步鍵盤事件至 Dart 并獲得響應(yīng)的方法

https://github.com/flutter/flutter/issues/33521

#44918: 特定設(shè)備的鍵盤事件應(yīng)該在嵌入器中發(fā)生

https://github.com/flutter/flutter/issues/44918

#86736: 文本編輯模型重構(gòu)

https://github.com/flutter/flutter/pull/86736

此外，我們還持續(xù)擴(kuò)展了 Flutter 的視覺密度支持，并開放對話框的對齊方式，這都是為了實現(xiàn)更適用于桌面設(shè)備的界面。

#89353: 增加 visualDensity、focusNode 和 enableFeedback https://github.com/flutter/flutter/pull/89353

#88984: 允許對話框進(jìn)行自定義對齊 https://github.com/flutter/flutter/pull/88984

最后，F(xiàn)lutter 團(tuán)隊并不是唯一致力于 Flutter 桌面端支持的團(tuán)隊。舉個例子，Canonical 的桌面團(tuán)隊正在與 Invertase 合作，致力在 Linux 和 Windows 上實現(xiàn)最流行的 Flutter Firebase 插件。

您可以在 Invertase 博客中進(jìn)一步了解其預(yù)覽版:

https://invertase.io/blog/announcing-flutterfire-desktop

DartPad

完整的 Flutter 版本發(fā)布必然涉及工具方面的改進(jìn)。在此版本中，DartPad 最大的改進(jìn)是對更多 package 的支持。事實上，現(xiàn)在支持導(dǎo)入的 package 達(dá)到了 23 個。除了對幾個 Firebase 服務(wù)的支持外，還支持 bloc、characters、collection、google_fonts 和 flutter_riverpod 等流行的 package。DartPad 團(tuán)隊將繼續(xù)增加新的 package，如果您想查看目前支持哪些 package，可以點擊下方截圖右下角的信息圖標(biāo):

如果您想要了解 DartPad 支持新 package 的計劃，請查看 Dart wiki 上的這篇文章:

https://github.com/dart-lang/dart-pad/wiki/Adding-support-for-a-new-package

DartPad 還有一個相當(dāng)實用的新特性。此前，DartPad 一直運行最新的穩(wěn)定版本。在這個版本中，您可以讓 DartPad 使用最新的 beta 版或上一個穩(wěn)定版本 (稱為 "舊渠道")，只需使用狀態(tài)欄中新增的渠道 (Channel) 菜單切換即可。

這一點十分實用，舉個例子，假設(shè)您正在撰寫一篇博文，而最新的穩(wěn)定版本卻有點過時……

移除 dev 渠道

Flutter 的 "渠道 (channel)" 控制著底層 Flutter 框架和引擎在您開發(fā)機(jī)器上變化的速度，穩(wěn)定 (stable) 渠道表示最少的流失，而主 (master) 渠道則相反。由于資源限制，我們最近停止了 dev 渠道的更新。雖然我們確實收到了與此相關(guān)的一些問題，但我們發(fā)現(xiàn)只有不到 3% 的 Flutter 開發(fā)者使用該渠道。因此我們決定正式停用 dev 渠道。雖然很少有開發(fā)者使用 dev 渠道，但 Flutter 工程師需要花費大量時間和精力來維護(hù)它。如果您所有的時間都在使用穩(wěn)定渠道 (正如 90% 以上的 Flutter 開發(fā)者所做的那樣)，那您根本不會再需要 dev 渠道。放棄這個渠道意味著您可以少做一個決定，而 Flutter 團(tuán)隊可以將時間和精力放在其他事情上。

您可以使用 flutter channel 命令來決定要使用哪個渠道。以下是 Flutter 團(tuán)隊對每個渠道的看法:

穩(wěn)定 (stable) 渠道代表著我們構(gòu)建的最高質(zhì)量。此渠道一般每季度發(fā)布一次，期間會對關(guān)鍵問題進(jìn)行熱修復(fù)。這是 "慢" 渠道: 安全、成熟、提供長期支持。

Beta 渠道為喜歡更快節(jié)奏的開發(fā)者們提供了一種替代 stable 渠道的快速迭代方案。目前每月發(fā)布，在發(fā)布前穩(wěn)定。這是 "快" 渠道。如果我們發(fā)現(xiàn) dev 渠道能滿足 beta 渠道目前無法滿足的需求，我們可能會改變對 beta 渠道的處理方案來滿足這些需求 (例如加快 beta 渠道的發(fā)布節(jié)奏，以及降低其測試和熱修復(fù)級別)。

主 (master) 渠道是活躍的開發(fā)渠道。我們對此渠道不提供支持，但我們會針對它進(jìn)行全面的單元測試。能適應(yīng)不穩(wěn)定版本的貢獻(xiàn)者或高級用戶可以使用該渠道。在這個渠道中，我們會快速構(gòu)建和破壞一些功能 (然后很快將其修復(fù))。

在未來幾個月停用 dev 渠道的過程中，請您考慮使用 beta 或主 (master) 渠道，具體取決于您對流失的容忍度，以及您對更新和質(zhì)量的要求。

重大變更

像往常一樣，我們會盡力減少每個版本中重大變更的數(shù)量。在 Flutter 2.8 中，除了已經(jīng)過期并根據(jù)我們的重大變更政策移除的已棄用 API 之外，沒有其他重大變更:

https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes

#90292: 移除被棄用的 autovalidate

https://github.com/flutter/flutter/pull/90292

#90293: 移除被棄用的 FloatingHeaderSnapConfiguration.vsync

https://github.com/flutter/flutter/pull/90293

#90294: 移除被棄用的 AndroidViewController.id

https://github.com/flutter/flutter/pull/90294

http://androidviewcontroller.id/

#90295: 移除被棄用的 BottomNavigationBarItem.title

https://github.com/flutter/flutter/pull/90295

#90296: 移除已棄用的文本輸入格式類

https://github.com/flutter/flutter/pull/90296

如果您仍在使用這些 API，并且想要詳細(xì)了解如何更新您的代碼，可以閱讀遷移指南。非常感謝社區(qū)一如既往地提供測試，幫助我們識別以上重大變更。

遷移指南: 2.5 版本之后棄用的 API https://flutter.cn/docs/release/breaking-changes/2-5-deprecations

提供測試 https://github.com/flutter/tests/blob/master/README.md

總結(jié)

在我們告別 2021 年并展望 2022 年之際，F(xiàn)lutter 團(tuán)隊要對整個 Flutter 社區(qū)的工作和支持表示感謝。誠然，我們正在為世界上越來越多的開發(fā)者構(gòu)建 Flutter，但沒有您我們就無法做到這一切。Flutter 社區(qū)是獨一無二的，我們感謝您所做的一切。祝您假期愉快，我們新的一年見！

原文標(biāo)題：Flutter 2.8 | 一文解讀重點更新

文章出處：【微信公眾號：谷歌開發(fā)者】歡迎添加關(guān)注！文章轉(zhuǎn)載請注明出處。