【文章內容使用 Gemini 1.5 Pro 自動產生】

了解我們如何用兩位開發人員在桌面瀏覽器、Android 和 iOS 上推出了 Super Dash，一款多平台遊戲範例

Super Dash 是一款使用 Endless Runner Flame Template 建立的新 Flutter 範例遊戲，它隨最近更新的 Flutter 休閒遊戲工具包 推出。

我們與 Google 的 Flutter 團隊合作，在短短六週內使用 Flutter 和 Flame 從想法到推出開發了一款適用於 Android、iOS 和 Web 的多平台遊戲。這款遊戲的靈感來自超級瑪利歐等懷舊經典，玩家可以在橫向捲軸平台遊戲中扮演 Dash，她會收集橡果和雞蛋以最大限度地提高分數，並逐級闖關。

這款遊戲可以在 桌面瀏覽器 上玩，並可在 Apple App Store 和 Google Play 上使用行動裝置玩。這款遊戲的程式碼（包括行動平台）是開源的，可在 GitHub 上的 super_dash 儲存庫中取得。

如何遊玩

Dash 會在每一關中收集橡果（10 分）和雞蛋（1000 分）以提高分數。按下空格鍵或點選螢幕即可開始遊戲，並跳躍避開蟲子和掉進坑洞，以完成每一關。抓住金羽毛即可將 Dash 變身為鳳凰，增加她的跳躍高度，並讓她獲得額外一條生命。

使用 Flutter 快速無縫地進行遊戲開發

Flutter 使我們能夠在短短六週內，僅憑我們團隊中的兩位開發人員，將想法變成實際的遊戲。這個框架能夠透過熱重載功能快速迭代變更，加上平台的可組合性、模組化和可用工具，讓團隊能夠快速行動，並與設計團隊的合作成果一起快速測試和開發遊戲。

它還加快了團隊針對行動裝置建立響應式 UI 的速度，同時也鎖定瀏覽器和桌面。這讓我們能夠將更多開發時間投入到遊戲本身，並減少花在確保遊戲在不同設備和螢幕上運作的時間。

此外，Flutter 和 Dart 強大的 套件生態系統 以及與 Firebase 等 Google 服務的整合，讓我們能夠輕鬆找到工具，例如 Flutter_Bloc，它使我們能夠無縫建立遊戲邏輯和狀態管理。

Flame 動力的 Flutter 冒險

Super Dash 使用 Flame，一個用 Flutter 建立的開源遊戲引擎。雖然許多休閒遊戲可以使用 Flutter 單獨建立，但 Flame 擴展了 Flutter 的遊戲開發功能，適用於需要遊戲迴圈、碰撞和地圖的遊戲。

Super Dash 利用 Leap 專案 擴展了在 休閒遊戲工具包 中可用的 Flame Template 的基本功能，這是一個由 Kurtome（Flame 社群成員）建立的開源專案。在使用 Leap 之前，您應該對 Flame 的 FlameGame、PositionComponent、TiledComponent 和 Camera 組件有基本的了解。

在儲存庫中，您會找到我們為除錯遊戲而建立的自訂工具，包括帶有各種動作和工具的 macOS 版本。我們加入了一個「傳送至終點」按鈕，讓 Dash 無需玩完全程就能直接到達終點畫面，以及另一個讓 Dash 不死的按鈕，讓您可以在不重新啟動的情況下玩完全程。您可以在 super_dash 儲存庫 中找到這個工具，並在建立或擴展遊戲時親自嘗試。

所有物理物件都有矩形碰撞盒，由物件的大小和位置定義，它們不必與物件的視覺外觀相同，這大大提高了可玩性。

團隊使用 Firebase 分發 輕鬆共享應用程式和遊戲的測試版本，特別是 iOS，因為 iOS 有時會很複雜。

設計一個互動式的 Dash 世界

Super Dash 的設計非常直觀，易於玩。我們使用開源的 Tiled 工具設計關卡，並使用 leap 套件將關卡整合到遊戲中。

Leap 使用 flame_tiled 套件（其中實作了 TiledComponent），並在此基礎上建立，加入了平台物理和有用的類別，例如適用於物件、敵人和玩家的 PhysicalEntity。flame_tiled 套件解析來自 tiled 的檔案以渲染地圖、圖層和物件。

LeapMap

一個透過 LeapGame.leapMap 可以存取的組件，LeapMap 管理 Tiledmap，並自動為地面地形建立具有適當碰撞偵測的方塊。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

void main() {
  runApp(GameWidget(game: MyLeapGame()));
}

class MyLeapGame extends LeapGame with HasTappables, HasKeyboardHandlerComponents {
  late final Player player;

  @override
  Future<void> onLoad() async {
    await super.onLoad();

    // "map.tmx" should be a Tiled map the meets the Leap requirements defined below
    await loadWorldAndMap('map.tmx', 16);
    setFixedViewportInTiles(32, 16);

    player = Player();
    add(player);
    camera.followComponent(player);
  }
}

若要加入自訂行為，請透過 LeapGame.leapMap.tiledMap 存取圖層，並為方塊或物件整合您自己的特殊行為

自訂圖層名稱和類別

您可以要求 Leap 使用不同的類別、類型或名稱。若要這樣做，請建立並將自訂 LeapConfiguration 傳遞給遊戲。

以下範例建立了自訂 LeapConfiguration：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class MyLeapGame extends LeapGame {
  MyLeapGame() : super(
    configuration: LeapConfiguration(
      tiled: const TiledOptions(
        groundLayerName: 'Ground',
        metadataLayerName: 'Metadata',
        playerSpawnClass: 'PlayerSpawn',
        hazardClass: 'Hazard',
        damageProperty: 'Damage',
        platformClass: 'Platform',
        slopeType: 'Slope',
        slopeRightTopProperty: 'RightTop',
        slopeLeftTopProperty: 'LeftTop',
      ),
    ),
  );
}

我們與 HOPR Studio 合作設計和製作遊戲的美術作品。為了建立更無縫的工作流程，我們建立了描述項目行為的通用語言。例如，一個「I」代表無限，表示項目會以相同的方式重複執行（從左到右或反之亦然）。這使得每個團隊更容易理解遊戲的目標。地圖準備好後，我們便將其整合到遊戲開發中。

接下來的目標

Super Dash 範例在 2023 年 11 月更新的 Flutter 休閒遊戲工具包 之後發佈，並使用了 新的遊戲範例，展示了 Flame。透過強調我們在短短六週內就完成了從想法到推出，我們希望展示 Flutter 如何幫助您提高生產力，並在各種平台上接觸更多使用者。查看 開源程式碼 以了解我們是如何建立的。

現在可以在桌面瀏覽器上 玩遊戲，或在 Apple App Store 和 Google Play 上下載行動裝置應用程式！你能打破最高分記錄嗎？

我們如何在短短六週內使用 Flutter 和 Flame 建立 Super Dash 範例！ 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

宣布 Dart 3.2

作者： Kevin Moore 和 Michael Thomsen

今天，我們宣布推出 Dart 3.2，其中包含一個新的語言功能，用於對私有 final 欄位進行非空推斷，透過新的互操作性功能改進開發人員體驗，支援 DevTools 中的擴展，以及關於我們的 Web 路線圖的更新，包括對 Wasm（又名 WebAssembly）的支援。

私有 final 欄位的非空推斷

自從我們在 Dart 2.12 中引入 可靠的空安全 已經過了好幾年。在空安全中，您可以宣告哪些類型是可空的（可能包含值或 null），以及哪些類型是非空的（始終包含值）。空安全與 流分析 結合在一起，可以偵測到可空變數何時可以「推斷」為更安全的非空類型：

1
2
3
4
5
6
7
8

int definitelyInt(int? aNullableInt) {
  if (aNullableInt == null) {
    return 0;
  }
  // 如果流分析到達此處，
  // aNullableInt 可以安全地推斷為非空的 int。
  return aNullableInt;
}

類型推斷自 Dart 2.12 起一直是空安全的核心部分，但僅限於區域變數。欄位或頂層變數無法推斷，例如在這種情況下：

1
2
3
4
5
6
7
8
9

class Container {
  final int? _fillLevel;
  Container(this._fillLevel);
  check() {
    if (_fillLevel != null) {
      int i = _fillLevel; // 在 Dart 3.2 之前，會導致錯誤。
    }
  }
}

這種限制是由于在流分析無法安全地確定何時或如何更改欄位的一些複雜情況造成的。例如，在類別的欄位推斷情況下，如果子類別使用 getter 覆蓋欄位，而 getter 有時會返回 null，就會出現問題。

在 Dart 3.2 中，我們改進了我們的流分析引擎，現在能夠推斷 私有 final 欄位 的類型。現在，上面的程式碼片段可以在沒有錯誤的情況下通過。這利用了這樣一種了解，即對於私有和 final 欄位，在初始賦值之後，該值永遠不會改變，因此只檢查一次被認為是安全的。私有的 final 欄位推斷從 Dart 3.2 開始可用，並且將應用於 Dart SDK 下限 為 3.2 或更高的專案。

package:lints 3.0 中的新的程式碼分析選項

說到程式碼分析，我們還在 package:lints 中對我們的標準程式碼分析規則進行了一些改進。這個套件包含與使用 dart create 或 flutter create 建立的任何新專案一起提供的預設和推薦的靜態分析規則集（透過 package:flutter_lints - package:lints 的擴展）。

這個 lint 集的最新主要版本 3.0 現在已經可以使用了。此修訂版在核心集添加了六個 lint，在推薦集添加了兩個 lint。它具有用於驗證 pubspec URL、驗證集合方法是否使用正確參數調用等的 lint。若要查看完整的更改列表，請查看 變更日誌。3.0 版本將是下一個版本中新專案的預設版本。對於現有專案，您可以 立即升級。

Dart 互操作性更新

在 各種平台 上的多平台支援一直是 Dart 的核心原則。但是，即使 Dart 程式碼行可以在所有這些平台上無需更改地執行，大型應用程式仍然經常需要與現有程式碼互操作。這可能意味著來自舊專案的程式碼，或在其他函式庫或系統 API 中可用的 API。我們在這個領域進行了一系列投資，從用於 與原生 C API 互操作 的 FFI 開始。我們目前正在努力將其擴展以支援與 Java 和 Kotlin 以及 Objective C 和 Swift 互操作。有關 JS 互操作性的令人興奮的更新，請查看下面的 Dart Web 部分。

截至 Dart 3.2，我們對原生互操作性進行了許多改進：

• 我們為 C FFI 引入了 NativeCallable.isolateLocal 建構函式，它從任意 Dart 函數建立 C 函數指標。這是 Pointer.fromFunction 提供的功能的擴展，它只能從頂層函數建立函數指標。
• 我們更新了 Objective-C 綁定生成器，以使用 NativeCallable.listener，我們在 Dart 3.1 中添加了它。生成器現在可以自動處理包含異步回調的 API，例如 Core Motion。以前，此類 API 需要手動編寫一些綁定程式碼。
• 我們繼續改進用於 Java 和 Kotlin 互操作性的 package:jnigen。這使我們能夠將 package:cronet_http - Android Cronet HTTP 客戶端的包裝器 - 從手動編寫的綁定程式碼遷移到自動 生成的 包裝器。
• 我們在 原生資產 功能方面取得了重大進展，該功能旨在解決與依賴原生程式碼的 Dart 套件分發相關的許多問題。它透過提供用於整合與構建 Flutter 和獨立 Dart 應用程式相關的各種構建系統的統一掛鉤來實現。若要查看預覽，請查看 文件。

Dart 套件的 DevTools 擴展

Dart DevTools 是一套用於除錯和效能分析的工具，支援純 Dart 和 Flutter 應用程式。在 Dart 3.2 和 Flutter 3.16 中，我們 宣布 推出一個新的 擴展框架，它使套件作者能夠為他們的套件構建自訂工具，並直接在 DevTools 中顯示。這允許包含框架的 pub.dev 套件提供專門針對其用例的自訂工具。例如，Serverpod 的作者一直在努力為他們的套件構建開發人員工具，並且很高兴地宣布他們将在即将发布的 1.2 版本 中发布 DevTools 扩展。

