【譯】Flutter 2.2中的新功能

原文：What’s new in Flutter 2.2

作者：Chris Sells

釋出時間：2021.05.20

Flutter 2.2版本的重點是打磨和優化，包括iOS的效能改進、Android的延遲元件、更新Flutter web的 service worker等。

今天是我們釋出Flutter 2.2的日子。您可以通過切換到穩定頻道並升級當前的Flutter，或者到flutter.dev/docs/get-st…開始安裝來獲得它。

儘管距Flutter 2釋出才幾個月，但我們在2.2中還是有很多改進要分享。這個版本在框架、引擎和外掛庫中合併了2456個PR，關閉了3105個問題。特別感謝Flutter社群，他們提供了大量的PR和PR審查，其中Abhishek01039貢獻了最多的PR（17個），xu-baolin審查了最多的PR（9個）。感謝所有貢獻者對Flutter 2.2的幫助，沒有你們，我們無法做到這一點。

隨著每個新的Flutter穩定版的釋出，都會有一組新的更新，無論是效能增強、新功能還是bug修復。此外還包括一些尚未能用於生產的功能，但我們希望您能夠驗證它們是否按照您希望的方式工作。最後，每個新版本都會有一系列相關的工具更新和來自更大的Flutter社群的更新。說實話，現在每個新版本的Flutter都有很多事情要做，我們無法在一篇部落格中將其全部記錄下來，但我們會將重點介紹一下。

Flutter 2.2在穩定版中的更新

這個版本涵蓋了Flutter 2基礎上的廣泛改進，包括Android、iOS和Web的更新，新的Material圖示，TextSpan的文字處理、滾動條行為和滑鼠游標支援的更新，以及如何從單一原始碼基礎上最好地支援多種平臺的新指導。所有這些功能現在都是穩定版的，可以在生產中使用。而且所有這些都是建立在新的Dart版本上的。

Dart 2.13

Flutter 2.2伴隨著Dart 2.13的釋出。在其他方面，這個Dart更新包含一個新的型別別名功能，它使你能夠為型別和函式建立別名。

// Type alias for functions (existing)
typedef ValueChanged<T> = void Function(T value);

// Type alias for classes (new!)
typedef StringList = List<String>;

// Rename classes in a non-breaking way (new!)
@Deprecated("Use NewClassName instead")
typedef OldClassName<T> = NewClassName<T>;
複製程式碼

型別別名可以為長而複雜的型別提供一個漂亮的短名稱，它還可以讓你以一種不中斷的方式重新命名你的類。Dart 2.13中還有更多的新功能；詳情請參閱Dart 2.13釋出公告。

譯者注：要啟用型別別名，請將pubspec中較低的Dart SDK約束設定為至少2.13：

environment:
  sdk: ">=2.13.0 <3.0.0"
複製程式碼

Flutter web 更新

Flutter web，在這個版本中得到了改進。 首先，我們通過新的service worker載入機制優化了快取行為，並修復了main.dart.js的重複下載。在以前的Flutter web版本中，service worker會在後臺下載更新到你的應用，同時讓使用者訪問應用的舊版本。更新被下載，使用者不會看到這些變化，直到他們重新整理了幾次瀏覽器頁面。從Flutter 2.2開始，當新的service worker檢測到一個變化時，使用者將等到更新被下載後再使用該應用，但隨後他們將看到更新，而不需要第二次手動重新整理頁面。

啟用這一變化需要您重新生成Flutter應用程式的index.html。要做到這一點，請注意儲存您之前的修改，刪除index.html檔案，然後在您的專案目錄中執行flutter create .來重新建立它。

我們還對兩個Web渲染器進行了改進。對於 HTML，我們增加了對字型功能的支援，以便能夠設定 FontFeature 以及使用Canvas API 來渲染文字，使其在懸停時出現在正確的位置。對於 HTML 和 CanvasKit，我們增加了ShaderMask和computeLineMetrics的支援，解決了 Flutter web和移動應用程式之間的差距。例如，開發人員現在可以使用Opacity來執行ShaderMask的淡出過渡，像移動應用程式那樣使用computeLineMetrics。

