Flutter 2.2 全新功能介紹

戀貓de小郭發表於2021-05-21

原文連結:medium.com/flutter/wha…

本次 Flutter 2.2 正式版主要著重於優化:包括 iOS 效能改進,Android 延遲載入元件,針對 Flutter Web 的更新等等

每個 Flutter 新穩定版本的釋出都會帶來一些更新,無論是效能增強、新功能還是錯誤修復,儘管 Flutter 2 才發行了兩個月,但 2.2 依舊在 Flutter 2 的基礎上做了很多改進,**該版本合併了 2456 個 PR,涉及 Framework、 engine 和 plugins 的 issue 關閉了 3105 個 **。

Flutter 2.2 更新穩定

此版本在 Flutter 2 之上進行了大量的改進,包括 Android,iOS 和 Web 上的更新,如新的Material 圖示,文字處理,滾動條行為的更新以及對 TextSpan 控制元件的滑鼠游標支援。

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 內容 :medium.com/dartlang/an…

Flutter Web 更新

Flutter Web 作為 Flutter 最新的穩定平臺,Web 在此版本中做了很多的改進。

首先,使用新的 service 載入機制優化了快取行為,並修復了的重複下載 main.dart.js 的問題。

在 Flutter Web 的早期版本中,後臺在更新下載到應用程式後,使用者不重新整理瀏覽器是不會看到這些更改,而從 Flutter 2.2 開始,當檢測到更改時使用者可以直接看到更新,而無需再次手動重新整理頁面。

啟用此更改要求重新生成 Flutter 應用的 index.html,所以你可以先儲存 index.html 裡的修改,然後刪除 index.html 檔案,再通過 flutter create . 在專案目錄中執行從而重新建立它。

Flutter 2.2 還對兩個 Web 渲染器進行了改進:

  • 對於 HTML 新增了對字型功能的支援,啟用設定 FontFeature 以及使用畫布 API 渲染文字,以便在懸停時將其顯示在正確的位置。

  • 對於 HTML 和 CanvasKit都新增了 computeLineMetrics 和對著色器蒙板的支援,以解決 Flutter Web 和移動應用程式之間的差距,例如:開發人員現在可以使用不透明蒙板,使用著色器蒙板執行淡出過渡,並使用 computeLineMetrics 像在移動應用程式中一樣使用。

對於 Flutter Web 而言,Semantics 是的首要任務之一, Flutter 通過構建SemanticsNode 樹來實現可訪問性。Flutter Web 使用者啟用 Semantics 後,框架將生成與 DOM 樹平行的 RenderObjectDOM樹,並將語義屬性轉換為 Aira

在此版本中改進了語義節點的位置,以縮小使用轉換時移動和桌面 Web 應用程式之間的距離,這意味著在使用轉換為 Widget 設定樣式時,焦點框應正確顯示在元素上。

我們還在配置檔案和釋出模式下使用命令列標誌公開了語義節點除錯樹,以幫助開發人員通過視覺化為其 Web 應用程式建立的語義節點來除錯可訪問性。

要在 Flutter Web 應用啟用此功能,請執行以下命令:

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

啟用該標誌後將能夠在 Widget 頂部看到語義節點,就可以除錯並檢視語義元素是否放置在不應放置的位置。

雖然在支援一系列核心輔助功能方面取得了比較大的進步,但我們將繼續改善輔助功能的支援。在 2.2 穩定版之後的 masterdev 通道上可用的內部版本中,我們還新增了一個 API,使得開發人員能夠以程式設計方式自動啟用其應用程式的可訪問性,並解決了將 Tab 與螢幕閱讀器配合使用的問題。

最後最新版本的 Flutter DevTools 現在支援 Flutter Web 應用

iOS頁面過渡和增量安裝

在此版本中對於 iOS 我們通過將渲染動畫幀所需的時間減少了 75% ,使在 Cupertino 中的頁面過渡更加平滑麼。

在此版本中還實現了在開發過程中增量的iOS安裝,基準測試中我們發現安裝更新版本的 iOS 應用程式的時間減少了40%

使用 Flutter 構建自適應平臺應用

隨著 Flutter 穩定版的支援平臺越來越多,不僅需要考慮支援不同形式的裝置(例如移動裝置,平板電腦和桌上型電腦),還需要支援不同輸入型別(觸控與滑鼠+鍵盤)以及具有不同平臺的應用,所以我們將:可以根據不同目標平臺的詳細資訊,進行自我調整的應用稱為“平臺自適應”應用