Dart Web 和 Wasm 更新

Wasm（也稱為 WebAssembly）是一種用於 Web 瀏覽器的令人興奮的新指令格式，它提供了一種可移植、平台中立的二進制程式碼格式，以便在現代瀏覽器中執行。像 Dart 這樣的更高級別的受控語言使用垃圾收集，而垃圾收集正在添加到 Wasm 標準中。截至 Chrome 119，Wasm 的垃圾收集支援（稱為 Wasm-GC）已預設啟用。Wasm-GC 支援也即將在 Firefox 120 中推出，這是他們的下一個穩定版本。那麼 Dart、Flutter 和 Wasm-GC 的狀態如何呢？

Dart 到 Wasm 編譯器幾乎已完成功能。團隊對效能和相容性非常滿意。我們現在的重點是邊緣情況，以確保我們的輸出在各種情況下都能快速執行。

對於 Flutter Web，我們已完成一個新的「Skwasm」渲染引擎。為了最大限度地提高效能，Swasm 將編譯後的應用程式程式碼直接連接到使用 wasm 到 wasm 綁定的自訂 CanvasKit Wasm 模組。它也是 Flutter Web 多線程渲染支援的第一個版本，它可以進一步提高幀時間。

在 Flutter Web 與 Wasm 擺脫目前的實驗狀態之前，還有一些事情需要完成：

• 雙重編譯： 生成 Wasm 和 JavaScript 輸出，并在運行時啟用功能偵測，以支持具有 Wasm-GC 支援和沒有 Wasm-GC 支援的瀏覽器。
• 現代 JavaScript 互操作性： 基於 擴展類型 的新的 JS 互操作性機制，以在針對 JavaScript 和 Wasm 時，在 Dart 程式碼、瀏覽器 API 和 JS 函式庫之間實現簡潔、類型安全的調用。
• 具有 Wasm 支援的瀏覽器 API： 一個新的 package:web，基於現代 JS 互操作性機制，取代 dart:html（以及相關的函式庫）。這將為 JS 和 Wasm 目標上的瀏覽器 API 提供簡單的存取權。

我們開始將許多內部專案遷移到 package:web 和新的 JS 互操作性機制，並預計在下一個穩定版本中會有更多更新。同時，您可以在我們的 WebAssembly 支援 頁面上獲取最新詳細資訊。

結語

今天就到這裡。Dart 3.2 現在可以從 dart.dev 中獲取，或者作為今天 Flutter 3.16 版本的一部分。下次再見，祝您使用 Dart 開發愉快！

宣布 Dart 3.2 最初發佈在 Dart 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

undefined

【文章內容使用 Gemini 1.5 Pro 自動產生】

在 Dart & Flutter DevTools 中構建自訂工具的指南

您是否曾經想為 Dart 和 Flutter 構建開發人員工具，但卻不知道從哪裡開始？或者，也許您不想經歷建立與正在運行的 Dart 或 Flutter 應用程式連接以存取除錯資料的所有工作？然後，即使您確實創建了一個開發人員工具，您又該如何部署它，或者如何讓使用者輕鬆地存取它？好吧，我們有一些好消息要告訴您：現在您可以創建開發人員工具，而無需面對所有這些障礙。

使用新的 Dart & Flutter DevTools 擴展框架，您可以輕鬆地構建與現有的 DevTools 工具套件緊密整合的開發人員工具。擴展使用 Flutter Web 構建，並利用 DevTools 中現有的框架和實用程式來簡化開發人員工具編寫的體驗。

DevTools 擴展如何運作？

擴展作為 pub 套件的一部分發佈。例如，想像我們有一些 package:foo，這個套件提供了一個 DevTools 擴展。當使用者在他們的應用程式中依賴 package:foo 時，他們會自動獲得存取由這個套件提供的 DevTools 擴展。當這個使用者使用 DevTools 除錯他們的應用程式時，他們將會看到一個包含由 package:foo 提供的開發人員工具的新標籤「Foo」。

您可以將 DevTools 擴展添加到現有的 pub 套件中，例如 package:provider，package:patrol，或 package:drift，它們都已經發佈了 DevTools 擴展，或者您可以創建一個僅提供 DevTools 擴展的新套件。在這兩種情況下，使用者都必須在他們的套件中列出一個對提供 DevTools 擴展的套件的相依性，才能在 DevTools 中看到開發人員工具。

撰寫 DevTools 擴展：分步指南

在您開始之前

您將需要：

• Flutter SDK >= 3.17.0–0.0.pre & Dart SDK >= 3.2.
• 一個 Pub 套件（現有或新的），用於添加 DevTools 擴展。

建議從 Flutter master channel 開發您的擴展，以便使用最新的 [devtools_extensions](https://pub.dev/packages/devtools_extensions) 和 [devtools_app_shared](https://pub.dev/packages/devtools_app_shared) 套件。

第 1 步：設定您的套件層級結構

若要將擴展添加到您的 Dart 套件，請將一個頂級擴展目錄添加到您的套件。

1
2
3
4

foo/
  extension/
  lib/
  ...

在 extension 目錄下，建立以下結構（如所示）：

1
2
3
4

extension/
  devtools/
    build/
    config.yaml

config.yaml 檔案應該包含 DevTools 需要載入擴展的元資料：

1
2
3
4

name: foo
version: 0.0.1
issue_tracker: <link_to_your_issue_tracker.com>
material_icon_code_point: '0xe0b1'

複製上面的 config.yaml 檔案內容，並將其貼到您剛在套件中創建的 config.yaml 檔案中。對於每個金鑰，請填寫您的套件的適當值。

• name：此 DevTools 擴展所屬的套件名稱。此欄位的 value 用於擴展頁面的標題列中。**[必填]**
• version：您的 DevTools 擴展的版本。這個版本號碼應該隨著時間的推移而演進，因為您為您的擴展發佈了新的功能。此欄位的 value 用於擴展頁面的標題列中。**[必填]**
• issue_tracker：您的問題追蹤器 URL。當使用者點擊 DevTools UI 中的「回報問題」連結時，他們將被導向到此 URL。**[必填]**

• material_icon_code_point：對應於 material/icons.dart 中圖示的程式碼點值。這個圖示用於擴展在頂級 DevTools 標籤列中的標籤。**[必填]**

有關 config.yaml 規格的最新文件，請參閱 extension_config_spec.md。

應該將您的擴展原始碼放在哪裡？

只有您的 Flutter 擴展 Web 應用程式的預先編譯輸出需要與您的 pub 套件一起發佈，以便 DevTools 將其載入到嵌入式 iFrame 中。為了使您的 pub 套件的大小保持較小，我們建議您在 pub 套件之外開發您的 DevTools 擴展。我們建議使用以下套件結構：

1
2
3
4
5
6
7
8
9
10

foo/  
  packages/
    foo/  # 您的 pub 套件
      extension/
        devtools/
          build/
            ...  # foo_devtools_extension 的預先編譯輸出
          config.yaml
      ...
    foo_devtools_extension/  # 您的擴展的原始碼

現在是時候開發您的擴展了。

第 2 步：創建一個 DevTools 擴展

從您想要放置您的擴展原始碼的目錄（在上面的示例中為 foo/packages）中，運行以下命令，將 foo_devtools_extension 替換為 <your_package_name>_devtools_extension：

1

flutter create --template app --platforms web foo_devtools_extension

在 foo_devtools_extension/pubspec.yaml 中，添加對 devtools_extensions 的相依性：

1

devtools_extensions: ^0.0.10

在 foo_devtools_extension/lib/main.dart 中，將 DevToolsExtension Widget 放置在應用程式的根目錄：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const FooDevToolsExtension());
}

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

  @override
  Widget build(BuildContext context) {
    return const DevToolsExtension(
      child: Placeholder(), // 在這裡構建您的擴展
    );
  }
}

DevToolsExtension Widget 自動執行與 DevTools 互動所需的全部擴展初始化。在您的擴展 Web 應用程式中的任何地方，您都可以存取全域變數 extensionManager 和 serviceManager，以向 DevTools 發送消息或反向發送消息，或者與連接的應用程式互動。

利用輔助套件

使用 package:devtools_app_shared 來存取服務管理器、通用 Widget、DevTools 主題、實用程式等等。請參閱 devtools_app_shared/example 以獲取範例用法。

第 3 步：除錯 DevTools 擴展

在開發和維護您的 DevTools 擴展時，您需要運行、除錯和測試您的擴展 Flutter Web 應用程式。您可以使用以下列出的幾個不同選項來完成此操作。

選項 A：使用模擬的 DevTools 環境（建議用於開發）

為了除錯，您可能想要使用「模擬的 DevTools 環境」。這是一個模擬環境，允許您構建您的擴展，而無需將其作為 DevTools 中的嵌入式 iFrame 開發。以這種方式運行您的擴展將用模擬 DevTools 到 DevTools 擴展連接的環境來包裝您的擴展。它還可以讓您存取熱重啟，並加快開發週期。

1. 您的 DevTools 擴展。
2. 您的 DevTools 擴展將與其交互的測試應用程式的 VM 服務 URI。這個應用程式應該依賴於您的擴展的父套件（在本示例中為 package:foo）。
3. 用於執行使用者可能從 DevTools 觸發的動作的按鈕。
4. 顯示將在您的擴展和 DevTools 之間發送的消息的日誌。

模擬環境由 environment 參數 use_simulated_environment 啟用。若要使用啟用了此標誌的運行您的擴展 Web 應用程式，請在 VS Code 中的 launch.json 檔案中添加一個配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
    ...
    "configurations": [
        ...
        {
            "name": "foo_devtools_extension + simulated environment",
            "cwd": "packages/foo_devtools_extension",
            "request": "launch",
            "type": "dart",
            "args": [
                "--dart-define=use_simulated_environment=true"
            ],
        },
    ]
}

或者，您可以使用添加了標誌的命令行來啟動您的應用程式：

1

flutter run -d chrome - dart-define=use_simulated_environment=true

選項 B：使用真實的 DevTools 環境

一旦您將您的擴展開發到可以使用真實的 DevTools 環境測試更改的程度，您需要執行一系列設定步驟：

1. 構建您的 Flutter Web 應用程式，並將構建的資產從 your_extension_web_app/build/web 目錄複製到父套件的 extension 目錄（your_pub_package/extension/devtools/build）。若要執行此操作，請使用 package:devtools_extensions 中的 build_and_copy 命令：

1
2
3

cd your_extension_web_app;
flutter pub get;
dart run devtools_extensions build_and_copy --source=. --dest=path/to/your_pub_package/extension/devtools

注意：如果您使用的是上面推薦的套件結構，則 `--dest` 的值應該為 `../your_pub_package/extension/devtools`。

2. 準備並運行一個依賴於您的 pub 套件的測試應用程式。在測試應用程式的 pubspec.yaml 檔案中，您需要將套件的相依性更改為指向您的本地套件原始碼的 路徑相依性。完成此操作後，在測試應用程式上運行 flutter pub get，並運行該應用程式。

3. 啟動 DevTools。打開剛透過運行您的測試應用程式啟動的 DevTools 實例。您可以從命令行列印的 URL 或從運行測試應用程式的 IDE 中打開 DevTools。或者，您也可以從命令行運行 dart devtools。