對於Flutter web，以及一般的Flutter，可訪問性是我們的首要任務之一。按照設計，Flutter通過建立一個SemanticsNode樹來實現可訪問性。一旦Flutter網路應用使用者啟用了可訪問性，該框架就會生成一個與RenderObject DOM樹平行的DOM樹，並將語義屬性轉化為Aira。在這個版本中，我們改進了語義節點的位置，以便在使用變換時縮小移動和桌面web應用之間的差距，這意味著當Widget使用變換樣式時，焦點框應該正確地出現在元素上。瞭解實際情況，請看下面這個視訊。它的作者是領導Material Design可訪問性專案的Victor Tsaran。

視訊地址：youtu.be/A6Sx0lBP8PI （Using VoiceOver with Flutter Gallery app on the web）

我們還在profile和release模式中用一個命令標誌公開了語義節點除錯樹，通過視覺化為web應用建立的語義節點，幫助開發人員除錯可訪問性。

要為您自己的Flutter web應用啟用這一點，請執行以下命令:

$ flutter run -d chrome --profile \
  --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true
複製程式碼

啟用該標誌後，您將能夠在Widget上看到您的語義節點並進行除錯，看看語義元素是否被放在了不應該放的地方。如果您發現這樣的例子，請毫不猶豫地提交一份錯誤報告。

雖然我們在支援一系列核心無障礙功能方面取得了重大進展，但我們將繼續改善無障礙支援。在2.2穩定版之外的master和dev中，我們新增了一個API，讓開發者以程式設計方式為他們的應用程式自動啟用無障礙功能，並正在修復與螢幕閱讀器使用Tab的問題。

最後，最新版本的Flutter DevTools現在支援Flutter Web應用的佈局瀏覽器。 這一更新為你提供了在Web上的佈局除錯工具，與你在移動和桌面應用程式中習慣使用的一樣。

iOS頁面過渡和增量安裝

對於iOS，在這個版本中，我們將渲染動畫幀所需的時間減少75%，使得頁面在Cupertino的過渡更加流暢，在低端手機上可能會更多。我們不只是在尋找終端使用者的效能改進；我們也一直在尋找提高開發效能的方法。

在這個版本中，我們在開發過程中實現了增量iOS安裝。在我們的基準測試中，我們發現iOS應用更新版本的安裝時間減少了40%，這也減少了測試應用變化時的週轉時間。

使用 Flutter 構建平臺自適應的應用程式

隨著Flutter的擴充套件，穩定地支援更多的平臺，需要考慮的不僅支援不同的外形，如手機、平板電腦和桌面，而且支援不同的輸入型別（觸控與滑鼠+鍵盤）和具有不同習慣的平臺，如導航抽屜與系統選單的導航，變得非常有用。我們把能夠適應不同目標平臺的細節的應用程式稱為 "平臺自適應 "應用程式。

關於在構建平臺自適應應用程式時需要注意的問題，我們將向您介紹來自Kevin Moore的構建平臺自適應應用程式課程。如果想了解更詳細的情況，請檢視flutter.dev上的平臺自適應應用程式指南。

最後，對於根據這些原則為多個平臺編寫的示例應用，我們推薦gSkinner的Flokk和Flutter Folio應用。你可以下載Flokk和Folio的程式碼，也可以從各種應用商店下載Flokk和Folio，或者直接從瀏覽器執行它們。另一個很好的例子是用於建立指導的應用程式本身：youtu.be/8YUIrIGGc3Y

Flutter平臺自適應應用程式指南的UX部分是基於新的大屏Material指南。這個來自Material團隊的新指導包括對幾篇主要佈局文章的重寫，以及對幾個元件的更新和一個更新的設計工具包，所有這些都考慮到了大屏。

Flutter的目標一直是使應用程式不僅僅在多個平臺上執行；在您的應用程式在所有目標平臺上執行良好之前，我們我們不會就此停止。Flutter擁有你所需要的支援，不僅可以將你的應用程式定位在多個平臺上，而且還打算根據這些平臺的螢幕大小、輸入模式和習慣來調整你的應用程式。

更多Material圖示