更多可見:flutter.dev/docs/develo…

對於根據這些原則為多個平臺編寫的 Demo 的應用程式,我們推薦參考 gSkinnerFlokkFlutter Folio 應用程式。

Flutter 平臺自適應應用指南的 UX 部分基於新的大螢幕 Material 指南,Material 團隊的新指南包括對一些主要佈局文章的處理,以及對多個元件的更新和更新的設計套件,所有這些都考慮到了大螢幕。

更多材料圖示

在“ Material 指南”的主題上,在此發行版中我們分割出兩個單獨的 PR,為 Flutter 新增了新的 Material 圖示,包括 Dash 自己的圖示。

這些更新使開發者的應用程式的 Material 圖示總數達到了 7,000 多個,現在可以在fonts.google.com/icons 上按類別和名稱進行搜尋。

找到合適的圖示後,新的 Flutter 標籤會顯示如何使用它,或者可以選擇僅下載該圖示以用作應用程式中。

改善文書處理

文字處理一直是 Flutter 裡著重處理的領域,在此版本中已經開始重構處理文字輸入的方式,以啟用諸如在 Widget 點選冒泡時取消 keystroke 之類的功能,並引入完全自定義與文字操作相關的 keystrokes 的功能

能夠取消 keystrokes 使 Flutter 能夠實現使用空格鍵和箭頭鍵之類觸發滾動的功能,從而為終端使用者提供更直觀的體驗。在 keystrokes 進入到應用程式中的父視窗 Widget 之前,開發者可以使用相同的功能來處理 keystrokes

另一個示例是可以在 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')),
         ],
       ),
     );
}
複製程式碼

自定義文字操作讓開發者可以執行諸如 TextFieldEnter 鍵的特殊處理之類的操作,例如可以觸發在聊天客戶端中傳送訊息,同時允許通過 Ctrl + Enter 插入換行符。

這些文字操作使 Flutter 本身可以提供不同的 keystrokes ,以將文字編輯的行為與主機 OS 本身進行匹配,如 Windows 和 Linux上 的 Ctrl + C 和 macOS 上的 Cmd + C

下面的示例將覆蓋預設的向左箭頭操作,併為 BackspaceDelete 鍵提供新的操作:

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();
 }
}
複製程式碼

自動滾動行為

實際顯示滾動條時 Android 和 iOS 的邏輯是相同的,而對於桌面應用程式,當內容大於容器時通常會自動顯示滾動條,這需要新增 Scrollbar 作為父 Widget為了在手機或 PC 上都能正常,此版本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 的早期版本中,開發者可以在任何視窗小部件上新增滑鼠游標(如指示可點選內容的手),而實際上 Flutter 本身在大多數情況下會新增這些滑鼠游標,例如:在所有按鈕上新增一個手形滑鼠游標。

但是如果要執行帶有不同文字跨度,且具有各自樣式並且可能足夠長的自動換行的格式豐富的文字,那麼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');
                   },
               ),
             ],
           ),
         ),
       ),
     );
}
複製程式碼

現在可以擁有所需的自動換行文字跨度,並且其中任何帶有識別器的文字都將獲得適當的滑鼠游標。

image.png

在此版本中,TextSpan 還支援 onEnteronExit ,並且對應的擁有 mouseCursor

Flutter 2.2 更新預覽

除了可用於生產的新功能外,Flutter 2.2 還提供了許多預覽功能,包括 iOS 著色器編譯器效能改進,Android 延遲元件支援,Flutter 桌面更新以及 Sony 的 ARM64 Linux 主機支援

預覽:iOS著色器編譯改進

用圖形渲染術語來說,“著色器” 是要在終端使用者裝置上可用的 GPU 編譯並執行的程式。自成立以來 Flutter 一直在底層 Skia 圖形庫中使用著色器,以其自身的高質量圖形效果(包括顏色,陰影,動畫等)提供本機效能。

由於 Flutter API 的靈活性,著色器可以實時生成和編譯,並與需要它們的幀工作負載同步,所以當編譯著色器的時間超出框架預算時,體驗結果對於使用者來說會很明顯。

為了避免出現問題,Flutter 提供了在執行期間訓練快取著色器的功能,然後將它們打包並捆綁到應用程式中,並在 Flutter Engine 啟動時在第一幀之前進行編譯。這意味著預編譯的著色器不必在幀工作負載期間進行編譯,也不會造成垃圾回收,但是 Skia 最初僅為 OpenGL 實現了此功能。