注意：如果您需要 DevTools 的本地或未發佈的更改，您需要從原始碼構建並運行 DevTools（[伺服器 + 前端](https://github.com/flutter/devtools/blob/master/CONTRIBUTING.md#frontend--devtools-server)）。請參閱 DevTools 的 [CONTRIBUTING](https://github.com/flutter/devtools/blob/master/CONTRIBUTING.md) 指南。

4. 如果 DevTools 尚未與您的測試應用程式連接，請將其連接，您應該在 DevTools 應用程式列中看到您的擴展的標籤。您的擴展的啟用或停用狀態由 DevTools 管理。擴展啟用狀態會從 DevTools 中的「Extensions」菜單中公開，這個菜單可以在螢幕右上角的動作按鈕中找到。

第 4 步：發佈包含 DevTools 擴展的套件

為了讓套件能夠向其使用者提供 DevTools 擴展，它必須在 your_pub_package/extension/devtools/ 目錄中包含預期的內容（請參閱上面的設定說明）。

1. 確保 your_pub_package/extension/devtools/config.yaml 檔案存在，並且按照上面的規格進行配置。
2. 使用 package:devtools_extensions 提供的 build_and_copy 命令來構建您的擴展，并将輸出複製到 extension/devtools 目录：

1
2
3

cd your_extension_web_app;
flutter pub get;
dart run devtools_extensions build_and_copy --source=. --dest=path/to/your_pub_package/extension/devtools

然後將您的套件發佈到 pub.dev：flutter pub publish。有關發佈套件的更多指南，請參閱 package:devtools_extensions 的 發佈指南。

結論

就是這樣！現在，當使用者依賴於您的套件的最新版本時，他們將自動获得存取您在您的 DevTools 擴展中提供的工具。這個功能才剛剛推出，因此我們迫切希望听到您的回饋。

對於錯誤和功能請求，請在 DevTools 的 問題追蹤器 上提交問題。

要获得一般支援并存取 DevTools 擴展作者社群，請查看 Discord #devtools-extension-authors 頻道（您首先需要加入 Flutter Discord 伺服器）。

Dart & Flutter DevTools Extensions was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

【文章內容使用 Gemini 1.5 Pro 自動產生】

Flutter 3.16 的新功能

Material 3 成為預設主題、Impeller 在 Android 上預覽、DevTools 擴展等等

歡迎回到 Flutter 季度穩定版本，這次是 Flutter 3.16。此版本將 Material 3 設定為新的預設主題，將 Impeller 預覽帶到 Android，允許為 DevTools 添加擴展，等等！它也與 Flutter 休閒遊戲工具包的重大更新 相符！

自上次發布以來僅僅三個月的時間，我們就有 145 位社群成員合併了 928 個拉取請求，其中 40 位社群成員為 Flutter 完成了他們的第一次提交！

繼續閱讀，了解 Flutter 社群為這個最新版本貢獻的所有新增功能和改進！

架構

Material 3 是新的預設主題

自 3.10 版本（2023 年 5 月）以來，Material 函式庫已更新以符合最新的 Material Design 規範。變更包括新的組件和組件主題，以及更新的組件視覺效果。在 3.16 版本之前，這些變更是「選擇性加入」，使用 useMaterial3 主題標誌。自此版本起，useMaterial3 預設為 true。（＃130764）

您仍然可以在 MaterialApp 主題中指定 useMaterial3: false 來選擇不使用 M3 版本的 Material 函式庫，但 Material 2 最終將被棄用並移除。此外，一些 Widget 無法僅更新，而是需要全新的實作。因此，當您看到 Material 3 執行時，您的 UI 看起來可能會有點奇怪。要解決此問題，請手動遷移到新的 Widget，例如 NavigationBar。有關更多詳細資訊，請查看 GitHub 上的 Material 3 總體問題。

示範應用程式 允許您嘗試所有組件。示範支援切換 useMaterial3，以便您可以比較變更。

Material 3 組件的外觀主要由 [ThemeData.colorScheme] 和 [ThemeData.textTheme] 的值決定。建立 Material 3 色彩方案的首選方法是使用 ColorScheme.fromSeed()，它會建立美觀且符合無障礙對比度要求的深色和淺色方案。您也可以使用 ColorScheme.fromImageProvider 從圖像中的主要顏色建立色彩方案。要進一步自訂 Material 3 組件的外觀，請將組件主題添加到您的 ThemeData，例如 ThemeData.segmentedButtonTheme 或 ThemeData.snackBarTheme。非空的組件主題屬性會覆蓋組件 API 文件中指定的預設值。

支援 Material 3 動畫

對 Material 3 動畫的改進包括添加 Easing 和 Durations 類別。Material 2 曲線已重新命名為包含「legacy」一詞，並將最終被棄用並移除。（＃129942）

在編輯選單中添加更多選項

在原生 iOS 上，使用者現在可以選取文字並啟動一個共享選單，其中提供了多種標準服務。在此版本中，我們已添加了查找、搜尋和共享選項。

TextScaler 用於指定全局文字比例因子

為了支援 Android 14 的 非線性字體縮放功能，該功能有助於視力障礙人士，新的 TextScaler 類別替換了 Text.textScaleFactor 屬性。（＃128522）

SelectionArea 更新

Flutter 的 SelectionArea 已更新以支援使用滑鼠單擊或雙擊以及在觸控設備上長按的原生手勢。這些新的手勢預設情況下在 SelectionArea 和 SelectableRegion 中可用。

• 單擊：在點擊位置設置摺疊選取。
• 雙擊：選取點擊位置的文字。
• 雙擊 + 拖動：擴展文字區塊中的選取範圍。

• 長按 + 拖動：擴展文字區塊中的選取範圍。

操作焦點 Widget 的選單項目

此版本提供了在使用選單項目時清理焦點變更的功能：FocusManager 的 applyFocusChangesIfNeeded 函數現在恢復選單焦點 - 當使用者點擊選單項目時，焦點將已返回到打開選單之前具有焦點的項目。（＃130536）

為 iOS、macOS 自動重新排序選單項目捷徑

Mac 平台上的 Flutter 應用程式現在按照 Apple 人機介面指南對選單中的捷徑修飾符進行排序。（＃129309）

MatrixTransition 動畫

新的 MatrixTransition Widget 允許在建立動畫轉場時進行轉換。根據當前的動畫值，您可以提供將應用於子 Widget 的矩陣轉換，以產生以下 GIF 中的效果。（DartPad 中的範例）（＃131084）

PaintPattern 加入到 flutter_test

在 flutter_test 套件中，新的 PaintPattern 類別允許您驗證 CustomPainters 和 Decorations 等 Widget 對畫布進行的繪製調用（用於單元測試）。

以前，需要一個 golden 檔案來驗證是否繪製了正確的顏色和矩形，但現在可以使用 PaintPattern。以下範例驗證了 MyWidget 是否在畫布上繪製了一個圓形：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
// 多個繪製調用甚至可以連在一起。
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
);

此 API 以前存在於框架測試檔案的深處，我們注意到一些開發人員發現它如此有用，他們已將其複製到他們自己的專案中。如果這適用於您，則可以在升級到 Flutter 3.16 後從您的專案中刪除副本。

捲軸更新

在 Flutter 3.13 首次發布二維捲軸基礎之後，此版本帶來更多功能和修飾。使用 Flutter 3.16，2D 基礎現在支援 KeepAlive Widget，以及預設焦點遍歷和隱式捲軸。建立在基礎之上的 2D 捲軸 Widget 將自動採用此支援。有關在 2D 基礎之上建立的綜合指南，請查看 Flutter Build Show 的最新一期。

在 3.13 版本發布後不久，two_dimensional_scrollables 套件發佈了。此套件由 Flutter 團隊維護，其中包含建立在框架基礎之上的第一個 2D 捲軸 Widget - TableView。自最初發布以來，已添加了更多裝飾和樣式支援，以及額外的錯誤修復。

引擎

Impeller

Android

在此版本中，我們很高興地分享 Impeller 在 Android 上已準備好在 stable channel 上進行預覽回饋。自今年年初以來，團隊一直在努力為 Impeller 開發 Vulkan 後端，此預覽版本包括收集有關 Impeller 在支援 Vulkan 的設備上的特性的回饋。

預計 Impeller 在沒有 Vulkan 支援的設備上還沒有良好的表現。隨著我們在未來幾個月內將 Impeller 的 OpenGL 後端提升到功能完整性，我們計劃在未來的穩定版本中徵求有關 Impeller 在此類設備上的特性的回饋。

Flutter 開發人員可以透過將 --enable-impeller 標誌傳遞給 flutter run，或在專案的 AndroidManifest.xml 檔案中將以下設定添加到 <application> 標籤下，在支援 Vulkan 的 Android 設備上試用 Impeller：

1
2
3

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true" />

為了確定設備是否支援 Vulkan，Impeller 使用了 Impeller 儲存庫文件 中討論的測試。通常，Impeller 在運行 Android API 等級 29 或更新版本且 64 位元作業系統的設備上使用 Vulkan 後端。使用者也可以按照 檢查 Vulkan 支援 中的建議，確定其設備是否支援 Vulkan。

雖然對我們迄今為止在 Impeller 的 Vulkan 後端上取得的進展充滿信心，但在預覽階段開始時，仍然存在一些已知問題：

• 平台視圖尚未實作，而原本應該包含平台視圖的幀表現不佳。
• 自訂著色器尚未實作。
• 有關 已知錯誤 和 缺少的功能 的完整列表，最新的資訊位於 GitHub 上的 Impeller 專案看板。許多問題已在 3.17 beta 版中得到修復，因此請也嘗試一下。

我們對 Impeller 在我們已嘗試的支援 Vulkan 的 Android 設備上的保真度和效能方面取得的進展感到滿意。但是，與 iOS 相比，Android 硬體生態系統更加多元，我們預計在 stable channel 上將其設為預設後端之前，Android 的預覽時間會比 iOS 長。因此，關於 Impeller 最有用的回饋應包括有關發生問題的特定設備和 Android 版本的詳細資訊。

此外，Impeller 的 Vulkan 後端在「debug」版本中啟用了超出 Skia 使用的額外除錯功能，這些功能具有額外的運行時開銷。因此，重要的是，有關 Impeller 效能的回饋來自 profile 或 release 版本，並且應包括 DevTools 中的時間軸，以及與相同設備上的 Skia 後端的比較。最後，與往常一樣，我們非常感謝包含小型可重複測試案例的回饋，該案例演示了問題。

Impeller 效能、保真度和穩定性

除了關注 Vulkan 後端之外，自今年年初以來，團隊還針對 Impeller 中的文字效能進行了許多改進，這些改進對 Android 和 iOS 都很有益。特別是，我們改進了 Impeller 的字形圖集的管理方式，以及在引擎的 UI 和柵格化線程之間劃分文字工作負載的方式。因此，使用者將注意到文字密集型工作負載中的卡頓現象減少。

團隊還一直在努力針對 Android 和 iOS 的保真度和穩定性進行改進，特別是那些使用者報告的改進。特別是，在這個穩定版本週期的三個月中，團隊對 flutter/engine 儲存庫進行了 209 個與 Impeller 相關的提交，解決了 217 個問題，包括 42 個使用者報告的保真度、穩定性或效能問題。

引擎效能

為了支援具有異質多處理的行動設備上的更好效能，我們 修改了 引擎，以便效能敏感的線程（例如 UI 和柵格化線程）對設備上更強大的核心具有親和力。我們觀察到，此變更對一系列基準測試和設備產生了積極影響。在某些情況下，改進非常顯著，99%-ile 或 90%-ile 幀時間減少了一半甚至更多。我們預計在 Android 上使用 Skia 和 Impeller 後端的使用者會在這種變更之後觀察到卡頓現象減少。這種效果在 iOS 設備上沒有那麼顯著，因為強大和弱核心之間的差異較小。

API 和保真度改進

Impeller 效能覆蓋

在以前的版本中，Flutter 的 效能覆蓋 功能未顯示在 Impeller 中。此版本修復了此問題。效能覆蓋 現在已正確顯示，啟用了 Impeller。

模擬顯示現在已正確顯示

在此版本中，Paint.enableDithering 屬性設定為 true，並且根據 Flutter 的棄用政策 被棄用。模擬現在預設情況下已啟用（不再支援開發者可配置的模擬），您將不再看到條紋問題。有關此變更和遷移指南的完整解釋，請查看 docs.flutter.dev 上的 重大變更頁面。

遊戲