在Material指導的問題上，在這個版本中，我們不是一個而是兩個獨立的PR，為Flutter新增了新的Material圖示，包括Dash的圖示。

這些更新使你的應用程式的Material圖示總數超過了7000個。如果你難以在這些豐富的圖示中找到你要找的圖示（誰不會呢？），你可以在fonts.google.com/icons上按類別和名稱搜尋。 一旦你找到了完美的圖示，新的 "Flutter "選項卡會告訴你如何使用它，或者你可以只下載該圖示，作為你的應用程式中的獨立資源使用。將Dash新增到您的Flutter應用中從未如此簡單。

改進文字處理

隨著我們不斷改進Flutter以支援每個平臺上的細節，我們繼續推進新的領域，這些領域在移動平臺上不如在桌面上那麼重要。其中一個領域就是文字處理。在這個版本中，我們已經開始重構我們處理文字輸入的方式，比如在Widget中出現氣泡時取消按鍵，並引入完全自定義與文字操作相關的按鍵功能。

由於能夠取消按鍵，Flutter可以在不觸發滾動事件的情況下實現空格鍵和方向鍵等功能，為您的使用者提供更直觀的體驗。您可以使用同樣的能力，在按鍵進入您自己的應用程式中的父Widget之前處理按鍵。另一個例子是，在這個版本中，您可以在程式中的TextField和一個按鈕之間進行Tab操作，而且它可以正常工作。

import 'package:flutter/material.dart';
 
void main() => runApp(App());
 
class App extends StatelessWidget {
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Flutter Text Editing Fun',
       home: HomePage(),
     );
}
 
class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) => Scaffold(
       body: Column(
         children: [
           TextField(),
           OutlinedButton(onPressed: () {}, child: const Text('Press Me')),
         ],
       ),
     );
}
複製程式碼

自定義文字操作允許您做一些事情，比如在TextField中對Enter鍵進行特殊處理；例如，您可以在聊天客戶端中觸發傳送訊息，同時仍然允許通過Ctrl+Enter插入換行。這些相同的文字操作允許Flutter本身提供不同的按鍵，以配合主機作業系統本身的文字編輯行為，例如，在Windows和Linux上的Ctrl+C，但在macOS上的Cmd+C。

下面的示例覆蓋了預設的左箭頭操作，併為退格鍵和刪除鍵提供了一個新的操作:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Flutter TextField Key Binding Demo',
       home: Scaffold(body: UnforgivingTextField()),
     );
}
 
/// A text field that clears itself if the user tries to back up or correct
/// something.
class UnforgivingTextField extends StatefulWidget {
 @override
 State<UnforgivingTextField> createState() => _UnforgivingTextFieldState();
}
 
class _UnforgivingTextFieldState extends State<UnforgivingTextField> {
 // The text editing controller used to clear the text field.
 late TextEditingController controller;
 
 @override
 void initState() {
   super.initState();
   controller = TextEditingController();
 }
 
 @override
 Widget build(BuildContext context) => Shortcuts(
       shortcuts: <LogicalKeySet, Intent>{
         // This overrides the left arrow key binding that the text field normally
         // has in order to move the cursor back by a character. The default is
         // created by the MaterialApp, which has a DefaultTextEditingShortcuts
         // widget in it.
         LogicalKeySet(LogicalKeyboardKey.arrowLeft): const ClearIntent(),
 
         // This binds the delete and backspace keys to also clear the text field.
         // You can bind any key, not just those already bound in
         // DefaultTextEditingShortcuts.
         LogicalKeySet(LogicalKeyboardKey.delete): const ClearIntent(),
         LogicalKeySet(LogicalKeyboardKey.backspace): const ClearIntent(),
       },
       child: Actions(
         actions: <Type, Action<Intent>>{
           // This binds the intent that indicates clearing a text field to the
           // action that does the clearing.
           ClearIntent: ClearAction(controller: controller),
         },
         child: Center(child: TextField(controller: controller)),
       ),
     );
}
 
/// An intent that is bound to ClearAction.
class ClearIntent extends Intent {
 const ClearIntent();
}
 
