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

構建史詩級的 Flutter 遊戲，協助保衛地球

我們知道 Flutter 開發人員喜歡挑戰，因此，適逢新年到來之際，我們很興奮地宣布下一場 Flutter 挑戰！

全球玩家挑戰 是一場為期 8 週的比賽，由 Flutter 和 Global Citizen 贊助，旨在設計、構建和發佈可持續的遊戲。比賽的獲獎者將獲得在 2024 年 9 月前往紐約市的機會，與 Flutter 團隊會面，進行一天的研討會和指導，然後在 2024 年的 Global Citizen Festival 上與多達 60,000 位其他 Global Citizen 共同慶祝他們的成就。

什麼是可持續的遊戲？

可持續的遊戲利用遊戲的力量來激勵積極的環境行動。想像一下 Candy Crush，但不是粉碎糖果，而是粉碎塑膠污染！或者，想像一下像 Super Dash 這樣的遊戲，但不是收集橡子，而是你在 Dash 的家中想辦法透過優化使用窗戶而不是空調的氣流路徑來降溫。以下是一些受目前正在執行的 Global Citizen 活動啟發的更多想法：

1. 鼓勵減少家庭能源使用
   
   資料顯示，美國家庭的平均用電量是全球其他典型家庭的三倍。您可以構建一個遊戲來幫助減少對低效率能源的依賴嗎？

2. 鼓勵減少使用一次性塑膠
   
   東南亞的塑膠污染水平居世界之首。考慮構建一個遊戲來鼓勵人們進行替換，例如選擇可重複使用的水瓶而不是一次性水瓶。

3. 鼓勵在短距離內使用公共運輸工具，在長距離內使用陸路運輸
   
   歐洲擁有世界上許多最好的公共運輸系統。有效的遊戲可以鼓勵人們在短距離內使用當地公共運輸，以及長距離內使用陸路運輸（例如火車而不是飛機）。

我們相信遊戲可以鼓勵玩家採取一些小的、真實的行動，這些行動加起來對環境產生巨大的影響。事實上，如果您想直接採取行動，請查看 Global Citizen 目前正在執行的活動。

為什麼要加入全球玩家挑戰？

保衛地球

此比賽的靈感來自 Playing for the Planet 聯盟，這是一個由聯合國促成的 50 個遊戲工作室和公司的聯盟，包括 Google，其使命是減少該行業的環境影響，並利用遊戲的力量來提高人們對氣候變化、生物多樣性喪失和污染等重要環境問題的認識，並協調行動。

Playing for the Planet 聯盟成員製作的遊戲總觸達人數超過 10 億人。透過聯盟的旗艦計畫 Green Game Jam，參與的遊戲已透過籌款來種植 275 萬棵樹，並籌集了約 150 萬美元來保護野生動物和支持環境事業，創造了實際的影響。

我們已與 Playing for the Planet 聯盟合作，為環境遊戲來源 最佳實務，並將它們加入到此挑戰中提供的資源包中。這是您構建有助於保護地球的事物的機會！

學習新知識

無論您是 Flutter 開發人員，對遊戲很陌生，還是遊戲開發人員，對 Flutter 很陌生，或者您同時對遊戲開發和 Flutter 很陌生，在對世界產生積極影響的過程中，您一定會學到一些技巧。

詳細資訊

時間表

所有專案必須在 2024 年 3 月 5 日下午 2:59 PT (GMT -8) 之前提交。前 20 名將於 2024 年 3 月下旬公布，最終獲獎者將於 2024 年 5 月公布。

提交指南

註冊和提交條目說明可在 DevPost 找到。

獎項

獲勝者將根據以下標準進行評估：

• 原創性和創造力
• 可持續的行動和故事
• 動畫的使用
• 有效的多平台部署

雖然我們不僅會獎勵出色的程式設計能力，但是我們也會為好點子、演示影片、遊戲的教育內容以及更多內容提供獎勵！

資源

我們編譯了一系列 資源 來幫助您構建遊戲，其中包括一個 指南 來引導您完成此挑戰，就像遊戲地圖一樣。它會向您展示您需要的資源，幫助您透過 Global Citizen 應用程式中的 全新學習旅程 成為 Global Citizen，並包含有關如何註冊和提交遊戲的說明。

團隊

我們建議您以團隊的形式完成此挑戰。當您在 Devpost 上 註冊參加挑戰 時，您將能夠分享您的技能、團隊狀態和想法。