因此當我們預設情況下在 iOS 上啟用 Metal 以響應 Apple 棄用 OpenGL 時,根據我們的基準測試,渲染幀時間增加了,而使用者報告的產生的垃圾也增加了。

我們的測量資料表明,這些報告通常是由於著色器編譯時間增加,Skia 為 Metal 後端生成的著色器數量,增加以及已編譯的著色器無法在各次執行之間快取,而使得 jank 持續到第一次執行之外而導致的一個應用程式。

因此直到現在,在 iOS 上避免這種麻煩的唯一方法是簡化場景和動畫,但這並不理想。

但是,現在在 dev 通道上是 Skia 中對 Metal 的著色器預熱的新支援的預覽,通過 Skia,Flutter 現在可以在第一幀工作負載開始之前編譯帶捆綁的著色器。

但是,此解決方案有一些警告:

  • Skia 仍然需要為 Metal 生成比 OpenGL 後端更多的著色器;
  • 最終的著色器對機器程式碼的編譯仍需要與框架工作負載同步發生,但這比在框架渲染時間中進行整個著色器生成和編譯要快;
  • 首次執行應用程式後,將快取生成的機器程式碼,直到重新啟動裝置為止;

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

但是,我們還沒有完成這項工作。在 Android 和 iOS 上此實現都有一些缺點:

  • 部署的應用程式的大小較大,因為它包含捆綁的著色器;
  • 應用程式啟動等待時間更長,因為捆綁的著色器需要預先編譯;
  • 開發人員暗示了我們對這種實現所帶來的體驗不滿意;

我們認為最後一個問題最重要,特別是檢視了執行培訓執行的過程,並推理了因應用程式大小和應用程式啟動延遲而帶來過於繁瑣的折衷。

因此我們將繼續研究,消除不依賴此實現的著色器編譯垃圾以及所有垃圾的方法。特別是我們正在與 Skia 團隊合作,以減少響應 Flutter 的要求而生成的著色器的數量,並研究使用 Flutter Engine 捆綁的一小套靜態定義的著色器實現。

可以在Flutter 中關注該專案,以瞭解我們的進度:github.com/flutter/flu…

Android 延遲載入元件

對於 Android 版本,使用 Dart 的拆分 AOT 編譯功能,允許 Flutter 應用程式在執行時下載包含提前編譯的程式碼和 assets 的模組

將這些可安裝拆分的模組稱為延遲元件,通過僅在需要時才推遲下載程式碼和 assets ,可以大大減小初始安裝大小,例如我們實施了 Flutter Gallery 版本初始安裝尺寸減少了 46 %

在啟用延遲元件的情況下進行構建時,Dart 會將僅使用 deferred 關鍵字匯入的程式碼編譯到單獨的共享庫中,這些共享庫與 assets 一起打包到延遲元件中

目前延遲元件僅在 Android 上可用,並且此功能作為早期預覽版提供,在 flutter.dev 上新的Deferred components 頁面中瞭解如何實現延遲的元件。

flutter.dev/docs/perf/d…

github.com/flutter/flu…

Flutter Windows UWP Alpha

Flutter 的另一個更新是針對 PC 的,對Windows UWP 的支援已在移至了 alpha。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 的沙箱環境中執行,所以在開發過程中需要在本地主機上的應用程式防火牆上打一個洞,以啟用諸如熱過載和偵錯程式斷點之類的功能。

可以按照 Flutter 桌面文件頁面 checknetisolation 上的說明使用命令執行此操作,完成此操作後可以在 Windows 上看到 Flutter 應用程式作為 UWP 應用程式執行。

當然也可以執行更多有趣的UWP應用,例如在 Xbox 上執行的 Flutter 應用。

請檢視flutter.dev/desktop/#windows-uwp。

索尼對 ARM64 Linux 主機的支援

Flutter 社群的另一項傑出成就來自 Sony 的軟體工程師 HidenoriMatsubayashi,他為針對ARM64 Linux 的支援做出了貢獻,通過此 PR 可以在 ARM64 Linux 上構建和執行 Flutter 應用程式。

github.com/flutter/flu…

Flutter 生態系統和工具更新

Flutter Engine 和 Framework 只是整個 Flutter 生態的一部分,軟體包生態系統和工具的更新對 Flutter 開發人員來說同樣重要。