/// An action that is bound to ClearIntent that clears the TextEditingController
/// passed to it.
class ClearAction extends Action<ClearIntent> {
 ClearAction({required this.controller});
 
 final TextEditingController controller;
 
 @override
 Object? invoke(covariant ClearIntent intent) {
   controller.clear();
 }
}
複製程式碼

我們還有更多的工作要做，但我們正在努力為您提供完整的文字編輯操作。我們的目標是，到Flutter桌面穩定時，您的使用者將無法區分在Flutter應用程式中編輯文字與其他應用程式之間的區別。

自動滾動行為

作為我們繼續追求使Flutter應用程式在每個平臺上表現得像最好的應用程式的一部分，我們在這個版本中又看了一下滾動條。當涉及到實際顯示滾動條時，Android和iOS都是一樣的；它們預設不會顯示滾動條。另一方面，對於桌面應用程式來說，當內容大於容器時，通常會自動顯示滾動條，這需要你新增一個Scrollbar父部件。為了在移動或桌面上獲得正確的行為，本版本在必要時自動新增一個滾動條。

考慮以下沒有滾動條的程式碼:

import 'package:flutter/material.dart';
 
void main() => runApp(App());
 
class App extends StatelessWidget {
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Automatic Scrollbars',
       home: HomePage(),
     );
}
 
class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) => Scaffold(
       body: ListView.builder(
         itemCount: 100,
         itemBuilder: (context, index) => Text('Item $index'),
       ),
     );
}
複製程式碼

在桌面上執行時，會出現一個滾動條。

如果你不喜歡滾動條的外觀或者它總是被顯示出來，你可以設定一個ScrollBarTheme。如果你不喜歡這個預設行為，你可以通過設定ScrollBehavior來改變整個應用程式或某個特定例項。關於新的預設滾動條行為的更多細節，以及如何將您的程式碼遷移到新的最佳實踐集，請檢視flutter.dev上的文件。

TextSpan上的滑鼠游標

在Flutter的早期版本中，您可以在任何小部件上新增滑鼠游標（就像一隻手錶示可點選的東西）。事實上，在大多數情況下，Flutter本身會為您新增這些滑鼠游標，比如在所有按鈕上新增一個滑鼠游標。然而，如果你想要一個RichText在不同的TextSpan具有自己的樣式和足夠長的包裹，你很不走運——TextSpan不是一個Widget，因此不能被用作滑鼠游標的視覺範圍......直到現在。! 從這個版本開始，當你有一個帶有手勢識別器的TextSpan時，你會自動得到相應的滑鼠指標。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart' as urlLauncher;
 
void main() => runApp(App());
 
class App extends StatelessWidget {
 static const title = 'Flutter App';
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: title,
       home: HomePage(),
     );
}
 
class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text(App.title)),
       body: Center(
         child: RichText(
           text: TextSpan(
             style: TextStyle(fontSize: 48),
             children: [
               TextSpan(
                 text: 'This is not a link, ',
                 style: TextStyle(color: Colors.black),
               ),
               TextSpan(
                 text: 'but this is',
                 style: TextStyle(color: Colors.blue),
                 recognizer: TapGestureRecognizer()
                   ..onTap = () {
                     urlLauncher.launch('https://flutter.dev');
                   },
               ),
             ],
           ),
         ),
       ),
     );
}
複製程式碼

現在，你可以擁有你想要的所有換行文字範圍，任何有識別器的文字都會得到相應的滑鼠指標。

在這個版本中，TextSpan還支援onEnter和onExit，以及mouseCursor。像這樣的事情可能看起來很小，但它們能讓使用者像他們所期望的那樣使用Flutter應用。

Flutter 2.2中更新的預覽功能

除了可供生產使用的新功能外，Flutter 2.2還附帶了一些預覽版的功能，包括iOS著色器編譯器的效能改進、Android延遲元件支援、Flutter桌面更新以及索尼的ARM64 Linux主機支援。請試一試這些功能，如果你有任何問題，請告訴我們。

iOS著色器編譯的改進