Flutter 遊戲工具包

在過去的幾年中，我們看到了圍繞休閒遊戲開發的社群不斷增長。成千上萬的遊戲使用 Flutter 發佈，從簡單但有趣的益智遊戲到更複雜的街機遊戲。我們最喜歡的遊戲包括 Etermax 的 Trivia Crack、Lotum 的 4 Pics 1 Word（猜詞遊戲）、Dong Digital 的 Brick Mania（街機遊戲）、Onrizon 的 StopotS（類別遊戲）、我們為 I/O 在 Flutter 中建立的 復古彈珠台遊戲，以及在他們的社交和選單螢幕中使用 Flutter 的 PUBG 行動遊戲。

為了幫助遊戲開發人員提高生產力，今天 Flutter 推出了其 休閒遊戲工具包 的重大更新。它是一個包含了新資源的集合，可以幫助您從概念到發布，它提供了更多特定於類型的範本，例如紙牌遊戲、無盡的跑酷遊戲，以及服務整合，例如 Play Games Services、應用內購買、廣告、成就、Crashlytics 和多人遊戲支援。要了解更多資訊，請查看 遊戲工具包發布文章，作者為 Zoey Fan。

網頁

Flutter 時間軸事件在 Chrome DevTools 上

Flutter 時間軸事件現在已在 Chrome DevTools 的效能面板中公開。（＃130132）

要了解更多資訊，請查看 為 Web 應用程式除錯效能。

Android

滑鼠滾輪支援

在優化 滿足 Android 的大螢幕指南 時，我們發現了一個問題，即滑鼠滾輪在平板電腦或摺疊手機上無法正常工作。使用滑鼠滾輪時，螢幕需要移動很長一段距離才能做出響應，這是一個 眾所周知的問題。

在此版本中，使用滑鼠在 Flutter 視圖上捲軸的速度與 Android 設備上的捲軸速度相符。（44724）

預測式返回導航

Android 14 版本包含預測式返回手勢功能，允許您在設備上使用返回手勢「偷看」當前螢幕後面的主螢幕。此更新將預測式返回手勢帶到了 Flutter！查看 遷移指南。

iOS

應用程式擴展項

Flutter 現在可以被用來針對一些 iOS 應用程式擴展項。這意味著您可以使用 Flutter Widget 繪製某些類型的 iOS 應用程式擴展項的 UI。這不適用於所有類型的應用程式擴展項，因為 API 可能存在限制（例如，主螢幕 Widget）或記憶體限制。

了解更多資訊，並查看如何在 docs.flutter.dev 上針對 添加 iOS 應用程式擴展項 的共享擴展項。

套件生態系統

新的 Flutter 優選套件

我們重新啟動了 Flutter 優選套件 程式！在此週期中，Flutter 生態系統委員會將 flame、flutter_animate、flutter_rust_bridge、riverpod、video_player、macos_ui 和 fpdart 套件指定為新的 Flutter 優選套件。恭喜大家！

請期待未來出現新的 Flutter 優選套件。若要提名一個套件或 Plugin 作為潛在的未來 Flutter 優選套件，或將任何其他問題提請委員會注意，請向委員會發送電子郵件至 [email protected]。

第一次套件生態系統虛擬峰會

在 8 月，我們為套件生態系統舉辦了首次虛擬峰會，有 50 多位非 Google 和 Google 貢獻者參加了 pub.dev。目標是讓貢獻者在非正式的討論中匯聚在一起，以規劃、教育、學習和在社群中分享。在活動後的調查中，對活動的滿意度為 100%。我們計劃在未來與社群合作，為套件生態系統舉辦類似的活動（面對面和虛擬）。在即將發布的套件生態系統更新部落格文章中了解更多資訊。

基於雲端的 Google Maps 樣式

Google Maps Platform 提供了從 Google Cloud Console 的地圖樣式頁面自訂地圖樣式的能力。這樣一來，您就可以建立自訂體驗，而無需每次變更樣式時都更新應用程式程式碼。

若要在 Flutter 中使用此功能，您只需使用在主控台中設置的地圖 ID 引用您的地圖即可：

1
2
3
4
5
6
7
8
9

GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: const CameraPosition(
          target: _kMapCenter,
          zoom: 7.0,
        ),
        key: _key,
        cloudMapId: _mapId
);

Camera X 改進

在 3.10 穩定版本中，我們為 Flutter 相機 Plugin 添加了對 Camera X 的初步支援。Camera X 是一個 Jetpack 函式庫，可以簡化在您的 Android 應用程式中添加豐富的相機功能。

在此版本中，我們已添加了任何使用相機的應用程式所需的大多數功能。Camera X 解決了 Plugin 的 Camera 2 實作中存在的大多數問題。

我們鼓勵您使用 Camera X Plugin。要選擇加入，請將以下行添加到您的 pubspec.yaml 檔案中。

1
2
3

Dependencies:
 camera: ^0.10.4 # 或嘗試最新的 camera 版本
 camera_android_camerax: ^0.5.0

我們期待您的回饋，因為我們計劃在未來的版本中將 Camera X 設為預設實作。

macOS 影片播放器

我們已為 影片播放器 Plugin 添加了 macOS 支援，允許開發人員在 Widget 表面上播放影片。

若要了解更多資訊，請查看 pub.dev 上的 影片播放器 Plugin。

DevTools

DevTools 擴展

新的 DevTools 擴展框架 可實現：

• 套件作者可以為其套件構建自訂工具，這些工具直接在 DevTools 中顯示。
• 套件作者可以撰寫功能強大的工具，這些工具可以利用 DevTools 中現有的框架和工具。
• 使用 DevTools 除錯應用程式的 Dart 和 Flutter 開發人員可以存取特定於其用例的工具（由應用程式的相依性以及哪些相依性提供 DevTools 擴展項決定）。

感謝 Provider、Drift 和 Patrol 的套件作者，這個生態系統已經在建立中，您現在可以使用這些套件的 DevTools 擴展項！

若要深入了解 DevTools 擴展項，請查看 Kenzie Davisson 撰寫的 Dart 和 Flutter DevTools 擴展項發布公告。

DevTools 更新

此版本中 DevTools 的一些亮點包括：

• 添加了對 DevTools 擴展項的支援
• 添加了新的「Home」螢幕，其中顯示已連接應用程式的摘要。

其他改進包括：

• 整體效能
• 熱重啟穩健性
• 文字選取和複製行為
• 網路分析工具回應檢視器修飾

要了解更多資訊，請查看 DevTools 的發行備註 2.26.1、2.27.0 和 2.28.1。

VS Code UI 可發現性

感謝 Flutter 社群成員 DanTup 的出色工作，Flutter VS Code 擴展項現在擁有一個 Flutter 側邊欄，讓您可以輕鬆存取：

• 打開 Flutter DevTools 螢幕
• 查看活動的除錯工作階段
• 查看可用設備
• 建立新的專案
• 熱重載和重新啟動
• 執行 Flutter Doctor -v
• 等等

棄用和重大變更

棄用和重大變更

此版本中的重大變更包括在 v3.13 版本發布後過期的已棄用 API。若要查看所有受影響的 API，以及其他背景資訊和遷移指南，請查看 此版本的棄用指南。其中許多受 Flutter fix 支援，包括 IDE 中的快速修復。可以使用 dart fix 命令評估和應用批量修復。

與往常一樣，非常感謝社群為 貢獻測試 - 這些測試幫助我們識別出這些重大變更。若要進一步了解，請查看 Flutter 的重大變更政策。

在我們的下一個版本中，我們將計劃擴展棄用政策，以涵蓋 flutter_driver 套件，以及已經支援的套件 flutter 和 flutter_test。

結語

我們在本文開頭就提到了貢獻者的數量，這是故意的。沒有你們所有人的努力 - 我們非凡的社群 - Flutter 就不會成為今天如此令人愉悅和高效的工具包。謝謝大家。

若要查看此版本中包含的所有 PR 的完整列表，請查看 發行備註和變更日誌。

Flutter 3.16 今天已在 stable channel 上提供，其中包含 Dart 3.2。若要開始使用這些最新更新，您只需執行 flutter upgrade 即可。

很快再見！

Flutter 3.16 的新功能 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

今年邁向跨平台開發的重要里程碑

今天，我們很高興宣布兩個新的 SDK 版本——Dart 3.2 和 Flutter 3.16——以及 Flutter 休閒遊戲工具包的重大更新。

Flutter 和 Dart 的價值主張

在今年年初肯亞內羅畢舉行的 Flutter Forward 上，我們介紹了 Flutter 和 Dart 的新路線圖。兩份路線圖都側重於四個高級主題：突破性圖形體驗、與 Web 和行動平台的無縫整合、早期採用新興架構，以及持續關注開發者體驗。

在 5 月份的 Google I/O 上，我們 宣布 我們在實現這一願景方面取得了重大進展，包括（但不限於）改進 iOS 上的渲染效能（使用 Impeller），支援 Web 上的元素嵌入，以及完成 Dart 3 中 100% 空安全之旅。

隨著我們接近年終，以下是自那以來的進展更新。

使用 Flutter 和 Dart 提供使用者價值

隨著每個新功能、改進或錯誤修復，整體目標保持不變：提供強大的語言和框架配對，讓您能夠建立美麗、豐富且快速的應用程式。您可以從單一的共享程式碼庫進行開發，為行動、Web 和桌面上面的應用程式使用者提供服務，而無需碎片化您的產品路線圖。我們也致力於開源，沒有授權成本，並致力於開發由開放性和協作驅動的豐富生態系統。

這個目標繼續引起 Google 內部和全球 Flutter 廣泛生態系統中開發者的共鳴。今年發佈了許多使用 Flutter 建立的 Google 應用程式：

• 正如我們在 Flutter Forward 上宣布的那樣，Google Classroom 團隊在其行動應用程式中使用 Flutter，這些應用程式現在已在 iOS 上推出，並且在 Android 上處於 Beta 測試階段。他們正在看到由新的 Impeller 渲染引擎驅動的 顯著效能提升。
• YouTube Create 是一款由 Google 發佈的全新 Flutter 應用程式，它在 8 個國家/地區中提供 Beta 測試。此應用程式利用 Flutter Widget 函式庫的靈活性，提供完整的影片編輯體驗，包括濾鏡、效果以及音樂和配音編輯。
• 使用Flutter驅動的 Google Earth 10 版本，使用者可以輕鬆地建立、協作和組織地圖和地理空間資料，不僅可以在 Web 上使用，還可以在 Android 和 iOS 行動裝置和平板電腦上使用！查看 Google Earth 發文 以獲取有關新設計的更多詳細資訊，並繼續關注我們將在未來的部落格文章中詳細介紹 Earth 團隊如何使用 Flutter 構建他們的應用程式。

Flutter 的採用也持續在 Google 之外、全球範圍內增長：

• 今年發佈的應用程式包括瑞典的 Skandia 和波蘭的 Credit Agricole 等銀行應用程式，美國的 MarketWatch 虛擬股票交易所投資教育應用程式，荷蘭的 CZ 健康保險應用程式，以及加拿大的 Kijiji 分類廣告市場應用程式。一個共同的主題是，這些團隊選擇 Flutter 來實現 Android 和 iOS 之間一致的功能集，同時仍然提供豐富且引人入勝的 UI 體驗。
• 繼續朝東前進，騰訊發佈了 Cloud Chat，這是一款豐富的全新聊天 SDK 和 UI 函式庫，目前在中國的聊天服務市場排名第一，並且正在擴展到國際市場。
• 在巴西，SOMA 時尚集團啟動了其 Farm 品牌的重大數位更新，並在此過程中意識到 Flutter 的靈活性讓他們能夠將其擴展到該集團的其他品牌。在美國，Caribou Coffee 將 Flutter 與 Firebase 結合，以加速其生產力，而 Lucid Motors 報告稱，Flutter 不僅讓他們可以使用一個小型團隊交付兩個行動應用程式，而且 Flutter 的 Web 支援還讓他們能夠在內部分享原型。