在生態系統方面,本次將釋出許多新的 Flutter Favorite 軟體包,以及 FlutterFire(Flutter對 Firebase 的支援)的一些更新,其中 FlutterFire 支援新的 Firebase App Check 預覽,因此 Flutter 開發人員可以馬上就用到它。

在工具方面,Flutter DevTools 進行了新的更新以優化應用程式的記憶體佔用,併為提供程式包增加了一個新選項卡,另外 VS Code 和 Android Studio / IntelliJ 的 IDE 外掛都有顯著更新,並且如果是針對 Flutter 的內容作者,則可以採用全新的方式將 DartPad 整合到作品中。

最後有一個名為 FlutterFlow 的新的低程式碼應用程式設計和構建工具,該工具針對 Flutter 並在Web上執行,因為它本身是由 Flutter 構建的。

Flutter 最受歡迎的更新

作為該版本的一部分,Flutter 生態系統委員會認證了 24 個新的 Flutter Favorite 軟體包,這是我們迄今為止最大的擴充套件,新標記的 Flutter 收藏夾包括:

  • FlutterFire :cloud_firestorecloud_functionsfirebase_authfirebase_corefirebase_crashlyticsfirebase_messagingfirebase_storage

firebase.flutter.dev/

  • 社群 plus 包:android_alarm_manager_plusandroid_intent_plusbattery_plusconnectivity_plusdevice_info_plusnetwork_info_pluspackage_info_plussensors_plusshare_plus

plus.fluttercommunity.dev/

  • googleapis
  • win32
  • intlcharacters
  • Sentry packages :sentrysentry_flutter
  • infinite_scroll_paginationflutter_native_splash

所有這些軟體包都已遷移到空安全的狀態,並視情況支援 Android,iOS 和 Web 。

例如:firebase_crashlytics 上沒有底層 SDK,android_alarm_manager_plus 是專門為Android 設計的。

社群 plus 提供從 Flutter 團隊包的超集。例如自 Flutter 最初發行之前,Flutter 團隊就由Google 的電池組提供了 bettery package,並且已遷移至零安全狀態,但僅在 Android 和 iOS 上受支援,而 battery_plus 包另一方面它支援所有六個 Flutter 平臺,包括 Web,Windows,macOS 和 Linux

九個 “plus” 軟體包都獲得了 Flutter 受歡迎的獎項,這代表了 Flutter 整個社群在成熟度上邁出的一大步。

googleapis 外掛提供了約 185 個 Google API 的自動生成的 Dart 包裝器,可在客戶端或伺服器端 Dart應 用程式(包括Flutter應用程式)中使用。

win32 程式包是工程學的奇蹟,它使用 Dart FFI 封裝了大多數常用的 Win32 API 呼叫,以使 Dart 程式碼可以直接訪問它們,而無需使用 C 編譯器或 Windows SDK 。

隨著 Flutter 在 Windows 平臺上的流行,該 win32 軟體包已成為許多流行外掛(包括path_provider)最流行的外掛的關鍵依賴項。作為完整性的測試,作者 timsneath 使用原始 Dart 在原始 Win32 中做了一些有趣的事情,例如實現記事本,蛇和俄羅斯方塊:

該 win32 軟體包絕對值得一試,看看你是否能夠在 Windows 上使用 Dart 或 Flutter 進行了任何操作。

FlutterFire 更新和 Firebase 應用程式檢查

FlutterFire 是 Flutter 對 Firebase 的支援,是 Flutter 上最受歡迎的外掛集合之一。

Invertase 在 Flutter 2 版本上投入生產以來一直在進行改進方面做得非常出色。實際上自FlutterFire 首次釋出以來,Invertase 處理了 79 %的未解決問題,並將未完成的 PR 數減少了88%。

此外他們不僅在生產質量外掛方面做得很好,而且還將 Beta 質量外掛遷移到了零安全性,並使其在同一核心上構建和執行,以便開發者可以混合和匹配。

此外,Invertase 繼續為 FlutterFire 外掛新增新功能,其中包括對該版本 Flutter 進行的 Flutter 與 Cloud Firebase 整合的許多更新:

  • Typesafe 用於讀取和寫入資料的API
  • 支援 Firebase 本地模擬器套件;
  • 使用資料包優化資料查詢

最後 FlutterFire 支援新 Firebase 產品的 Beta 版本:Firebase App Check