在圖形渲染術語中，"著色器 "是一個要在裝置上可用的GPU上編譯和執行的程式。Flutter自成立以來一直使用底層Skia圖形庫中的著色器，在其自身的高質量圖形效果中提供具有顏色、陰影、動畫等的原生效能。由於Flutter的API的靈活性，著色器是即時生成和編譯的。當編譯著色器的時間超過了一幀的時間，其結果是使用者可以注意到的 "jank"。

為了避免jank，Flutter提供了在訓練執行期間快取著色器的能力，然後將其打包並與應用程式捆綁，並在Flutter Engine啟動時的第一幀之前進行編譯。這意味著預編譯的著色器不需要在一幀工作負載中編譯，也不會導致jank。然而，Skia最初只為OpenGL實現了這個功能。

因此，當我們在iOS上預設啟用Metal以應對蘋果廢棄的OpenGL時，根據我們的基準測試，最差的幀時間增加了，使用者報告的jank也增加了。我們自己的測量表明，這些報告通常是由於著色器編譯時間的增加，Skia為Metal後端生成的著色器數量的增加，以及編譯的著色器未能在不同的執行中被快取，從而使jank持續到應用程式的第一次執行。

然而，現在在dev頻道上有一個關於Skia中對Metal著色器預熱的新支援的預覽。通過Skia，Flutter現在可以在第一幀工作負荷開始前編譯捆綁的著色器。

然而，這個解決方案也有一些注意事項。

• Skia為Metal生成的著色器仍然比為OpenGL生成的多。
• 最終著色器編譯到機器碼仍然與幀工作同步進行，但這比作為幀渲染時間的一部分進行整個著色器生成和編譯要快。
• 產生的機器碼在應用程式第一次執行後被快取起來，直到裝置被重新啟動。

如果你想在你的應用程式中利用這個新的支援，你可以按照flutter.dev上的說明進行操作。

不過，我們還沒有完成這項工作。在Android和iOS上，這種實現都有一些缺點。

• 部署的應用程式的大小較大，因為它包含捆綁的著色器。
• 應用程式的啟動延遲更長，因為捆綁的著色器需要預先編譯。
• 在開發者體驗來說，我們對這種實現並不滿意。

我們認為最後一個問題是最需要解決的。我們認為執行訓練的過程，以及對應用程式大小和應用程式啟動延遲造成的權衡太過繁瑣。因此，我們繼續研究消除著色器編譯jank的方法，以及所有不依賴於這種實現的jank。我們正在與Skia團隊合作，以減少它為Flutter而生成的著色器的數量，以及調查Flutter在多大程度上可以通過與Flutter引擎捆綁一小組靜態定義著色器來實現。

你可以在Flutter repo中關注這個專案，看看我們的進展。

安卓延遲元件

對於Android，這個版本使用Dart拆分AOT編譯功能，允許Flutter應用程式在執行時下載包含提前編譯的程式碼和資產的模組。我們把這些可安裝的分片中的每一個稱為延遲元件。通過將程式碼和資產的下載推遲到需要時才進行，可以大大減少初始安裝大小。例如，我們在Flutter Gallery的一個版本中推遲了所有的研究和演示，並看到初始安裝大小減少了46%。

當啟用延遲元件進行構建時，Dart將專門用deferred關鍵字匯入的程式碼編譯成獨立的共享庫中，這些共享庫與資產一起打包成延遲元件。

遞延元件目前只在Android上可用，這個功能是作為早期預覽提供的。瞭解如何實現延遲元件。該頁面還連結到Flutter wiki上的一個頁面，該頁面包含對該功能工作原理的深入研究。

Flutter Windows UWP alpha

在這個版本中，Flutter的另一個更新是針對桌面愛好者的；對Windows UWP的支援已經轉移到dev頻道中的alpha版本（超過了穩定的2.2版本）。UWP允許你將你的Flutter應用帶到標準Windows應用不能執行的裝置上，包括Xbox。要嘗試它，你首先需要先設定UWP。然後，切換到dev頻道並啟用UWP支援。

$ flutter channel dev
$ flutter upgrade
$ flutter config — enable-windows-uwp-desktop
複製程式碼

一旦啟用，建立Flutter應用程式包括一個新的winuwp資料夾，它允許你在一個UWP容器中構建和執行你的應用程式。