我們很高興見證這些應用程式的演變。繼續閱讀，了解我們在核心框架中取得的持續進展。

突破性圖形效能

我們堅信，多平台開發不應意味著開發者或終端使用者體驗的下降。因此，我們竭盡全力實現這一願景。在 Flutter Forward 上，我們推出了 Impeller 引擎，這是對圖形渲染架構的全面重新設計和重新實作，旨在提高速度和效能。在 Flutter 3.10 中，我們宣布 Impeller 在 iOS 上預設啟用。今天，在 Flutter 3.16 中，我們很高興地分享，Impeller 在 Android 上已準備好在 stable channel 上接受預覽回饋。效能在一整年都得到了顯著提升；與一年前相比，在 Flutter Gallery 基準測試中測量的光柵化效能大約是使用 Impeller 在 Vulkan 上的效能的兩倍。有關如何啟用 Impeller 的詳細信息，請參閱 Flutter 3.16 發文。

休閒遊戲工具包

特別受益於快速且強大的圖形渲染的應用程式類別是遊戲。在 2022 年，我們發佈了最初的 Flutter 休閒遊戲工具包。今天，我們宣布重大更新，其中包括從紙牌遊戲到跑酷遊戲的全新模板選項，以及針對排行榜、變現和遙測等主題的一組遊戲服務開發者資源。有關更多詳細信息，請查看 休閒遊戲工具包部落格發文。

無縫整合

雖然 Flutter 應用程式通常在不同平台間具有非常高的共享程式碼比例（許多開發者報告共享比例為 95-99%），但我們仍然認為支援平台特定功能非常重要。在 iOS 上，應用程式擴展 提供了一種方式，讓使用者可以從手機上的其他應用程式中與應用程式的縮小版本進行互動。在我們上一個穩定版本中，我們發佈了 新資源 來幫助您為 Flutter 應用程式構建主畫面和鎖定螢幕 Widget。在 Flutter 3.16 中，我們加入了對使用 Flutter 渲染 某些 iOS 應用程式擴展的 UI 的支援，例如 共享擴展。Android 14 推出了新的 預測式返回手勢，它讓使用者可以在使用返回手勢（向左滑動）時瞥見應用程式背後的系統 UI。Flutter 3.16 支援此手勢。

持續關注開發者體驗

現代裝置具有各種外形尺寸（例如手機、摺疊式手機和平板電腦），這些裝置具有各種螢幕尺寸，並支援外部輸入裝置，例如鍵盤和滑鼠。為了確保您的使用者擁有良好的使用者體驗，考慮這些因素非常重要。我們最近與 Android 團隊合作，加入了對其 大型螢幕指南 的支援。我們已經發佈了 在加入大型螢幕支援方面的經驗，更新了我們的參考應用程式 Wonderous 以支援多種螢幕尺寸，並在 Flutter 框架中進行了一些修復，以更好地支援鍵盤、滑鼠和觸控板輸入。新的 API 讓您可以確定顯示器的尺寸和像素比率，並支援多視窗渲染。

在一年中，我們一直致力於完成對 Material 3 的支援，這是 Material Design 設計系統的最新版本。Flutter 的 Material Widget 現在完全支援 Material 3，並且在 Flutter 3.16 中，Material 3 現在是預設樣式。我們發現 Material 為應用程式增添了煥然一新的外觀；新的配色方案既美觀又符合無障礙的對比度要求。若要獲得實際體驗，請查看 Material 3 圖庫。

開發者工具的兩個重大改進包括 VS Code 的新側邊欄和對 DevTools 中添加擴展的支援。側邊欄可以輕鬆發現核心 Flutter 工具操作，例如建立新專案、調用熱重裝、打開 DevTools 或選擇目標設備。DevTools 擴展提供了一個框架，讓您可以建立新的自定義工具，這些工具可以插入 DevTools，並提供額外的框架特定功能。Provider，Patrol 和 ServerPod 是開發 DevTools 擴展的幾個框架範例。

我們重新啟動了 Flutter Favorite 程式，並將 flame，flutter_animate，flutter_rust_bridge，riverpod，video_player，macos_ui 和 fpdart 指定為新的 Flutter Favorite。在 8 月份，我們為套件生態系統舉辦了首次虛擬峰會，超過 50 位非 Google 員工和 Google 員工貢獻者參加了 pub.dev 的峰會。

我們還見證了幾個強大的新套件和 Plugin 的到來。我最喜歡的幾個是 camera Plugin 中的 CameraX 支援，高效能的 2D 可捲軸 TableView 以及 flutterflow_ui 套件，它允許設計師和開發者使用拖放功能建立 UI 組件，然後將它們導出到 Flutter Widget 程式碼（演示影片）。此外，google_maps 套件現在支援 雲地圖樣式，因此開發者可以從 Google Cloud Console 中更新他們的樣式，而 home_widget 套件現在支援建立 互動式 iOS 主畫面 Widget。

新興架構

Dart 互操作性

Dart 基於核心承諾，讓跨平台 Dart 程式碼可以在 廣泛的平台 上運行。但是，這通常需要補充以與現有程式碼進行互操作的能力，無論這些程式碼來自舊的專案還是其他函式庫或系統 API 中提供的 API。為了實現這一點，Dart 提供了 與原生 C API 的互操作性，並且正在努力擴展它以支援與 Java + Kotlin 和 Objective C + Swift 的互操作性。有關更多詳細信息，請查看今天的 Dart 3.2 部落格發文。

WebAssembly 之路

Wasm（也稱為 WebAssembly）是一種 Web 瀏覽器的令人興奮的新指令格式，它提供了一種可移植的、平台中立的、二進位程式碼格式，可以在現代瀏覽器中執行。像 Dart 這樣的高級受控語言使用垃圾收集，而垃圾收集正在被加入到 WebAssembly 標準中。截至 Chrome 119，WebAssembly 的垃圾收集支援（Wasm-GC）預設啟用。Wasm-GC 支援也將在 Firefox 120（他們的下一個穩定版本）中推出。

Dart 編譯器對 Wasm 的支援幾乎已完成，而 Flutter Web 現在使用了一個新的渲染引擎，它可以讓所有渲染都在 WebAssembly 程式碼中進行。雖然還有更多工作要做，支援仍然被認為是實驗性的，但我們已經能夠運行一些應用程式，例如 Material 3 演示。Dart 3.2 部落格發文 中有更多詳細信息。

生動社群的力量

今天的部落格發文僅僅是過去幾個季度中數千個改進的示例。更重要的是，越來越多的改進來自Google以外的開發者貢獻——最近發佈的 2023 年 GitHub Octoverse 報告 關於開源活動，將 Flutter 專案列為所有 GitHub 開源專案中的前 3 名。

感謝您的非凡支援，我們度過了美好的一年。對於 Dart 和 Flutter 社群的多樣性、熱情和友善精神，我們表示感謝，他們在產品成功中發揮了至關重要的作用。我們迫不及待地想看看您接下來會建立什麼。在下次更新之前，感謝您的支援 🙏，並祝您編碼愉快！

今年邁向跨平台開發的重要里程碑 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

在 Flutter 中進行免費且開源的跨平台 2D 遊戲開發

今天，我很興奮地向您介紹 Flutter 休閒遊戲工具包 的重大更新，它是一組新的範本和新的開發者資源，旨在讓遊戲開發者在 Flutter 上提高生產力。

Flutter 是 Google 的開源 UI 架構，用於建立美觀的跨平台應用程式。如今，從早期階段的創業公司到 ByteDance、騰訊、BMW 和 Google 等大型公司，Flutter 被用於超過一百萬個應用程式，從單一程式碼庫提供美觀、高效能且可移植的跨平台體驗。

在過去的幾年中，我們目睹了圍繞休閒遊戲開發的社群不斷增長。使用 Flutter 發佈了數以萬計的遊戲，從簡單卻有趣的益智遊戲到更複雜的街機遊戲。我們最喜歡的遊戲包括 Etermax 的 Trivia Crack、Lotum 的 4 Pics 1 Word（猜詞遊戲）、Dong Digital 的 Brick Mania（街機遊戲）、Onrizon 的 StopotS（分類遊戲）、我們在 I/O 為 Flutter 建立的 復古彈珠台遊戲，以及在社交和選單螢幕中使用 Flutter 的 PUBG 行動版。

為什麼選擇 Flutter 來開發休閒遊戲

Flutter 是遊戲開發者的絕佳選擇。首先，它是免費且開源的，讓您能夠對遊戲的渲染和輸入處理邏輯進行精細的控制。這讓您能夠在核心問題上進行除錯，並根據需要自訂引擎。Flutter 的開放性也體現在我們的生態系統中。所有 Flutter Plugin 和套件 也可供免費整合。

其次，在 Flutter 中進行開發效率很高。Flutter 引入了革命性的功能，稱為 熱重裝，允許開發者在進行程式碼更改後立即看到 UI 更新，從而使開發過程更加反覆和高效。此外，Flutter 支援跨平台遊戲開發，因此您可以從單一共享程式碼庫為 iOS 和 Android、網頁以及桌面 建立遊戲。這可以節省您的時間和精力，並讓您的遊戲從第一天起就能接觸到更廣泛的受眾。

最後，Flutter 遊戲載入速度快，並且通常效能非常好，即使是在低端設備或瀏覽器中也是如此。捆綁包大小可以更小，因為 Flutter 引擎只會為您的遊戲增加幾兆位元組。

更新後的 Flutter 休閒遊戲工具包

自 2022 年發佈工具包的第一個版本以來，我們看到了 Flutter 社群的熱烈反響，但我們也收到了強烈的回饋，表明您需要更多開發成功遊戲的資源和指導。因此，我們正在使用新的遊戲範本和資源更新 Flutter 休閒遊戲工具包，以幫助您在 Flutter 中輕鬆建立休閒遊戲。僅僅列舉幾個更新：

多種類型遊戲的範本

我們新增了三個新的遊戲範本，為建立休閒遊戲提供起點。首先，您會找到一個 基本範本，它具有用於主選單、設定螢幕、簡單關卡選擇和音訊整合的簡單 UI。

其次，您會找到一個 卡牌遊戲範本，它建立在基本範本之上，並新增了基本的卡片拖放功能，並已準備好整合多人遊戲。

第三，我們與開源遊戲引擎 Flame（基於 Flutter 建造）合作，提供了一個 無限跑酷範本。雖然您已經可以使用 僅 Flutter 來建立許多回合制遊戲，例如卡牌遊戲、文字謎題和棋盤遊戲，這些遊戲對簡單的使用者輸入做出反應，但您可能也想要建立實時遊戲，例如無限跑酷、射擊遊戲和賽車遊戲，這些遊戲需要遊戲循環。在這些情況下，您可以使用 Flame 來實作遊戲方向、碰撞偵測、視差、生成和不同的視覺效果。

若要使用這些範本，請查看 儲存庫，並使用最符合您需求的範本開始建立遊戲。

遊戲服務整合的開發者資源

工具包包含用於整合必需服務的開發者指南，以使您的遊戲更成功。例如，我們包含了幾個新的食譜和 codelab，以向您展示如何：

• 使用 Cloud Firestore 建立 多人遊戲。
• 使用 排行榜和成就 使您的遊戲更具吸引力。
• 使用 遊戲內廣告 和 應用內購買 為您的遊戲變現。
• 使用 Firebase 驗證 添加使用者驗證流程。
• 使用 Firebase Crashlytics 收集有關崩潰和錯誤的分析。

Flutter 休閒遊戲工具包，與 Flutter 一樣，是免費的（BSD 3 授權）且開源的。您可以在 flutter.dev/games 上了解更多資訊並開始使用。我們希望透過更多類型專用的範本和開發者資源，為工具包發佈進一步的更新。請發送電子郵件至 [email protected] 告知我們還有哪些可以讓您的遊戲開發體驗更輕鬆！

在 Flutter 中開始建立您的遊戲