因此，無論您有很棒的想法，但需要技術技能的隊友來實現它，或者您擁有技術技能，但想要很棒的想法，請務必相應地填寫您的個人資料，然後瀏覽 參與者標籤，尋找個人資料詳細資訊與您尋找的內容相符的人！

我們對技術專家和活動家共同努力實現共同目標的想法特別感興趣。如果您需要額外的支援來尋找隊友，請閱讀這篇 幫助文章。

最後，請注意，團隊可以是任何規模，但如果專案被選為決賽，每個團隊只有 3 人可以前往紐約市。

開始並保持連線

在 flutter.dev/global-gamers 的官方比賽網站上查看您需要了解的所有資訊。您也可以訪問 DevPost 進行註冊並提交您的遊戲。

提交截止日期為 3 月 5 日，所以不要猶豫！我們迫不及待想看看您將構建什麼！

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

http://creativecommons.org/licenses/by/4.0/

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

如何打造：Ask Dash - 一款生成式 AI Flutter 應用程式

作為 [Google Cloud 應用 AI 峰會](https://cloudonair.withgoogle.com/events/summit-applied-ml-summit-23?talk=t1_s5_vertexaisearchandconversation) 的一部分，Flutter 和 Vertex AI 團隊與 [Very Good Ventures](https://verygood.ventures/) 合作，使用 Google Cloud 的 [Vertex AI Search and Conversation](https://cloud.google.com/vertex-ai-search-and-conversation) 打造出了一款 AI 驅動的 Flutter 範例應用程式 [Ask Dash](https://github.com/VeryGoodOpenSource/dash_ai_search)。 Vertex AI Search and Conversation 使您能夠快速構建和部署搜尋和對話式應用程式，幾乎不需要任何 AI 經驗。 Flutter 是構建美觀、自訂搜尋體驗的絕佳方式，可以展示這兩款產品如何在短短幾週內共同構建強大的應用程式！

Vertex AI Search and Conversation 讓您能夠建立與您的資料互動的應用程式，這些應用程式會提供個人化的回應，展示生成式 AI 的強大功能。最重要的是，它讓您完全控制您的應用程式存取和索引的資料，以便您可以控制向哪些使用者顯示哪些資訊。所有應用程式資料和使用者互動都儲存在您自己的雲端實例中，從未使用於訓練 Google 的基礎機器學習模型。

由於我們使用 Flutter 打造了範例應用程式，因此我們決定使用 Flutter 文件作為訓練資料。我們與 Google Cloud 團隊合作，針對 Flutter 和 Dart 開發人員文件特別訓練了模型，以便為以下類型的問題提供生成式 AI 回應：Flutter 是什麼？它支援哪些平台？熱重載是什麼？雖然這些資料中的大部分在公開的 AI 模型中很容易獲得，但此範例展現了如何僅根據您自己的資料訓練模型，以建立強大的 AI 體驗。

本文將帶領您瞭解我們的合作夥伴 Very Good Ventures 如何打造 Flutter 網頁應用程式，以及我們如何在雲端主控台中連接應用程式。

如何打造 Flutter 網頁應用程式

建立基於 Flutter 文件訓練的搜尋應用程式的想法很簡單。事實上，[Flutter 的官方文件](https://docs.flutter.dev/) 已經提供了簡單的搜尋體驗，可以為有關 Flutter 的問題提供相關的頁面結果。但是，在構思要建立什麼時，我們希望展示 Flutter 如何用於建立視覺上吸引人的互動式體驗，這些體驗有趣且引人入勝。

在 Flutter 中建立互動式動畫

Flutter 使團隊能夠無縫地實作各種動畫。它豐富的動畫集，加上 Widget 的靈活性，讓我們能夠建立轉場、引人入勝的動作效果和流暢的使用者互動。從在生成結果時建立動畫載入狀態，到在答案出現時揮手的 Dash 精靈，Flutter 提供了靈活性，可以將基本的文字回應變成使用者可以互動的有趣內容。

視覺化自然語言搜尋結果

與傳統的搜尋體驗不同，Vertex AI Search 會針對提問提供自然語言回應。答案是使用從 Flutter 文件中多個頁面擷取的 AI 生成的，並以摘要回應的形式呈現，以及顯示 AI 使用的相關頁面的卡片。每張卡片都提供了頁面的標題和描述，以便使用者可以翻閱卡片以更深入地了解 AI 回應。

此外，在自然語言回應中，Vertex AI Search 會提供一個連結，指向回應中每個句子的來源，讓使用者可以更深入地了解每個回應部分的來源。在範例中，點擊每個句子旁邊的數字就會翻轉卡片到相關的來源頁面。

在更短的時間內更引人入勝

在開始這個專案時，我們有一個很緊迫的時程表，要讓範例應用程式在 [Google Cloud 應用 AI 峰會](https://cloudonair.withgoogle.com/events/summit-applied-ml-summit-23?talk=t1_s5_vertexaisearchandconversation) 上發佈。Flutter 的高效開發和易於使用，大大加快了兩個開發人員團隊的開發過程。它提供了建立複雜動畫所需的工具和框架，使我們的團隊能夠在活動開始前的兩週內完成這個範例應用程式的打造和發佈。

將 Flutter 應用程式連接到 Vertex API

我們使用 [http 包](https://pub.dev/packages/http) 進行簡單的請求，將前端網頁應用程式與 Vertex AI Search API 整合。 Vertex AI Search 在無需任何預先建立 AI 經驗的情況下，會提供使用者生成的問答的 JSON 回應，這些回應會被解析並顯示在動畫 Widget 中。這讓團隊可以專注於 Flutter 開發，以從生成的資料中建立引人入勝的體驗。

在您的應用程式中設定生成式 AI 搜尋

設定 Vertex AI 並為我們的 Flutter 應用程式託管 API 也非常簡單。在我們的例子中，我們使用 [https://docs.flutter.dev/](https://docs.flutter.dev/) 作為我們的資料源，並直接在 Google Cloud 主控台中設定它。作為 Google Cloud 客戶，開始使用 Vertex AI 只需三個步驟：

1. 建立資料儲存庫

這是您網站的數位資料庫，它儲存了您根據根 URL 生成 AI 模型所需的所有資訊。Google Cloud 會爬取您的網站以查找相關資料，並為您建立一個可以查詢的資料源。若要在 Google Cloud 主控台中設定此項目，請選取 **Search and Conversation**。選擇 **Data Stores**，然後選擇 **New Data Store**。選擇 **Website URL** 作為來源，並提供您網站的 URL。

2.存取您的資料

接下來，在 Cloud 主控台中建立一個應用程式，以導航模型索引的資料，並將其連結到您先前建立的資料儲存庫。在 **Search and Conversation** 下，選擇 **Apps**，然後選擇 **New App**。選擇 **Search** 作為類型，並為您的應用程式提供一個反映其用途的名稱，例如 Ask Dash。

3.製作一個 Cloud 函式

最後，建立一個 Cloud 函式。這是將 Vertex AI 資料公開給其他應用程式的 API 介面。在主控台中，前往 **Cloud Functions**，然後選擇 **Create Function**。

就是這樣！

從這裡，您可以像使用任何 API 一樣在前端應用程式中使用 API，傳送請求並接收應用程式可以顯示的格式化回應。若要測試它，請前往 **Function** 頁面，然後選擇 **Testing**。輸入一個 JSON 物件，其中包含用於提問的「search_term」金鑰（例如「hot reload」），然後查看包含自然語言摘要、相關引文和引用的頁面簡要摘要的詳細回應。

在 Google Cloud 的文件 中瞭解如何開始使用 [Vertex AI Search](https://cloud.google.com/generative-ai-app-builder/docs/try-enterprise-search)。

在 Flutter 中打造的生成式 AI 應用程式

若要查看 Ask Dash 的實際操作，並瞭解我們如何打造它，請查看 [Google Cloud 應用 AI 峰會](https://cloudonair.withgoogle.com/events/summit-applied-ml-summit-23?talk=t1_s5_vertexaisearchandconversation) 的影片議程，其中 Google Cloud 產品經理 Alan Blount 詳細介紹了打造過程，以展示 Vertex AI Search 在 Flutter 應用程式中的潛力。查看 [範例的開源 Flutter 程式碼](https://github.com/VeryGoodOpenSource/dash_ai_search)，並開始在 Google Cloud 主控台中體驗自己的 AI 搜尋體驗。

Ask Dash 僅是一個開始，展示了 Flutter 如何在應用程式中為互動式生成式 AI 體驗提供動力。我們迫不及待地想看看你將打造什麼！

如何打造：Ask Dash - 一款生成式 AI Flutter 應用程式 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章內容使用 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，人們在那裡透過突出顯示和回應這個故事來繼續討論。