$ flutter create uwp_fun
$ cd uwp_fun
$ flutter pub get
$ flutter run -d winuwp
複製程式碼

因為你正在構建一個Windows UWP應用程式，它在Windows的沙盒環境中執行，在開發過程中，你需要啟用應用程式的入站連線（Inbound Connections），以啟用熱過載和除錯斷點等功能。您可以按照Flutter桌面文件頁面上的說明，通過checknetisolation命令來實現。一旦你完成了這些，你就可以看到你最喜歡的Flutter應用程式作為UWP應用程式在Windows上執行。

當然，你可以執行更有趣的UWP應用，比如這些在Xbox上執行的Flutter應用。

視訊連結：youtu.be/s_zIzr60vMA

特別感謝clarkezone，他在這個方面的工作時間和我在Flutter團隊的時間差不多。關於Windows UWP alpha的更多細節，請檢視flutter.dev/desktop/#wi…。

索尼提供的ARM64 Linux主機支援

在Flutter社群廣大成員中另一項傑出努力的軟體工程師來自索尼公司的HidenoriMatsubayashi，他貢獻了對ARM64 Linux的支援。這個PR使您能夠在ARM64 Linux機器上構建和執行Flutter應用程式。

看到Flutter社群將Flutter帶到谷歌團隊無法想象的地方，這讓人很興奮。繼續努力吧，HidenoriMatsubayashi!

Flutter 生態系統和工具的更新

Flutter 引擎和框架只是整體體驗的一部分。軟體包生態系統和工具的更新對Flutter開發者的體驗同樣重要。我們在這些領域有一些很棒的更新可以分享。

在生態系統方面，我們有許多新的Flutter Favorite包要宣佈，以及對FlutterFire的幾個更新，即Flutter對Firebase的支援。更棒的是，FlutterFire支援新的Firebase App Check預覽，因此Flutter開發者可以在第一天就利用它。

在工具方面，Flutter DevTools有新的更新，用於優化應用程式的記憶體佔用，一個新的provider選項卡。VS Code和Android Studio/IntelliJ的IDE外掛也有明顯的更新，如果你是針對Flutter的內容作者，還有一種全新的方式可以將DartPad整合到你的寫作中。

最後，有一個新的低程式碼應用設計和構建工具，名為FlutterFlow，它以Flutter為目標，在web上執行，因為它本身就是用Flutter構建的。

Flutter Favorite 更新

作為此次釋出的一部分，Flutter生態系統委員會一直在努力工作，以認證24個新的Flutter Favorite外掛，這是我們迄今為止最大的擴充套件。新的Flutter Favorite包括。

• FlutterFire ：cloud_firestore、cloud_functions、firebase_auth、firebase_core、firebase_crashlytics、firebase_messaging 和 firebase_storage。

• Flutter社群的 "plus "外掛：android_alarm_manager_plus, android_intent_plus, battery_plus, connectivity_plus, device_info_plus, network_info_plus, package_info_plus, sensors_plus, 和 share_plus。

• googleapis

• win32

• intl 和 characters

• sentry：sentry和sentry_flutter

• infinite_scroll_pagination和 flutter_native_splash

所有這些包都已經被遷移到空安全，並根據情況支援Android、iOS和web。例如，firebase_crashlytics在web上沒有底層SDK，android_alarm_manager_plus是專門為Android設計的。

Flutter社群的 "plus "外掛提供了Flutter團隊的相應包的超集。例如，battery在最初的Flutter釋出之前就已經由谷歌的Flutter團隊提供，並且已經遷移到空安全，但只支援Android和iOS。而Flutter社群的battery_plus包則支援所有六個Flutter平臺，包括網路、Windows、macOS和Linux。所有9個 "plus "包都獲得了Flutter最喜愛獎，這代表著Flutter社群整體在成熟度上邁出了一大步。Flutter要比谷歌的工程師團隊所做的事情多得多。你應該儘快將你的程式碼遷移到 "plus "軟體包中，在未來幾周內，谷歌的相應軟體包將被更新為建議你這樣做。