我們很興奮地看到您使用 Flutter 休閒遊戲工具包建立的內容。無論您是經驗豐富的遊戲開發者還是剛剛起步，我們都擁有您創建出色的休閒遊戲所需的工具和資源。您還在等什麼？今天就開始建立吧！

使用 Flutter 建立您的下一個休閒遊戲 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

開發大型螢幕的 Flutter 應用程式

去年，我們與 gSkinner 團隊合作開發了 Wonderous，這是一個參考應用程式，用於展示 Flutter 可以實現的高品質體驗。

建立 Wonderous 的目標之一 是提供一個開源的範例，展示最佳實務。本著同樣的精神，我們根據 Android 大型螢幕指南 審查了 Wonderous。我們希望確保在所有 Android 設備上提供高品質的 Flutter 應用程式。Android 有三個層級來滿足其指南：

第三層級 - 大型螢幕就緒 - 應用程式在全螢幕（或多視窗模式下的全視窗）中運行，但應用程式佈局可能不理想。

第二層級 - 大型螢幕優化 - 應用程式佈局針對所有螢幕尺寸進行優化，並處理外部輸入設備。

第一層級 - 大型螢幕差異化 - 應用程式專為摺疊裝置而設計，確保佈局支援具有鉸鏈的桌面模式。

2023 年 1 月，我們更新了 Wonderous 應用程式以適應不同的設備格式。雖然這些更新使應用程式「大型螢幕就緒」，但應用程式尚未「大型螢幕優化」。

因此，我們再次與 gSkinner 合作，將 Wonderous 提升到第二層級（或更高）並針對 Android 的全新大型螢幕 Pixel 設備 進行優化。

在本文中，我們將分享我們的學習心得，以及您在開發應用程式以滿足 Android 大型螢幕指南時應該考慮的因素。

大型螢幕為何重要

在深入探討我們如何優化 Wonderous 以滿足 Android 大型螢幕指南之前，讓我們先了解支援大型螢幕的好處。

當我們說 大型螢幕 時，我們指的是平板電腦、摺疊裝置和運行 Android 的 ChromeOS 設備。對大型螢幕的需求正在增加。如今，超過 2.7 億台活躍大型螢幕 和摺疊裝置在 Android 上運行。

這對開發人員很重要：

• 提高業務指標，例如，對佈局優化為填滿全螢幕的應用程式來說，平板電腦上的使用者參與度提高。
• 提高 技術品質，以提高您的應用程式在 Play 商店中這些設備上的可見度。最近的 Play 商店更新 顯示了按設備類型劃分的評分，並且在應用程式缺乏大型螢幕支援時會通知使用者。

從優化 Wonderous 中的學習心得

Wonderous 應用程式的另一個目標是作為建立學習材料和文件的來源。在本節中，我們將分享 Wonderous 未能滿足大型螢幕要求的地方。這些問題可能是 Flutter 開發人員遇到的常見問題，因此我們將分享我們的解決方法。

應用程式延續性與設定變更

要求： 應用程式應隨著設備旋轉、變更視窗大小或摺疊和展開而變更方向，並保持或還原狀態。

問題：摺疊/展開導致狀態丟失

當 Wonderous 被摺疊和展開時，應用程式會遇到狀態丟失，並且始終會返回到初始螢幕。這個問題讓我們花費了很長時間才弄清楚。我們最初認為這是 Flutter 在摺疊/展開設備時預設的行為，但無法使用 Flutter 計數器應用程式重現它。然後我們意識到可能是某個外掛導致狀態丟失，特別是 flutter_inappwebview 外掛。

解決方法： 將 flutter_inappwebview 外掛替換為 webview_flutter，這解決了在設備設定期間保持狀態的問題。

學習心得： 您的應用程式在設備摺疊/展開時不應丟失狀態，Flutter 預設應保持狀態。如果您的應用程式正在丟失狀態，請確認您使用的外掛支援大型螢幕設備。原生擴展可能會在設備位置變更時導致狀態丟失。

問題：保持捲軸位置狀態

我們認為我們可能需要很多重複的程式碼來確保清單在螢幕尺寸變更時保持其捲軸位置。我們首先使用了 key:PageStorageKey API，它修復了我們的大部分清單視圖。「學習心得」部分描述了您需要進一步操作的情況。

解決方法： 使用 key: PageStorageKey API 來保持清單的捲軸位置，這些清單在設備方向變更時保持相同的佈局。透過 為集合頁面新增 PageStorageKey，SingleChildScrollView Widget 的捲軸位置將會 自動儲存。

學習心得： 雖然 key: PageStorageKey 提供了一種優雅的方式來使用清單保持捲軸位置，但如果您的清單在設備方向變更時從垂直變更為水平，它將不起作用。以前的 GIF 顯示了 Wonderous 的某些頁面發生了什麼。在這種情況下，您可能需要 進行一些數學運算並在螢幕旋轉時變更捲軸位置。

多視窗與分割畫面

要求： 應用程式在多視窗模式下具有完整的功能。例如，當應用程式沒有最高焦點時，應用程式會更新其 UI，繼續播放媒體。

問題：由於分割畫面視圖導致 Letterboxing

隨著 「螢幕分割」 的出現，使用者可以（在某些方向和縱橫比下）將應用程式置於不到兩英寸的垂直空間中。當螢幕被分割到顯示區域的 ⅓ 時，Wonderous 應用程式被 Letterboxed 或放置在顯示區域的中心，實心色背景填補了未使用的區域（如下所示）。

這是因為我們選擇透過使用 MediaQuery 來確定設備的大小，在較小的螢幕上禁用橫向模式。不幸的是，MediaQuery 在您處於分割畫面模式時實際上無法提供螢幕尺寸，並且錯誤地將具有分割畫面的大型設備識別為小型設備。

解決方法： 我們在 Flutter 中加入了一個新的 API，為 Android 的新視窗尺寸類別 提供支援。透過切換到 Display API，我們能夠獲得全螢幕尺寸，並準確區分具有多個視窗的小型設備和大型設備。使用此 API，您可以擷取顯示器的各種屬性。新的 FlutterView.display getter 會返回一個 Display 物件。Display 物件會報告顯示器的實體尺寸、設備像素比和更新頻率。若要查看使用新 API 的範例，請訪問 setPreferredMethod API。

學習心得： 在禁用小型設備上的橫向模式時（使用 SystemChrome.setPreferredOrientations()），請使用 Display API 來確定設備尺寸，而不是 MediaQuery。

鍵盤、滑鼠和觸控板輸入

要求： 應用程式應支援基本的滑鼠或觸控板，以及鍵盤捷徑。主要的使用者流程應支援鍵盤導航，以確保無障礙。

問題：焦點狀態

Flutter 的 Material 按鈕預設會處理基本的焦點狀態。在 Wonderous 的情況下，我們變更了 Material 按鈕的預設樣式，將 overlayColor 設定為透明。這最終破壞了按鈕的焦點狀態。對於具有鍵盤和觸控板的大型螢幕設備，您的應用程式必須處理導航，並為這些週邊設備提供無障礙解決方案。

解決方法： 變更按鈕樣式，以便在按鈕獲得焦點時顯示輪廓。我們使用了 FocusNode 的 hasFocus 屬性 來檢查按鈕節點何時有焦點輸入，並在按鈕中加入了邊框。

學習心得： 確保為應用程式中的任何自訂按鈕或手勢偵測器實作焦點狀態。如果您變更了預設的 Material 按鈕樣式，請確保您正在測試鍵盤焦點狀態，並根據需要實作自己的焦點狀態。

問題：滑鼠捲軸速度慢

滑鼠滾輪在應用程式的某些設備上效果不佳。使用者必須大幅度移動滾輪才能使螢幕響應。這是一個已知的 問題，感謝我們的社群。我們注意到在平板電腦和摺疊裝置上這種情況更加明顯。

解決方法： 我們在框架中 修復了這個問題，因為它影響了所有 Flutter 應用程式，並且將在下一版 Flutter 穩定版本中提供。

學習心得： 有時問題不是您的應用程式獨有的，需要 Flutter 團隊來修復 :)

應用程式使用者體驗佈局

要求： 應用程式應提供自適應佈局和響應式視覺元素，這些元素會根據可用螢幕空間或設備方向進行變更。

問題：導航軌

在 Wonderous 的第一個版本中，我們禁用了應用程式在小型外形尺寸上的旋轉，因為應用程式在較小的螢幕上缺乏適當的橫向模式支援。如前所述，我們修正了應用程式，以便在大型螢幕設備上分割畫面模式下，小型螢幕能夠支援橫向模式。雖然這種方法修復了 Letterboxing 問題，但應用程式的導航缺乏大型螢幕的適當人體工學變得更加明顯。

這要求應用程式將導航佈局在螢幕邊緣附近，這些邊緣更容易觸及，例如平板電腦的左側邊緣，以在橫向模式下為應用程式內容釋放寶貴的垂直空間。

解決方法： 更新設計，並實作類似於 Material 的導航軌 的導航。

學習心得： 確保應用程式中的佈局和導航在大型螢幕設備和約 2 英寸的垂直空間（如果螢幕處於分割模式）中可以正常運作。為了使這成為可能，請使用 自適應 Widget，例如 Material 的導航軌。

其他事宜

問題：相機預覽和媒體投影

要達到 Android 的第三層級 狀態，您的應用程式需要在不同的方向、螢幕尺寸和多視窗模式下支援相機預覽和媒體投影。由於 Wonderous 沒有相機功能，因此此要求不適用。

學習心得： 顯示相機預覽 令人驚訝地複雜，但 Jetpack CameraX 函式庫 處理了其中許多細節。在 Flutter 3.10 中，我們在 Flutter 相機外掛中加入了對 CameraX 的初步支援。若要嘗試它，請透過在您的 pubspec.yaml 檔案中加入以下行來選擇加入。

1
2
3

Dependencies:
camera: ^0.10.4 # 最新相機版本
camera_android_camerax: ^0.5.0

不僅限於 Android

雖然這些修復和學習心得是針對 Android 大型螢幕設備提出的，但某些可能適用於其他平台。它們可以讓您的應用程式在 iPad、桌面瀏覽器和桌面設備上運行得更好。同樣的學習心得也適用：利用 PageStorageKey API、使用自適應 Widget 和佈局，或確保您使用的外掛能與大型外形尺寸配合良好。

總結

我們優化 Wonderous 應用程式以滿足 大型螢幕 需求的主要目標是展示開發 Flutter 應用程式的最佳實務，這些應用程式可以為所有 Android 設備提供絕佳的體驗。

在滿足 Android 的 第二層級狀態 的全面要求的過程中，我們發現了如何修復其他在大型螢幕上運行的 Flutter 應用程式中可能遇到的常見問題。以下是一些主要的學習心得：

• 在變更設備方向或摺疊/展開設備時，保持並還原 應用程式狀態。
• 透過使用 Display API 準確確定螢幕尺寸，確保您的應用程式沒有被 Letterboxed。
• 處理外部 輸入設備，例如使用滑鼠或鍵盤捲動。
• 專門針對大型螢幕設備設計您的應用程式佈局，例如利用 Material 的導航軌。

您可以在 Android 的開發人員網站上進一步了解 Android 的 大型螢幕應用程式品質 指南。

我們希望您在開發自己的 Flutter 應用程式以滿足 Android 的大型螢幕要求時，可以將 Wonderous 作為參考。

如果您對應用程式有任何回饋，請 在 Github 上提交議題。如果您對 Flutter 的 Android 支援或支援大型螢幕設備有任何想法，請隨時在 X (@marihasnany) 上向我發送訊息。

開發大型螢幕的 Flutter 應用程式 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

企業可以到哪裡找到顧問來協助打造下一個應用程式？

設計公司和數位科技顧問在應用程式的成功中扮演著至關重要的角色。企業通常會尋求顧問的協助，以幫助他們建立概念驗證、重新設計現有應用程式，或作為開發專案的專家。新創公司則會尋求代理商來建立品牌識別和製作最小可行產品原型。這些值得信賴的合作夥伴可能很難找到。