Firebase App Check 可保護您的後端資源(如 Cloud Storage )免受計費欺詐或網路釣魚之類的濫用,藉助 App Check 執行 Flutter 應用程式的裝置,會使用應用程式身份證明提供程式來證明它確實是您的真實應用程式,並且還可以檢查它是否在未受干擾的真實裝置上執行。

firebase.flutter.dev/docs/app-ch…

Flutter DevTools 更新

Flutter DevTools 在此版本中進行了許多值得注意的更新,包括兩項記憶體跟蹤改進以及一個僅用於 provider 外掛的全新標籤

此版本的 DevTools 中的第一個記憶體跟蹤改進功能,提供了跟蹤物件分配位置的功能,讓開發者在程式碼中查詢記憶體洩漏的位置非常方便。

第二種是將自定義訊息注入到記憶體時間軸的功能,這樣開發者就可以提供特定於應用程式的標記,例如在完成一些佔用大量記憶體的工作之前和之後,以便可以檢查自己是否清理正確

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

在使用要跟蹤的 Flutter 框架時,不僅是執行時問題,而且還存在一些其他問題:有時開發者也想跟蹤與軟體包有關的問題

pub.dev 上有超過 15,000 個與 Flutter 相容的軟體包和外掛,應用隨著時間的推移使用更多軟體包的可能性越來越大。考慮到這一點,我們一直在嘗試向 Flutter DevTools 新增新的 “Provider”選項卡。

事實上,這個標籤是由 Remi Roussel 建立,provider 包維護人員。如果你正在執行最新版本的Flutter DevTools,並且正在除錯使用 provider 外掛的 Flutter 應用程式,則將自動獲得新的“Provider” 選項卡。

“Provider”選項卡向開發者顯示與每個提供程式相關的資料,包括在執行應用程式時的實時更改,它可以讓您直接更改資料,以測試應用程式的主要情況!

這只是此發行版中Flutter DevTools中一些很酷的新功能,有關完整列表,請在此處檢視各個公告:

IDE外掛更新

Flutter 的 Visual Studio Code 和 IntelliJ / Android Studio IDE 擴充套件也已在此版本中更新,例如 Visual Studio Code 擴充套件現在支援兩個附加的 Dart 程式碼重構:內聯方法和內聯區域性變數

在 Android Studio / IntelliJ 擴充套件中,我們新增了使用選項將所有堆疊跟蹤列印到控制檯的功能

DartPad workshops

為了確保我們能夠在迅速發展的 Flutter 開發人員社群中準備好文件,Dart 和 Flutter 團隊一直在尋找改進和擴充套件建立教育內容的方法。

在此版本中,我們為 DartPad 新增了一個新的分步 UI,開發人員可以使用該 UI 跟隨講師指導的講習班。

通過直接向 DartPad 新增說明,我們可以為 I/O 提供指導性的工作室體驗,但是我們不只是為自己的工作室構建它;如果你想在 Dart 或 Flutter Workshop 中使用它,可以按照 DartPad Workshop 創作指南進行操作。

github.com/dart-lang/d…

這樣的主旨在於利用 DartPad 共享程式碼,並在自己的網站中嵌入 DartPad 。

社群聚焦:FlutterFlow

FlutterFlow 是一款“低程式碼”應用程式設計和開發工具,可以通過瀏覽器中構建所有應用程式,它提供了一種所見即所得的環境,可以使用 Firebase 的真實資料跨多個頁面佈置你的應用程式。

低程式碼工具的目標是輕鬆完成大多數常見的事情,從而開發者可以編寫儘可能少的自定義程式碼行。實際上作為演示,他們構建了一個完整的多頁移動應用程式,用於在不到一個小時的時間內,你可以在YouTube 上看到整個過程。

youtu.be/TXsjnd_4SBo

FlutterFlow 輸出 Flutter 程式碼,因此如果需要新增程式碼以進一步自定義應用程式,你可以在flutterflow.io 上了解有關 FlutterFlow 產品釋出的資訊。

flutterflow.io/blog/launch

重大變化

與往常一樣,我們一直努力減少重大更改的數量,在此版本中,我們已將其限制為消除以下棄用項:

概括

Play商店中有八分之一以上的新應用是使用 Flutter 構建,僅 Play 商店中有超過 20 萬個Flutter 應用,這樣的持續增長令人震驚,世界各地各種規模的應用程式都將其 UI 委託給Flutter,以打造精美的多平臺體驗,以迎合他們所處的任何地方的使用者。

相關文章