googleapis外掛提供了圍繞185個Google APIs的自動生成的Dart包裝器，可用於您的客戶端或伺服器端Dart應用程式（包括您的Flutter應用程式）。如果您想了解更多關於這個包的資訊，作者在I/O大會上有一個關於使用谷歌API為您的Flutter應用提供動力的演講。

win32包是一個工程奇蹟，它使用Dart FFI封裝了大多數常用的Win32 API呼叫，使它們可以被Dart程式碼訪問，而不需要C編譯器或Windows SDK。隨著Flutter在Windows平臺上的普及，win32包已經成為許多流行外掛的關鍵依賴，包括最流行的外掛之一path_provider。而作為對完整性的測試，作者Timsneath做了一些瘋狂的事情，如實現記事本、蛇和俄羅斯方塊。

如果你在Windows上用Dart或Flutter做任何事情，win32絕對值得一試。

FlutterFire更新和Firebase App Check

FlutterFire是Flutter對Firebase的支援，是與Flutter一起使用的最受歡迎的外掛集之一。Invertase做了大量工作，使其在Flutter 2版本中投入生產，並在此後繼續改進。事實上，自從FlutterFire最初的產品釋出以來，Invertase已經將open issues的數量減少了79%，將未完成的PR數量減少了88%。此外，他們不僅在生產質量的外掛方面做得很好，他們還將beta質量的外掛遷移到空安全，並保持它們在同一個核心上構建和執行，這樣你就可以混合和匹配。

此外，Invertase繼續為FlutterFire外掛增加新的功能，包括在這個版本的Flutter與Cloud Firebase的整合進行了一些更新：

• 用於讀寫資料的型別安全API
• 支援Firebase本地模擬器套件
• 用資料捆綁優化您的資料查詢

最後，FlutterFire為一個新的Firebase產品Firebase App Check的測試版提供支援。Firebase App Check可以保護您的後端資源，如雲端儲存，免受賬單欺詐或網路釣魚等濫用。通過應用檢查，執行您的Flutter應用的裝置使用一個應用身份證明來證明它確實是您的真實應用，還可能檢查它是否執行在一個真實的、未被篡改的裝置上。一旦你啟用應用檢查，這個認證就會附加到你的應用程式對你的Firebase後端資源的每個請求中。要了解更多資訊，請參閱FlutterFire App Check文件。

Flutter DevTools 更新

Flutter DevTools在這個版本中有許多值得注意的更新，包括兩個記憶體跟蹤的改進和一個專門針對provider外掛的全新的選項。 在這個版本的DevTools中，第一個記憶體跟蹤改進提供了跟蹤一個物件被分配的位置的能力。這有助於在程式碼中找到記憶體洩漏的位置。

第二個是將自定義資訊注入記憶體時間軸的能力。這允許你提供特定於你的應用程式的標記，比如在你做一些記憶體密集型工作之前和之後，以便你可以檢查你是否正確地清理了東西。

隨著Flutter應用程式的規模越來越大，我們將繼續確保Flutter開發人員擁有他們所需的工具來追蹤和修復記憶體洩漏和各種執行時問題。

你想追蹤的不僅僅是你使用Flutter框架時出現的執行時問題，有時你也想追蹤與軟體包相關的問題。在pub.dev上有超過15000個與Flutter相容的軟體包和外掛，隨著時間的推移，你的應用使用更多軟體包的可能性也會越來越大。因此，考慮到這一點，我們一直在嘗試在Flutter DevTools中新增一個新的Provider 選項。事實上，這個選項是由Remi Roussel建立的，他是包本身的作者（還有許多其他美妙的東西）。如果您正在執行最新版本的Flutter DevTools，並且您正在除錯一個使用provider包的Flutter應用程式，您將自動獲得新的Provider選項。 Provider選項向你顯示與你的每個provider相關的資料，包括執行應用程式時的實時變化。如果這還不夠神奇，它還允許你直接改變資料，來測試應用程式。

與Remi在這個功能上的合作讓我們學到了一些關於如何更好地支援其他想做同樣事情的軟體包作者的東西；你可以在 Flutter DevTools Plugins提案中讀到Remi如何建立Provider選項以及我們目前關於如何啟用更多選項的想法。請給我們反饋，並隨時聯絡我們，告訴我們您對Flutter DevTools中新功能的計劃。