因此，我們很興奮地推出 Flutter 顧問名錄。

我們推出這個新頁面，簡化尋找值得信賴的 Flutter 合作夥伴的流程。我們會審查名錄中列出的合作夥伴，以驗證他們在 Flutter 專案上的成功記錄、充足的技術熟練開發人員，以及他們對發展 Flutter 社群的承諾。

顧問的資源

作為此次推出的部分，我們將重點介紹一些資源，以幫助潛在的顧問提升他們的 Flutter 專業知識。這包括：

Flutter 簡報範本

複製一份並加入您團隊的案例研究，向潛在客戶提供有說服力的 Flutter 案例。

用 Flutter 打造奇蹟

來自頂尖 Flutter 設計公司 gSkinner 的見證，說明為什麼 Flutter 對他們的團隊來說是一個寶貴的工具箱。

FlutterFlow 如何讓顧問更快地完成工作

了解顧問如何使用 FlutterFlow 更快地交付高品質的客戶專案。 閱讀部落格文章。_

IBM 如何建立其 Flutter 優秀中心

了解 IBM 為什麼以及如何用數百位 Flutter 開發人員建立 Flutter 優秀中心。 閱讀部落格文章。_

訓練客戶使用 Flutter

了解 VGV 如何建立成功的 Flutter 訓練課程。您可以提升自己的開發人員或客戶的技能。 閱讀部落格文章。_

準備好申請了嗎？

要申請，代理商和顧問應該填寫 這個 Google 表單。我們會定期審查提交的內容，並會在適當的時間通知您申請狀態。我們要求顧問每季更新其資訊，以確保名錄的準確性和相關性。

有任何回饋嗎？

我們總是樂於接受回饋。如果您對如何改進名錄或合作夥伴資源有任何想法，請發送電子郵件至 [email protected]。

介紹 Flutter 顧問名錄 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

了解 IBM 如何透過 Flutter 助客戶成功

有效的客戶合作包含兩項關鍵因素：資源的明智運用和及時的交付。

在當今以行動裝置和數位為先的環境中，客戶對體驗、速度、個人化和便利性的期望呈指數級增長。透過使用 Flutter，開發人員和設計師可以更快、更有效地建立跨平台的網頁和行動應用程式。

我們為何要擴展 Flutter 的實務

Flutter 幫助我們更快地交付客戶專案

透過從單一程式碼庫中針對多個平台進行開發，我們的團隊可以比以往更快地進行原型設計、改進和部署客戶應用程式。使用 Flutter，我們可以將專案交付速度提高三倍，而不會犧牲品質。

在 COVID-19 爆發初期，西班牙比斯開省政府聯繫 IBM，希望獲得協助，向其公民傳達最新行動和消息。他們需要一個行動應用程式，而且需要在兩週內完成。透過使用 Flutter，應用程式的第一個版本在短短 11 天內就發佈了。它迅速成為該地區下載量第三高的應用程式。

“在如此緊迫的時間限制下，Flutter 成為我們的救星。這是我們做出的最快的困難決定，也是我們做出的最相關的決定之一。為 iOS 和 Android 建立應用程式就如同為我們的開發團隊賦予超能力，讓我們在與時間賽跑中獲勝。”
— IBM 專案總監 Joanra Mallart

Flutter 幫助我們的客戶以更少的資金獲得更多

交付絕佳的使用者體驗始終是我們首要考量。然而，許多客戶的預算很緊，這往往需要放棄會幫助其應用程式成功的平台或功能。透過使用 Flutter，我們能夠透過無妥協的開發來超越客戶的期望。

客戶正在詢問 Flutter

Flutter 的普及程度不斷提高，這從最近的 StackOverflow 報告 中可以看出，該報告將其列為最受歡迎的 UI 框架。因此，我們看到越來越多的客戶向我們詢問如何在他們的應用程式中使用 Flutter。開發人員和業務利益相關者都對利用 Flutter 的優點感興趣。

與 Google 的無縫協作

作為 Google Cloud 的主要合作夥伴，IBM 和 Google 已經建立了緊密的關係。透過採用 Flutter，我們能夠利用開發人員產品之間的無縫整合，並在需要時獲得 Google 團隊的支援。

我們如何建立卓越中心

數十年來，IBM 一直處於以使用者為中心的行動創新的最前沿，由 IBM iX 領導，IBM iX 是 IBM 諮詢的體驗和設計合作夥伴。我們在全球 60 個 IBM iX 工作室中擁有超過 15,000 名開發、設計和策略實務者，為全球客戶提供傑出的行動體驗。

然而，對於一個龐大且分散的團隊來說，建立一個知識共享的單一場所至關重要。建立卓越中心有助於我們的團隊推薦最佳實務、重複利用經驗教訓，並在整合的社群中慶祝客戶的成功。

以下是我們為建立 IBM 諮詢的 Flutter 開發和設計卓越中心而設定的優先事項：

1. 定期舉辦社群論壇

在 IBM，我們每季度舉辦一次 Flutter 社群電話會議。在這個電話會議中，開發人員和設計師可以分享客戶參與的經驗教訓、討論 Flutter 和 Dart 的新功能，以及從更廣泛的 Flutter 社群中獲得更新。

2. 建立一個提問的環境

我們建立了一個專用的聊天室，讓開發人員和設計師可以隨時提出與 Flutter 相關的問題。我們有一群 Flutter 專家可以協助解決問題或推薦特定方法。

3. 將知識共享和可重複使用的組件集中化

許多客戶專案在架構上存在相似之處。因此，我們建立了簡單的專案範本，實務者可以從中提取這些範本以加快開發速度。

4. 為客戶建立教育材料

雖然許多客戶了解 Flutter 的優點，但有些人可能想要更好地了解 Flutter 如何幫助 _他們_。基於 Flutter 推介資料，我們開發了材料來教育客戶了解 Flutter 與其他框架的不同之處。我們建立了一個客戶案例研究的中心儲存庫，以便輕鬆展示 Flutter 如何幫助以前的客戶。

5. 為 Flutter 實務者建立學習路徑

在 IBM，實務者可以獲得特定技術或領域的認證。我們建立了一個專用的學習路徑，幫助開發人員學習 Flutter 並將這些知識應用於新的客戶參與中。當實務者完成此路徑後，他們將在我們的資料庫中被記錄為 Flutter 實務者 - 因此可以輕鬆快速地為 Flutter 專案配備人員。

透過建立這個卓越中心，我們幫助實務者加快了他們對 Flutter 的學習。藉由這些資訊，我們可以更好地、更快地交付客戶專案。

未來：推動 Flutter 的卓越

到目前為止，IBM 在交付 Flutter 專案方面取得了重大成功。我們的客戶包括全球銀行、聯邦和州政府以及國際軍方人員。我們還在全球範圍內交付了許多概念驗證。

憑藉 Flutter 的靈活性以及 IBM 諮詢的創新傳統，我們正在努力塑造出色的行動體驗，讓企業及其客戶產生共鳴。隨著我們擁抱這個新的合作階段，我們邀請您加入我們這個轉變之旅。

立即聯繫我們，了解 IBM 諮詢 如何利用 Flutter 的速度、效率和卓越來賦能您的業務。

John Mutter 是 IBM 全球 CTO 體驗工程師，也是 IBM 傑出工程師。

IBM 如何建立 Flutter 卓越中心 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 Gemini 1.5 Pro 自動產生】

Flutter 3.13 的新功能：2D 捲軸、更快的圖形、Material 3 更新等等

歡迎回到我們的季度 Flutter 穩定版本發布，這次是 Flutter 3.13！在我們上一次版本發布後的短短三個月內，我們已經合併了 724 個 pull 請求，並且有 55 位社群成員為 Flutter 貢獻了他們的第一次提交！

繼續閱讀，了解 Flutter 社群為這個最新版本貢獻的所有最新功能和改進！

引擎

我們對 Impeller（我們新的圖形渲染器）進行了一些改進，並為可折疊設備添加了新的引擎 API。

Impeller

iOS 效能改進

感謝 Flutter 用戶的高品質回饋，在此版本中，我們繼續改進 Impeller 在 iOS 上的效能。由於許多不同的優化，Impeller 渲染器在 iOS 上現在不僅具有更低的延遲（透過完全消除著色器編譯卡頓），而且在某些基準測試中還具有更高的平均吞吐量。特別是在我們的 flutter/gallery 轉場效能基準測試中，平均畫面柵格化時間現在大約是 Skia 的一半。

iPhone 11 上的 Flutter Gallery 轉場效能基準測試中平均畫面柵格化時間的改進。涵蓋的時間段大約是從 3.10 分支切換到 3.13 分支的時間。

這些進展要歸功於這些和其他優化，包括：