這只是本次釋出的Flutter DevTools中的一些很酷的新東西。對於完整的列表，請檢視這裡的個別公告。

• Flutter DevTools 2.1 版本說明
• Flutter DevTools 2.2.1 釋出說明
• Flutter DevTools 2.2.3 釋出說明

IDE 外掛更新

在這個版本中，針對Flutter的VS Code和IntelliJ/Android Studio IDE擴充套件也都得到了更新。例如，VS Code擴充套件現在支援兩個額外的Dart程式碼重構。Inline Method和Inline Local Variable。

在Android Studio/IntelliJ擴充套件中，我們新增了將所有堆疊列印到控制檯的能力。

這在專案中很有幫助，因為根本原因可能是在一個不同的軟體包中，而這個軟體包以前並沒有被列印出來。我們已經有了關於如何使其不那麼明顯的冗長的想法，所以在未來會有更多的變化。

關於這個版本的IDE擴充套件的完整變化列表，請檢視這些公告：

• VS Code extension v3.21
• VS Code extension v3.22
• Flutter IntelliJ Plugin M55 Release
• Flutter IntelliJ Plugin M56 Release

DartPad工坊

為了確保快速發展的Flutter開發社群有足夠的文件，Dart和Flutter團隊一直在尋找改進和擴充套件建立教育內容的方法。隨著這個版本的釋出，我們為DartPad增加了一個新的，循序漸進的使用者介面，開發人員可以用它來跟隨指導的學習。

通過在DartPad中直接新增說明，我們為I/O提供了有指導的工坊體驗。然而，我們不只是為我們自己的工坊建立它；如果你想在你的Dart或Flutter中使用它，你可以通過遵循DartPad工坊創作指南來實現。除此之外，還可以在Gist中使用DartPad共享程式碼，並將其嵌入到你自己的網站中，這一功能已經有一段時間了。

我們希望每個製作Dart和Flutter內容的人都能為他們的使用者提供豐富的互動體驗。請試一試這個新功能，並讓我們知道您的想法。

社群焦點:FlutterFlow

FlutterFlow是一個“低程式碼”(low code)的應用設計和開發工具，用於在瀏覽器內構建應用。它提供了一個所見即所得環境，使用來自Firebase的真實資料在多個頁面上佈置您的應用程式。低程式碼工具的目標是輕鬆完成大多數常見的事情，讓你儘可能少寫幾行自定義程式碼。事實上，作為一個演示，他們在不到一個小時的時間內建立了一個完整的多頁移動應用程式，用於瀏覽大都會藝術博物館。你可以在YouTube上看到整個過程。

FlutterFlow輸出Flutter程式碼，所以如果您需要新增程式碼來進一步定製您的應用程式，您可以。您可以在flutterflow.io上閱讀關於FlutterFlow產品釋出的資訊。

破壞性變化

像往常一樣，我們努力減少破壞性變化的數量，在這個版本中，我們將其限制在刪除這些棄用的內容。

• 73750 刪除廢棄的二進位制資訊（BinaryMessages）
• 73751 刪除廢棄的TypeMatcher類

你可以在flutter.dev上找到這些破壞性變化的解決措施。

總結

像往常一樣，我們谷歌Flutter團隊中的所有人都想說——謝謝你們。感謝你成為社群的一員，讓這一切成為可能。在 Play Store 中，有超過八分之一的新應用程式是用 Flutter 開發的，僅在 Play Store 中就有超過 20 萬個 Flutter 應用程式，我們的持續增長令人驚歎。世界各地各種規模的應用程式都使用Flutter製作完成美麗多平臺體驗，以滿足使用者的需求。

最後，如果你錯過了它，在你離開今年的I/O之前，別忘了看看在Flutter和Firebase中構建的I/O Photo Booth web應用，與Dash一起抓拍一張自拍。我們開源了程式碼，所以你可以挖掘Flutter web的最佳實踐，相機外掛web支援，並學習我們如何使用雲功能來生成自定義的社交帖子。