• 啟用髒污區域管理和局部重繪 (flutter/engine#40959)
• 實作並行渲染傳遞編碼 (flutter/engine#42028)
• 對文字渲染進行了許多改進 (flutter/engine#41290，flutter/engine#41780，flutter/engine#42417)
• 為凸形狀添加了快速路徑，以避免昂貴的細分函數調用 (flutter/engine#41834)
• 開始為少數操作使用計算著色器 (flutter/engine#42192)
• 更積極地剔除超出界限的繪製操作 (flutter/engine#41606)

保真度改進

在 3.10 中，我們宣布在使用 Impeller 時，廣色域色彩在標記下可用。在聽取並解決了用戶的回饋後，廣色域色彩現在是使用 Impeller 時 iOS 上的預設值。

Impeller 在 Android 上的進展更新

我們繼續在 Impeller 的 Vulkan 後端取得進展，但它尚未達到可以使用官方預覽期的品質水準。我們希望確保用戶在 Android 上第一次使用 Impeller 的體驗是高品質的，而我們還沒有達到這個水準。我們希望在今年晚些時候的穩定版本中進入 Android 上 Impeller 的預覽期。儘管 Android 上的 Impeller 尚未準備好進行預覽，但 OpenGL 和 Vulkan 後端從我們在過去一年中對 Impeller 的 HAL 進行的許多後端無關優化中受益。特別是在 flutter/gallery 轉場效能基準測試中，Android 的平均畫面柵格化時間也顯著提高。正在進行進一步的改進，以便 Android 上的預覽可以達到高品質。

再次感謝社群的貢獻，特別是 GitHub 用戶 ColdPaleLight，他撰寫了幾個非常受歡迎的與 Impeller 相關的修補程式，改進了保真度和效能，包括添加了 對圓錐形漸變的支援。

請繼續使用 Impeller 的 專案儀表板 在 GitHub 上追蹤我們的進度。我們非常感謝所有回饋，並鼓勵用戶繼續在 問題追蹤器 中提交保真度和效能問題。

Impeller（以及 Wonderous）在 macOS 上

在我們上次穩定版本發布中，我們宣布 Impeller（我們渲染引擎的重寫版本）將在 iOS 上預設啟用。從那以後，我們聽到了客戶的良好回饋。現在，我們很興奮地宣布 macOS 的 Impeller 已在預覽版中提供。您可以透過遵循 Impeller 頁面 上的指南來測試 Impeller 並在您的應用程式中啟用它。

我們渴望您測試並提供回饋。幫助我們改進 macOS 的 Impeller 的最佳方法是透過在沒有 SkSL 預熱的情況下運行您的 macOS 應用程式，並使用 DevTools 找出由於著色器編譯導致 卡頓 的實例，來建立基準指標。接下來，使用 Impeller 測試您的應用程式 - 點擊並檢查錯誤、效能改進或效能回歸。如果您發現任何問題，我們強烈建議您在 GitHub 上提交它們。請務必包含您正在運行的設備資訊、影片錄製以及 效能追蹤導出的檔案。

想要在 macOS 上嘗試 Impeller 嗎？從 Mac App Store 安裝 Wonderous！

新的引擎 API

改進的可折疊設備支援

為了更好地支援可折疊設備，我們添加了一個新的 API 來擷取顯示器的各種屬性。新的 getter FlutterView.display 返回一個 Display 物件。Display 物件報告顯示器的物理尺寸、設備像素比和更新速率。查看 setPreferredOrientations 以獲取使用新 API 的範例。

架構

Material

我們在 Material Framework 中進行了一些改進，以 1) 提供更多平台適應性，2) 允許更多自訂，以及 3) 添加新功能。

TextField 中的字元辨識

在 iOS 上使用 TextField 時，使用者會自動看到一個選項，可以使用裝置相機來辨識字元並將它們插入到欄位中。

這個功能要感謝社群成員 luckysmg（作者）和 tgucio（審查者）的貢獻。這個功能是一個擁有 1000 行程式碼和 70 次提交的努力，它連接了 引擎 和 框架！謝謝！

平台自適應對話方塊

已在 AlertDialog 中添加了一個自適應建構函數，以及自適應函數 showAdaptiveDialog，根據當前平台顯示 Material 或 Cupertino 對話方塊。

現在使用 AlertDialog.adaptive() 在 iOS 上使用 CupertinoAlertDialog Widget：

以及在 Android 上的 Material AlertDialog：

具有月份和年份的 CupertinoDatePicker

為 CupertinoDatePicker 添加了一個 monthYear 模式。

Cupertino（iOS 風格）檢查樣式的單選按鈕

已在 CupertinoRadio 中添加了 useCheckmarkStyle 屬性。這也允許 Radio.adaptive 和 RadioListTile.adaptive Widget 控制它們是否在 iOS 上使用檢查樣式。

Material Widget 的更多自訂選項

有一些改進讓自訂 Material Widget 的設計變得更容易：

• 您現在可以使用 InputDecoration 的 error 屬性（而不是字串）來自訂顯示在文字欄位上的錯誤 Widget：

• 您現在可以為 ButtonSegment 添加工具提示：

• 您現在可以使用 materialGapSize 屬性自訂 ExpansionPanelList 中的間隙：

• 您現在可以自訂 Switch 的 trackOutlineWidth：

• 您現在可以使用 NavigationDrawer 上的 tilePadding 屬性自訂內距：

• 您可以使用 TabBar 的 alignment 屬性選擇如何對齊標籤：

MaterialState 顏色用於晶片

這個 使得能夠在所有不同的狀態下自訂晶片的顏色。

凸顯的晶片

根據 Material 3 規格，已添加了 FilterChip.elevated、ChoiceChip.elevated 和 ActionChip.elevated 變體。

onSubmitted 到 SearchBar

允許在使用者完成文字輸入並按下鍵盤上的完成按鈕時啟動不同的操作。

BaseTapAndDragGestureRecognizer

已為一組類別添加了一個基類，其中包括對點擊 + 拖曳（TapAndPanGestureRecognizer）和點擊 + 水平拖曳（TapAndHorizontalDragGestureRecognizer）的支援。這些類別已經用於實作原生文字欄位手勢。但是，它們也適用於其他用例 - 例如，使用雙擊 + 垂直拖曳手勢來縮放 Widget。

應用程式生命週期變更

AppLifeCycleListener

添加了 AppLifecycleListener 類別，用於偵聽應用程式生命週期的變化並回應退出應用程式的請求。

捲軸

二維捲軸基礎

此版本的 Flutter 還包含建立在兩個維度中捲軸的 Widget 的基礎，這意味著可以使用的許多新類別，包括：

• ChildVicinity，一個類似於一維捲軸視圖中的索引的表示，代表子元素在兩個維度中的相對位置。
• TwoDimensionalChildDelegate，類似於 SliverChildDelegate，具有同樣相似的子類別：TwoDimensionalChildBuilderDelegate 和 TwoDimensionalChildListDelegate
• TwoDimensionalScrollView，一個抽象基類，它建立一個 TwoDimensionalScrollable 和 TwoDimensionalViewport，與一維 ScrollView 的模型相同。
• RenderTwoDimensionalViewport，最後，在兩個維度中佈局方塊子元素的工作主力。

在兩個維度中捲軸還帶來了新的互動，包括對角線捲軸。查看 DiagonalDragBehavior 以獲取新的互動類型，並在您的 TwoDimensionalScrollView 或 TwoDimensionalScrollable 上配置它們。

我們進行了一項用戶研究，以便為開發人員建立這個基礎，使他們能夠在所有方向捲軸時建立他們可以想像的任何東西。查看在 這個 DartPad 中實作的簡單、延遲加載的二維網格的範例，大約 200 行程式碼！

Flutter 團隊已經在努力在這個框架之上建立二維捲軸 Widget，即將在 two_dimensional_scrollables 套件中推出。

新的 Sliver

Flutter 3.13 帶來了一組新的 Sliver，用於組合獨特的捲軸效果。

SliverMainAxisGroup 和 SliverCrossAxisGroup 都支援將多個 Sliver 安排在一起。在主軸中，這可以創造出一個效果，就是粘性標題，允許固定的標題在每個 Sliver 組在視圖中捲動時被推離視圖。

橫軸分組允許 Sliver 在視圖中並排排列，以及（同樣新的）Widget，例如 SliverCrossAxisExpanded 和 SliverConstrainedCrossAxis，能夠確定橫軸中每個分組 Sliver 的空間分配。

Sliver 函式庫中新增的還有 DecoratedSliver，類似於 DecoratedBox。這允許用戶使用 Decoration 來修飾 Sliver，甚至可以是 Sliver 組。

在 這個 DartPad 範例中查看所有這些新的 Sliver 的實際操作。

無障礙功能

無障礙功能更新

• 為 CupertinoSwitch 添加了 onOffSwitchLabels 無障礙功能屬性，以顯示 I/O 標籤

• 已添加 FocusSemanticEvent。但是，應該謹慎使用它，因為它可能會打破使用者對 a11y 焦點運作方式的預期。
• IconButton 的 isSelected 現在對螢幕閱讀器可用。

平台

Android

新的支援目標

有了這個版本，Flutter 現在支援針對 Android 14/ API 34 進行目標設定。雖然我們仍在為 Android 14 中的一些新功能努力（例如預測性後退導航），但我們已針對新的 Android SDK 徹底測試了這個版本，並優先解決您可能遇到的任何相關問題。

iOS

iOS 上減少旋轉失真

當 iOS 螢幕旋轉時，Flutter 應用程式以前會遇到一些失真，看起來與原生 iOS 應用程式不同。我們進行了一些修改以減少 失真：

重新命名 Runner

當創建 Flutter iOS 應用程式時，會在 /ios 文件夾中創建一個 Runner Xcode 專案和 Xcode 工作區。現在，您可以重新命名工作區或專案，這樣您就不會得到一堆 Runner。

準備好迎接 iOS 17 和 Xcode 15

隨著 iOS 17 和 Xcode 15 的即將發布，想要使用這個工具鏈進行開發的用戶需要使用 Flutter 3.13。此外，在下載 Xcode 15 時，請務必也下載 iOS 17 模擬器。

遊戲

Flutter 遊戲更新

我們在 2022 年推出了 Flutter 休閒遊戲工具包，其中包含遊戲範本、教程、文件、社群空間以及 GCP/Firebase/Ad 積分，以幫助 Flutter 開發人員快速開始遊戲開發。從那以後，已經使用 Flutter 發布了數萬個遊戲！自發布以來，我們一直在積極與 Flutter 遊戲開發人員互動和調查，以了解如何改進遊戲工具包。幾乎所有開發人員都提到了想要更多資源和範例程式碼，以幫助他們更好地設計、開發和變現他們的遊戲。

今天，我們將發布對 Flutter 遊戲網頁 的最新更新，其中包含一個輪播視圖，用於展示在 Flutter 中構建時可以學習的影片資源和新遊戲。在接下來的幾個月裡，我們將為工具包提供一些新的更新，其中將提供額外的資源和樣本，以幫助您開始遊戲開發之旅。

作為第一步，我們於 2023 年 7 月與 AdMob 合作，共同舉辦了一場專為 Flutter 遊戲開發者提供的獨家 UX 設計和變現研討會。大約 100 位開發人員透過現場互動式網路研討會加入了我們，並且給予了該研討會 4.6/5.0 的滿意度評分。我們希望能夠很快總結研討會的內容，並與大家分享這些見解。

我們正在積極努力更新，敬請期待！如果您已經在使用遊戲工具包，並且想要向我們提供未來改進的想法，請隨時發送電子郵件到 [email protected]。

工具

DevTools

新的 DevTools 功能

我們對 DevTools 的效能和可用性進行了一些改進，包括：

我們在導航欄上添加了一個新的溢出選單，用於處理當標籤列表無法一次顯示時的情況。

我們在記憶體標籤上添加了一個類別類型的圖例。

此外，我們還使在 CPU 分析工具中捲軸樹表格變得更快、更流暢。在除錯工具中，我們已使在檔案中搜索或搜索檔案的速度提高了 5 倍。

若要進一步了解，請查看 DevTools 2.25.0 和 DevTools 2.24.0 的發行備註。

重大變更和棄用

重大變更

下一個版本中預設使用 Material 3

我們很興奮地宣布，在 下一個 Flutter 穩定版本中，我們計劃將 ThemeData useMaterial3 預設值從 false 變更為 true。換句話說，應用程式將預設獲得 Material 3 顏色、文字樣式和其他視覺效果。

Material 3 範例 應該有助於預覽 M2 和 M3 之間的差異。

Android 支援平台

Flutter 不再支援 Android Jelly Bean API 層級（16、17 和 18）。好消息是，大多數應用程式應該可以 預設遷移到這個新的 minSdkVersion。

但是，如果您沒有自動遷移，可能是因為您對模組級別 build.gradle 進行了更改，您可能需要手動增加 minSdkVersion。若要更新，請從 Flutter 專案的根目錄定位模組級別 build.gradle。它通常位於 /android/app/build.gradle。將 minSdkVersion 版本提升到 19。如果看到 flutter.minSdkVersion 且它至少為 19，那麼您的最小版本設定正確。

Flutter Plugin 默認情況下不會遷移，因此 Plugin 作者應該在位於 /android/build.gradle 的頂級 build.gradle 檔案中更新 minSdkVersion。

變更和遷移指南列表

此版本中的重大變更包括在 v3.10 發布後過期的已棄用 API。若要查看所有受影響的 API，以及其他背景資訊和遷移指南，請參閱 此版本的棄用指南。其中許多由 Flutter Fix 支援，包括 IDE 中的快速修復以及使用 dart fix 命令進行批次應用。

與往常一樣，非常感謝社群為 貢獻測試，它們幫助我們識別出這些重大變更。若要進一步了解，請查看 Flutter 的重大變更政策。

貢獻

Flutter 儲存庫的優先順序和分類

分類更新

在過去的幾個月裡，我們採用了一套新的優先順序定義（P0-P3）。這使我們更符合大多數其他開源專案使用的定義，並簡化了我們必須做出的有關錯誤重要性的決策 - 我們現在只有 4 個類別，而不是 7 個。希望這也能幫助我們更有效地與那些提交錯誤並想知道 何時修復 的人交流！

我們還為我們的團隊引入了一個 新的分類方案，我們希望這將使問題更難以遺漏。如果您在我們的問題資料庫中很活躍，您可能會看到我們的全新機器人添加評論以及添加或移除標籤：

這個機器人也與 我們的 Discord 整合，幫助我們掌握 GitHub 上發生的事件。我們希望它能從長遠來看提高我們的生產力，但在我們適應新系統的過程中，請耐心等待！

結語

隨著我們接近這個公告的尾聲，我想承認，沒有我們出色的社群的努力，我們不可能達到今天的成就！

若要查看此版本中包含的所有 PR 的完整列表，請查看此版本的 發行備註和變更日誌 部分。

Flutter 3.13 今天在 stable channel 中提供，並且包含 Dart 3.1。若要開始使用這些最新的更新，只需要執行 flutter upgrade。

很快再見！

Flutter 3.13 的新功能 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。