0%

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

肯亞奈洛比 Flutter Forward 活動上的願景分享

今天,我們很興奮能夠在 Flutter Forward 上與大家分享我們對 Flutter 的願景。Flutter Forward 是我們的開發者活動,正在從肯亞奈洛比現場直播,來自世界各地的開發者們齊聚一堂,線上線下同步參與,了解 Flutter 未來的發展方向。

Flutter 是一個 UI 工具包,讓應用程式開發者能夠從單一程式碼庫為行動、網頁和桌面構建應用程式。Flutter 使您能夠構建 美麗 的應用程式,讓您能夠完全控制螢幕上的每個像素。它 速度快,利用手機或電腦的硬體,支援硬體加速圖形和原生編譯的機器碼。它 生產力高,擁有狀態熱重載等技術,讓您能夠立即在應用程式中看到程式碼變更。它的 可移植性 使您能夠使用相同的原始碼部署到各種平台,而且不會有任何意外。而且它完全 開源,不需要支付許可費,也不需要為開發工具付費。

Flutter 已證明其受歡迎程度,迄今已發佈超過 700,000 個應用程式:從具有 非凡想法的小型新創公司具有關鍵需求的大型企業。在 Google,我們也發現 Flutter 是一個寶貴的工具,讓 Google Classroom 等團隊能夠為行動和網頁使用者提供高品質的解決方案;我們還在其他開發者工具中加入對它的支援,包括 Google 廣告Google 地圖Google Pay,當然還有 Firebase

“使用 Flutter,我們將相同功能的程式碼大小減少了 66%... 這意味著每個平台的錯誤更少,未來技術債務也更少。”(Kenechi Ufondu,Google Classroom 軟體工程師)

Flutter 的第一個版本提供了一個 UI 工具包,用於在 Android 和 iOS 上構建行動應用程式,但隨著 Flutter 3 的推出,我們將生產支援擴展到包含 Windows、macOS、Linux 和網頁,同時也讓嵌入式平台能夠使用 Flutter。在此基礎上,本週我們發佈了最新的穩定版本 Flutter 3.7,其中加入了一系列新功能,包括 iOS 上的新渲染引擎、增強對 Material 3 和 iOS 風格 Widget 的支援、改進的國際化支援、背景處理改進以及開發者工具更新。

但在這次活動中,我們將目光 展望未來,預覽我們在 Flutter 上的下一波投資:突破性的圖形效能、網頁和行動的無縫整合、對新興架構的早期支援,以及持續關注開發者體驗。我們將展示將在未來幾個月內逐步交付的工作,我們希望這能讓您對我們對 Flutter 的願景感到興奮,Flutter 將成為任何希望構建高品質、美麗使用者體驗的開發者的強大工具包,這些體驗可以應用在有像素的地方。

免責聲明:我們在此預覽的功能仍在開發中,可能會在未來幾個月內發生重大改變。在這個早期階段展示它們的目的是讓早期採用者有機會做出貢獻。

四個主題:突破性的圖形效能、網頁和行動的無縫整合、對新興架構的早期支援,以及持續關注開發者體驗。

突破性的圖形效能

從歷史上看,跨平台框架需要在視覺效果上做出妥協,因為創建抽象層存在挑戰。Flutter 採用了與大多數框架不同的方法,它擁有自己的渲染層,提供硬體加速圖形,並在每台設備上呈現一致的視覺外觀。展望未來,我們將投資於 突破性的圖形效能,擴展 Flutter 在這個領域的既有優勢。

在 Flutter Forward 上,我們展示了在 Impeller 上的更多進展,Impeller 是 Flutter 的下一代渲染引擎。Impeller 針對 Flutter 優化,為我們提供了更大的靈活性,並能夠更好地控制圖形管道,為我們打開了新的機會。Impeller 提供更可預測的效能,使用預先編譯的著色器,消除由著色器編譯引起的運行時掉幀。它利用 Metal 和 Vulkan 中的基元,這些是 iOS 和 Android 中的現代低階 API。而且它有效利用併發性,將單一框架工作負載分配到各個執行緒。

Impeller 為 Wonderous 等需要大量圖形處理的應用程式提供絲般順滑的效能,Wonderous 是一個美麗的應用程式,帶領您遊覽世界奇觀。如圖所示:Wonderous 的最新版本,它調整 UI 以適應不同的設備和外觀比例,可在 [https://wonderous.app](https://wonderous.app.) 上使用。

除了提供絲般順滑的 UI 之外,Impeller 還可以在某些情況下顯著提高效能。一個示範(如下所示)展示了這個最佳案例。左側是一個使用 SVG 剪裁的萬花筒應用程式,使用當前的預設渲染器構建。向下捲軸頁面時,效能下降,渲染時間超過每幀預算,導致幀速率為 7-10 fps。右側顯示了在 Impeller 下運行的相同應用程式,以無卡頓的 60 fps 渲染。

從零開始構建的一個優勢是架構可以支援全新的用例。新引入的 對自訂著色器的支援 已經導致了一些 令人驚嘆的新示範,展示了與 Flutter Widget 階層的無縫整合。但是,我們在此的工作不僅限於行動設備:我們現在也對網頁上的自訂著色器提供了早期支援,相同的程式碼現在為 iOS、Android 和瀏覽器提供硬體加速的體驗。

Chrome 網頁瀏覽器的螢幕截圖,顯示 Flutter 像素著色器示範。有一個 Flutter 吉祥物 Dash 的圖片,但它有一個馬賽克風格的效果,可以使用滑動控制調節。
Flutter 現在支援網頁上的像素著色器,能夠實現各種很酷的視覺效果。(作者: [Erick Ghaumez](https://medium.com/u/21767146c3d4)。)

現在,我們開始了對 使用 Flutter 支援 3D 的早期工作。在主題演講中,我們展示了您可以匯入使用 Blender 創建的模型,甚至可以使用熱重載來與 Blender 實時互動,并在正在執行的應用程式中查看結果。這還處於起步階段,但我們對初始性能感到興奮,以及將 3D 整合到其他 Flutter 體驗的潛力。

Impeller 使 Flutter 能够渲染 3D 图形,如 Dash 的这个有趣演示所示。

在可移植的 UI 工具包中加入 3D 和自訂著色器,將圖形效能提升到一個新的水平。我們非常期待您在這些新功能可用後使用它們做出的成果。

網頁和行動的無縫整合

雖然您可以完全使用 Flutter 和 Dart 撰寫應用程式,但幾乎任何非微不足道的專案都需要與其他程式碼連接。在網頁上,Flutter 可以作為較大應用程式中的嵌入式組件使用;在行動裝置上,應用程式可能需要呼叫系統 API 或其他使用其他語言編寫的程式碼。因此,我們投資的第二個主要主題是 網頁和行動的無縫整合

在網頁上,我們正在預覽一個我們稱之為 元素嵌入 的新功能,它允許將 Flutter 內容新增到任何標準網頁 <div>。以這種方式嵌入時,Flutter 只是一個網頁組件,可以與網頁 DOM 整合,甚至可以允許使用 CSS 選擇器和轉換來設定父 Flutter 物件的樣式。

我們還在對 js 套件做出一些重大改變,以實現 JavaScript 和 Dart 程式碼之間的無縫 互操作性。使用 js,您可以在 Dart 程式碼中使用 @JSExport 屬性對任何函數進行註釋,然後從 JavaScript 程式碼中呼叫它。

結合這兩個新功能,為在網頁上使用 Flutter 開啟了一些令人興奮的新場景。在我們在 Flutter Forward 上展示的 概念驗證示範 中,您可以看到一個嵌入在基於 HTML 的網頁中的簡單 Flutter 應用程式。使用 CSS,我們應用了一個動畫旋轉效果;即使在旋轉時,Flutter 內容仍然可以互動。示範還顯示,您可以使用 HTML 按鈕和 JavaScript 事件處理程式來更改 Flutter 狀態,反之亦然。當這項工作完成後,我們認為這將為使用 Flutter 將互動性加入到現有的 Web 應用程式中開啟許多新的機會。

Flutter 網頁示範的螢幕截圖。顯示了傳統的 Flutter 計數器應用程式,但它被 CSS 扭曲和轉換,看起來像是照片的一部分,照片中一位女性拿著一部 iPhone。
使用元素嵌入,您可以在 `
` 元素中嵌入 Flutter,並使用 CSS 為其設定樣式。

轉向 Android 和 iOS,Flutter 已經長期支援使用平台通道與系統 API 整合,平台通道為使用 Kotlin 或 Swift 等語言編寫的程式碼提供了基於訊息的通訊方式。雖然這解鎖了對這些函式庫的存取,但它需要應用程式作者熟悉多種語言,並且需要大量的樣板程式碼。

我們現在開始了 針對系統互操作性的新方法 的工作,允許直接呼叫函式庫。在 iOS 上,我們正在建立在 FFI 用於 C 互操作性的工作基礎之上,加入對 Swift 和 Objective-C 函式庫的支援。在 Android 上,我們正在使用 JNI 來橋接到用 Kotlin 編寫的 Jetpack 函式庫。使用新命令,Dart 會自動為跨語言互操作創建綁定,並適當轉換資料類別。完成後,我們希望這項工作能夠讓 Flutter 開發者能夠呼叫新的 Jetpack 或 iOS 函式庫,而無需使用外掛或學習不同的 API 語法,同時也能大大減輕外掛作者的工作。查看我們的範例 了解更多!

對新興架構的早期支援

由於 Dart 廣泛支援各種處理器架構,以及它高度優化的 JavaScript 編譯器,Flutter 已經可以在各種設備和外觀比例上執行。但隨著一些令人興奮的新選項即將出現,我們第三个主題是 對新興架構的早期支援

WebAssembly 作為一種平台中立的二進制指令格式,已日漸成熟,在現代瀏覽器上獲得了 越來越多的支援。令人興奮的是,WebAssembly 為網頁平台打開了除了 JavaScript 之外的其他語言的大門。在最近幾個月裡,我們一直在與 Chrome 團隊和其他 WebAssembly 合作夥伴合作,為 垃圾回收語言(如 Dart)提供 早期支援。此 WebAssembly 的新擴展現在使用最新開發版本的 Chrome 中的旗標支援。在 Flutter Forward 上,我們正在揭示對 Flutter 編譯為 WebAssembly 的早期支援,這將為我們的 Web 支援帶來更快的速度和更小的佔位空間優化。

另一個引發越來越多人興趣的平台架構是 RISC-V,這是一種開放標準指令集架構 (ISA),旨在廣泛使用。Android 團隊最近發表了關於 他們支援 RISC-V 的工作 的演講,我們很高興地宣布 Dart 現在也支援 RISC-V,作為了我們自己的旅程的一部分,讓 Flutter 能夠在 RISC-V 設備可用時在其上執行。生產 RISC-V 硬體仍處於起步階段,但在 Flutter Forward 上,我們展示了迄今在 ClockworkPi DevTerm Kit R-01 上取得的進展,這是一款運行 Linux 的自組裝便攜式終端機。我們相信 RISC-V 支援將特別適用於嵌入式方案,Flutter 可以為各種需求提供強大的 UI 工具包。

ClockworkPi RISC-V 便攜式終端的圖片。這是一個大約與 iPad 大小相同的設備,但帶有微型鍵盤、軌跡球滑鼠和終端機顯示器。
ClockworkPi DevTerm R-01,一款實驗性的 RISC-V 電腦,運行 Dart 主控台應用程式。

持续关注开发者体验

我们上面描述的所有内容的基础都是开发人员的生产力,这是 Flutter 自创建以来一直以来的标志,其功能包括状态热重载。我们对未来的第四个也是最后一个投资领域是 持续关注开发人员体验,涵盖 Flutter 和 Dart。

在 Flutter Forward 上,我们正在预览我们对一些主要的 Dart 语言新功能的早期工作的部分成果,我们希望这些成果能够证明我们对语言的优雅演进的承诺。在我们的开发频道中,我们现在拥有对 记录和模式 的早期支持,这两个新增强功能可以很好地配合使用。

VSCode 运行记录和模式新功能演示的图片。它显示了 Dart 现在可以返回多个值。演示的代码位于 https://gist.github.com/timsneath/a75fd9f76b5b61c42676c9232160d14d
记录和模式用于返回和接收多个函数参数的简单示例。

我们还 正式宣布 Dart 3,这是我们为语言引入健全的空安全而开展的工作的顶峰。Dart 3 还删除了其他长期弃用的功能,以进一步使语言现代化。我们已经开始发布 Dart 3 的 alpha 版本,以及匹配的 Flutter 版本,使开发人员能够测试包和应用程序。有关 Dart 3 的更多信息,请查看 Dart 通道的单独博客文章

当然,我们也会投资于 Flutter 的开发人员体验。继我们去年在 I/O 上发布的休闲游戏工具包取得成功之后,我们现在正在共享 第一个版本的新闻工具包,它可以加速新闻出版商和其他希望触达移动用户,而不必从头开始设计应用程序的內容提供者的移动开发。它包括构建以文章为中心的应用程序所需的一切,包括导航和搜索、身份验证、广告整合、通知、个人资料和订阅,同时还将 Google 新闻倡议研究的最佳实践整合在一起。今天,我们重点介绍了非洲的三个早期采用者,他们正在使用这个工具包构建应用程序,包括 Hespress,摩洛哥最大的新闻网站之一,Bold Sports,尼日利亚受欢迎的体育网站;以及 The Standard,肯尼亚最古老的报纸。

携手共进

我们希望您与我们一起对 Flutter 的未来感到兴奋。我们正在继续大力投资核心开发人员体验,同时进行一些基础改进,为我们和其他人铺平道路,以便使用 Flutter 构建更强大的体验。

这张图片总结了我们的方向:

未来工作的四个主题:突破性的图形性能(Impeller、着色器、3D 支持);网页和移动的无缝集成(元素嵌入、JNIgen 和 FFIgen);对新兴架构的早期支持(WebAssembly 和 RISC-V);以及持续关注开发者体验(Dart 语言特性、健全的空安全、Google 新闻工具包和 Wonderous)。

除了我们自己的开发主题之外,看到 Flutter 生态系统不断扩展也令人欣慰,例如 FlutterFlow 是一個開發原生行動應用程式的低程式碼建構器,以及 Widgetbook,它提供靈活的工具,讓設計師和開發者能夠在使用者介面開發上進行合作。

最后,来到肯尼亚,看到当地开发者的创业精神和才华,真是太好了。非洲的 Flutter 社区充满活力,这里很特别;仅 Flutter 肯尼亚用户组的开发人员就超过 1,000 人。我们很高兴 Flutter 能为非洲各地的开发人员提供新的机会,让他们参与到快速增长的应用程序经济中。Klasha 就是这个承诺的一个很好的例子,它使用 Flutter 快速进入市场,并解决当地的难题。以下是他们使用 Flutter 的体验视频:


Flutter 的下一步是什麼 最初發表在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

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

使用 Flutter 設計在所有設備上看起來都美觀的行動應用程式

今天,我們宣布 Wonderous 的下一個版本,該版本新增了對可折疊設備、平板電腦和平板電腦橫向模式的支援。這個迭代讓我們能夠測試 Flutter 適應不同設備格式 的能力,GitHub 上的 程式碼 存放庫提供了利用 適應性設計 的參考。

在本文中,我們將回顧我們在其中學習到的一些內容。雖然我們的重點是手持設備的應用程式,但其中許多概念可以適應桌面和網頁。

縮小焦點

在思考適應性設計時,設計師應該首先問:「我們可能支援哪些外形尺寸?」Flutter 支援幾乎所有設備,但應用程式創建者應該明確說明他們設計和測試過其應用程式的格式。縮小焦點讓設計師可以仔細考慮如何為可用的畫布最佳化數位體驗。沒有仔細設計,適合行動裝置的佈局在較大的外形尺寸上可能看起來不精緻。

充分利用額外的空間

在適應應用程式設計以符合更大的螢幕尺寸時,設計師應該考慮如何利用額外的空間。這可能意味著透過顯示不同的佈局來增強呈現方式。例如:

Portrait and landscape version of the Wonder Events page
iPad Pro 12.9 英寸直立和橫向

新增額外的行或欄:

Showing the artifcats search results on a larger screen with 4 columns, versus a smaller screen with only two columns
iPad Pro 12.9 英寸和 iPhone 11

或將欄變為行:

Showing vertically scrollable rows in portrait mode, and a single horizontally scrollable row in landscape.
iPad Pro 12.9 英寸直立和橫向

或者,您也可以使用額外的畫布來做更多相同的事情。Wonderous 具有美麗的插圖,因此更大的螢幕尺寸讓我們能夠展示更多這項工作:

Showing an image of the Machu Picchu illustration scaled to multiple devices sizes
iPhone 11,Samsung Fold4 關閉,iPad Pro 12.9 英寸

考慮 UI 組件如何反應的方式

隨著螢幕變大,您需要考慮應用程式的 UI 組件將如何反應。例如,您可能需要將組件縮放到適合可用空間的大小:

Samsung Fold4 打開和 iPhone 11

您也可以考慮保持內容居中加權,或將某些資產固定到設備邊界:

使用 Flutter 的適應性設計

Flutter 架構中有許多功能對適應 Wonderous 很有幫助。例如:

  • 熱重載讓設計團隊能夠實時做出微調
  • 動態填充和字體大小
  • Flex Widget 動態顯示行或欄
  • MediaQuery 返回螢幕尺寸和設備方向等詳細資訊

您可以在 gSkinner 的網站 上閱讀有關技術實作的更多具體資訊。您還可以在 Android 文件網站上的 大型螢幕應用程式尺寸 中了解有關為更大螢幕尺寸設計應用程式的更多資訊。

我們希望您能安裝 Wonderous,並在開發您自己的應用程式時將程式碼用作參考。如果您對應用程式本身有任何回饋,請 在 GitHub 上提交議題。如果您對使用 Flutter 的適應性設計有任何想法,請隨時透過 Twitter (@leighajarett) 或 LinkedIn (Leigha Jarett) 傳送訊息給我。


將 Wonderous 適應更大的設備格式 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

宣布 Flutter 新聞工具套件

This image shows Dash is reading newspaper

Google 的 Flutter 團隊與 Google 新聞倡議 (GNI) 密切合作,共同打造了 Flutter 新聞工具套件 - 一個免費的預建 Flutter 應用程式範本,用於加速新聞應用開發。一些早期採用者已經在短短 6 週的時間內建立了 iOS 和 Android 應用程式,聲稱與傳統的 iOS 和 Android 雙端開發相比,節省了高達 80% 的時間。

三個月前,我們在早期試用階段宣布了該工具套件,並收到了來自世界各地組織的壓倒性申請,因此我們很高興宣布 Flutter 新聞工具套件的第一個版本現在已正式推出!

為什麼我們要建立 Flutter 新聞工具套件?

如今,大多數人使用智慧型手機獲取新聞。除了行動網站以外,行動應用程式可以成為新聞出版商與現有讀者互動、接觸新受眾以及創造新收入來源的絕佳方式。但設計、實作和部署行動應用程式需要時間和精力。

對於財力和人力資源有限的新聞出版商來說,從頭開始建立應用程式是一項重大工程。在 Google,我們希望幫助開發人員取得成功並提高生產力,因此我們正在投資一個工具套件,該工具套件提供了新聞出版商所需的所有常見功能,讓他們可以專注於區分他們的品牌和內容,而無需撰寫樣板程式碼。

Flutter 新聞工具套件中包含哪些功能?

我們與全球業界專家和新聞出版商合作,以識別新聞應用程式範本的基本功能和使用者工作流程。有了這些預建的開箱即用功能,新聞出版商只需要連接他們的資料源並自訂 UI 以反映他們的品牌。

使用來自 新聞消費者洞察 的最佳實務,Flutter 新聞工具套件包含以下功能:

  • 使用者入門:透過推送通知權限重新吸引您的受眾;取得廣告追蹤權限
  • 帳戶建立/登入:透過您的平台和使用者社群媒體網路進行驗證(例如 Google 登入);建立無密碼帳戶
  • 內容供稿和內容頁面:顯示新聞文章、影片、圖片、廣告和電子報報名提示
  • 變現:輕鬆加入訂閱和不同的廣告格式
  • 搜尋:允許使用者透過關鍵字搜尋文章或點擊熱門搜尋項目
  • 設定:允許使用者針對通知、登入和廣告追蹤調整偏好設定

您可以直接使用這些預整合功能,也可以輕鬆地修改並將它們替換為您偏好的其他功能。

This image includes sample features provided in the Flutter News Toolkit
Flutter 新聞工具套件中提供的範例功能

早期採用者

Flutter 新聞工具套件已經開始幫助全球各地的新聞出版商加速行動策略並實現業務目標。例如,

  • The Standard(肯亞最大的新聞出版商之一)在建立 The Standard 新聞 時,聲稱節省了高達 80% 的時間。
  • 商業賦能公司 AnyMind Group 在 2 週內為 Khaosod Online(泰國最大的新聞網站之一)建立了應用程式。
  • Boldsports,一家尼日利亞的體育新聞新創公司,在短短幾天內就建立了一個早期版本。
  • Hespress(摩洛哥最大的新聞網站之一)在 6 週內完成了其 英文應用程式 開發,並報告說新應用程式在推出應用程式後的兩個月內, organically 獲得了 93% 的有機使用者,廣告收入增長了 50%。

讓我們用他們自己的話聽聽他們的感受。

開始使用

如果您一直在等待存取 Flutter 新聞工具套件,現在可以開始了!您現在可以直接存取 Github 上託管的程式碼

如果您有興趣採用新聞工具套件,但需要幫助自訂以滿足您的需求,我們也為您提供了支援!只需發送電子郵件至 [email protected],我們可以推薦值得信賴的 Flutter 代理商來幫助您使用 Flutter 新聞工具套件建立應用程式。

雖然 Flutter 新聞工具套件最初是為新聞組織設計的,但任何想要建立流程式內容的人都可以使用範例程式碼。無論您是想建立公司電子報應用程式(以 DiUS 建立的 Medius 為例),還是社群媒體應用程式,您都可能會發現使用者登入、社群分享和內容供稿等預建功能對您的應用程式有所幫助。

我們計畫繼續改進 Flutter 新聞工具套件,同時從出版商和開發人員那裡獲取更多資訊。別忘了查看我們的 影片教學,以瞭解 Flutter 新聞工具套件 的更多詳細資訊!

常見問題解答

什麼是 Flutter?

Flutter 是 Google 的開源 UI 工具套件,用於從單一程式碼庫建立適用於行動裝置、網頁和桌面的精美應用程式。Flutter 大幅減少了建立和發佈應用程式所需的時間。如今,Flutter 是 最受歡迎的跨平台 開發框架,在全球擁有超過 300 萬名開發人員。目前有超過 700,000 個 Flutter 應用程式,包括阿里巴巴、BMW、Google Pay、PUBG、Shein 和微信。

Flutter 容易學習嗎?

是的,對於那些了解 Java 等其他程式設計語言的開發人員來說,學習 Flutter 速度很快。此外,我們還為您提供了豐富的 學習資源 來幫助您入門。

我可以在應用程式中使用其他非 Google 服務,例如廣告、分析和訂閱嗎?

當然可以!Flutter 新聞工具套件只是一個範例。您不需要使用任何您不想要的服務。事實上,很容易移除或將現有整合替換為其他服務。例如,如果您想使用非 Google 廣告服務,您可以在 pub.dev 上找到其他 套件

我需要做多少工作才能發佈應用程式?

雖然新聞範本可以降低建立新聞行動應用程式的入門門檻,但此解決方案仍然需要 Flutter 開發工作。範本不支援非技術使用者透過無程式碼或所見即所得功能或工具(例如儀表板)來修改應用程式品牌和樣式。

我們已繪製出一個高層級的部署流程圖,假設有 2 名 Flutter 工程師參與專案。例如,Hespress 等早期採用者在 6 週內完成了應用程式開發。但我們也有像 AnyMind 這樣的客戶,他們只用 1 名工程師在 2 週內就推出了應用程式。

This image maps out the deployment process at a high-level
高層級的部署流程

如果我沒有內部的開發團隊,如何使用範本?

我們可以推薦值得信賴的 Flutter 代理商,他們可以幫助您將範本完善。您可以發送電子郵件至 [email protected] 獲取更多資訊。聲明:Google 與這些代理商無關,我們也不從他們那裡分享任何收入。


宣布 Flutter 新聞工具套件 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

Flutter 3.7 新功能:Material 3 更新、iOS 改進等等!

我們很高興在 2023 年開始時發佈 Flutter 3.7!在 Flutter 3.7 中,我們作為社群,繼續改進框架,加入了一些很棒的新功能,例如:建立自訂選單列、階層式選單、更好地支援國際化的工具、新的除錯工具等等。

我們還繼續完善一些功能,例如全局選取、透過 Impeller 進行更快渲染、DevTools,以及始終如一的效能!

讓我們一起踏上快速旅程,探索 Flutter 3.7 中的新功能吧!

增強的 Material 3 支援

Material 3 支援在 3.7 中得到了極大的增強,以下 Widget 已遷移:

若要使用這些新功能,只需在應用程式的 ThemeData Widget 中開啟 useMaterial3 旗標。若要充分利用 M3 支援,您需要完整的 M3 色彩方案。您可以自己提供,使用新的 主題建構工具,或者 Flutter 可以使用 ThemeData 建構函數的 colorSchemeSeed 參數從單個種子顏色為您生成一個:

1
2
3
4
5
6
7
MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green,
),
// …
);

有關 Flutter 的 Material 3 支援的最新資訊,請查看 GitHub 上的 總體議題

若要親自試用這些元件,請查看 互動式演示,展示了所有新的 M3 功能:

選單列和階層式選單

Flutter 現在可以建立選單列和階層式上下文選單。

對於 macOS,可以使用 PlatformMenuBar Widget 建立選單列,它定義由 macOS 而不是 Flutter 渲染的平台原生選單列。

而且,對於所有平台,您都可以定義一個 Material Design 選單,它提供階層式選單列 (MenuBar),或者由另一個使用者介面元素觸發的獨立階層式選單 (MenuAnchor)。這些選單完全可自訂,選單項目可以是自訂 Widget,或者您可以使用新的選單項目 Widget (MenuItemButtonSubmenuButton)。

Impeller 預覽

團隊很高興地宣布,新的 Impeller 渲染引擎 已在 stable channel 上的 iOS 上 準備好進行預覽。我們相信 Impeller 的效能對於大多數應用程式來說將會達到或超過 Skia 渲染器,至於保真度,Impeller 實作了所有功能,只有一些很少使用的角落案例除外。我們預計將在即將到來的穩定版本中將 Impeller 設為 iOS 上的預設渲染器,因此請在 GitHub 上繼續提交 Impeller 回饋

儘管我們越來越有信心 iOS 上的 Impeller 將滿足幾乎所有現有 Flutter 應用程式的渲染需求,但 API 涵蓋範圍仍然存在一些差距。在 Flutter wiki 上列出了少數幾個剩餘的差距。使用者也可能會注意到 Skia 和 Impeller 之間在渲染方面的細微視覺差異。這些細微的差異可能是錯誤,因此請勿猶豫 提交議題

社群的貢獻極大地加速了我們在 Impeller 上的進展。特別是 GitHub 使用者 ColdPaleLightguoguo338JsouLiangmagicianA 為此版本貢獻了 291 個(>12%)與 Impeller 相關的修補程式中的 37 個。謝謝!

我們繼續在 Impeller 的 Vulkan 後端上取得進展(在較舊的設備上回退到 OpenGL),但 Android 上的 Impeller 尚未準備好進行預覽。Android 支援正在積極開發中,我們希望在將來的版本中分享更多相關資訊,包括更多關於桌面和 Web 支援的資訊。

在 GitHub 上的 Impeller 專案看板 上關注我們的進展。

iOS 版本驗證

當您發佈 iOS 應用程式時,更新設定的清單 可以確保您的應用程式已準備好提交到 App Store。

flutter build ipa 命令現在會驗證其中一些設定,並在發佈之前通知您是否需要對應用程式進行更改。

DevTools 更新

在此版本中,有幾個新的工具功能和整體改進可以嘗試。DevTools 記憶體除錯工具已徹底改版。有三個新的功能標籤,剖析追蹤差異,它們支援所有以前支援的記憶體除錯功能,並為您的除錯工作添加了更多功能。新功能包括能夠按類別和記憶體類型分析應用程式目前的記憶體配置、調查在運行時哪些程式碼路徑正在為一組類別配置記憶體,以及比較記憶體快照以了解兩個時間點之間的記憶體管理。

所有這些新的記憶體功能都已記錄在 docs.flutter.dev 上,因此請查看文件以獲取更多資訊。

效能頁面也有一些值得注意的新功能。效能頁面頂部的一個新的 畫面分析 標籤提供了所選 Flutter 畫面的洞察力。洞察力可能包括如何更詳細地追蹤 Flutter 畫面中昂貴部分的建議,或者有關在 Flutter 畫面中檢測到的昂貴操作的警告。

這只是幾個亮點,但此版本包含若干錯誤修復和改進,超出此處提到的功能,包括針對 Inspector、網路分析工具和 CPU 分析工具的一些重要錯誤修復。若要更深入地了解更新列表,請查看 DevTools 變更的發行備註,這些變更已加入 Flutter 3.7。

自訂上下文選單

您現在可以在 Flutter 應用程式中的任何位置建立自訂上下文選單。您也可以使用它們自訂內建的上下文選單。

例如,您可以將「發送電子郵件」按鈕加入到使用者選取電子郵件地址時出現的預設文字選取工具列中 (程式碼)。查看 contextMenuBuilder 參數,該參數已加入預設顯示上下文選單的現有 Widget 中,例如 TextField。您可以從 contextMenuBuilder 返回任何您想要的 Widget,包括修改預設的平台自適應上下文選單。

此新功能也適用於文字選取之外。例如,您可以建立一個 Image Widget,當右鍵點擊或長按時顯示「儲存」按鈕 (程式碼)。使用 ContextMenuController 在應用程式中的任何位置顯示目前平台的預設上下文選單或自訂上下文選單。

Flutter 的樣本儲存庫 中查看完整的範例套件。

CupertinoListSection 和 CupertinoListTile Widget

感謝 Github 使用者 Campovski 的努力,Cupertino 有兩個新的 Widget:CupertinoListSectionCupertinoListTile,用於以 iOS 風格顯示可捲軸的 Widget 列表。它們是 Material 中 ListViewListTile 的 Cupertino 版本。

捲軸改進

這個版本包含了一些 捲軸更新:針對觸控板互動的潤色和完善、新的 Widget(例如 ScrollbarsDraggableScrollableSheet),以及改進了在捲軸上下文中選取文字的處理方式。

值得注意的是,MacOS 應用程式現在將會在新增 新的捲軸物理 以匹配桌面平台後,體驗到更高的保真度。

新的 AnimatedGridSliverAnimatedGrid Widget 會為加入(或移除)列表的項目製作動畫。

最後,我們 修復了若干捲軸 Widget 的建構函數中的回歸,例如 ListView。在 Flutter 框架的 NNBD 遷移期間,itemBuilder(允許使用者按需提供 Widget)被遷移到 IndexedWidgetBuilder。這意味著 itemBuilder 不再可以返回 null,而 null(在過去)可以用於表示已到達列表的末尾。此功能已透過 NullableIndexedWidgetBuilder 恢復。感謝 @rrousselGit 注意到這一點——遷移幾年後——並發送了修復程式!

國際化工具和文件

國際化支援已完全改版!我們已完全重寫 gen-l10n 工具,以支援:

  • 描述性語法錯誤。
  • 包含巢狀/多個複數、選擇和佔位符的複雜訊息。

有關更多資訊,請查看更新後的 國際化 Flutter 應用程式 頁面。

全局選取改進

SelectionArea 現在支援鍵盤選取。您可以使用鍵盤快捷鍵(例如 shift+right)擴展現有選取範圍。

背景隔離區

現在,平台通道 可以從任何 隔離區 呼叫。以前,使用者只能從 Flutter 提供的主要隔離區呼叫平台通道。這使得在 PluginAdd-to-app 中使用隔離區和主機平台程式碼變得更好。有關更多資訊,請查看 flutter.dev 上的 撰寫自訂平台特定程式碼 以及深入文章 簡介背景隔離區通道,這是一篇免費的 Medium 文章。

文字放大鏡

在 Android 和 iOS 上文字選取期間出現的放大鏡現在可以在 Flutter 中使用。這對於所有具有文字選取的應用程式來說都是開箱即用的,但如果想停用或自訂它,請查看 magnifierConfiguration 屬性。

Plugin 的 Swift 遷移

隨著 Apple 將重點放在他們自己的 API 上的 Swift,我們希望開發一些參考來幫助 Flutter Plugin 開發人員使用 Swift 遷移或建立新的 Plugin。quick_actions Plugin 已從 Objective-C 遷移到 Swift,可以用作最佳實務的演示。如果您有興趣幫助我們遷移 1P Plugin,請查看 wiki 的 Swift 遷移部分

面向 iOS 開發人員的資源

我們為 iOS 開發人員發佈了一些新的資源,包括:

Bitcode 棄用

從 Xcode 14 開始,watchOS 和 tvOS 應用程式不再需要 Bitcode,App Store 不再接受來自 Xcode 14 的 Bitcode 提交。 因此,Bitcode 支援已從 Flutter 中移除。

預設情況下,Flutter 應用程式沒有啟用 Bitcode,我們預計這不會影響太多開發人員。但是,如果您在 Xcode 專案中手動啟用了 Bitcode,請在升級到 Xcode 14 後立即停用它。您可以透過打開 ios/Runner.xcworkspace 並將 啟用 Bitcode 設為 來執行此操作。 Add-to-app 開發人員應在主機 Xcode 專案中停用它。

若要進一步了解 Bitcode 分發,請查看 Apple 的文件

iOS PlatformView BackdropFilter

我們已添加了原生 iOS 視圖在渲染到模糊的 Flutter Widget 之下時被模糊的功能,並且 UiKitView Widget 現在可以包裝在 BackdropFilter 中。

有關更多資訊,請查看 iOS PlatformView BackdropFilter 設計文件。

記憶體管理

此版本對記憶體管理進行了一些改進,這些改進的共同效果是減少由垃圾收集暫停造成的卡頓,降低因配置速度和背景 GC 線程造成的 CPU 使用率,以及減小記憶體佔用空間。

例如,我們擴展了現有 的手動釋放支援某些 dart:ui Dart 物件的原生資源的做法。以前,原生資源將由 Flutter 引擎保留,直到 Dart VM 垃圾收集 Dart 物件。透過對使用者應用程式和我們自己的基準測試進行分析,我們確定這種策略通常不足以避免不合時宜的 GC 並過度使用記憶體。因此,在此版本中,Flutter 引擎添加了用於明確釋放 VerticesParagraphImageShader 物件持有的原生資源的 API。

在我們對遷移到此 API 的 Flutter 框架進行基準測試時,這些改進將 90% 的畫面建立時間縮短了 30% 以上,最終使用者將體驗到更平滑的動畫,卡頓更少。

此外,Flutter 引擎 不再註冊 GPU 圖片的大小到 Dart VM。如上所述,這些圖片在不再需要時已由框架手動釋放,因此通知 Dart 的 GC 策略支援 Dart 堆物件的 GPU 記憶體大小會不必要地增加 Dart 堆記憶體壓力,從而觸發無法收集任何額外記憶體的不合時宜的 GC。基於類似的思路,Flutter 引擎現在的策略是僅向 Dart VM 報告支援 dart:ui Dart 物件的原生物件的淺層大小

在我們的基準測試中,此變更在建立畫面時會消除同步 GC 工作,當時 Widget 會建立 GPU 常駐圖片。

在此版本中,Flutter 引擎也更好地動態更新 Dart VM,提供有關 Flutter 應用程式狀態的資訊。特別是,Flutter 現在使用 Dart VM 的 RAIL 風格 API 在路由轉場動畫期間進入 低延遲模式。在此低延遲模式下,Dart VM 的記憶體配置器優先選擇堆增長而不是垃圾收集,以避免使用 GC 暫停中斷轉場動畫。雖然此變更沒有帶來任何顯著的效能改善,但我們計劃在將來的版本中擴展此模型的使用範圍,以進一步消除不合時宜的 GC 暫停。此外,我們已 修復了邏輯中的錯誤,這些邏輯決定何時通知 Dart VM Flutter 引擎處於空閒狀態。修復這些錯誤還可以防止 GC 相關的卡頓。最後,對於 Add-to-app Flutter 應用程式,Flutter 引擎現在會 通知 Dart VM Flutter 視圖不再顯示。這現在導致 Dart VM 為與視圖關聯的隔離區觸發最終的重大 GC。此變更在沒有 Flutter 視圖可見時會減少 Flutter 的記憶體佔用空間。

停止支援 macOS 10.11 到 10.13

先前宣布,Flutter 不再支援 macOS 版本 10.11 和 10.12。自那次宣布以來,進一步的分析 顯示,移除對 10.13 的支援也會產生有限的額外影響,並且將有助於團隊大幅簡化程式碼庫。這意味著使用此版本及更高版本建立的針對穩定 Flutter SDK 的應用程式將不再在這些版本上運行,並且 Flutter 支援的最低 macOS 版本將升級到 10.14 Mojave。

因此,由於 Flutter 支援的所有 iOS 和 macOS 版本都包含 Metal 支援,因此 OpenGL 後端已從 iOS 和 macOS 嵌入器中移除。移除這些後端使 Flutter 引擎的壓縮大小減少了約 100KB。

toImageSync

此版本 添加了方法 Picture.toImageSyncScene.toImageSyncdart:ui 中,類似於異步方法 Picture.toImageScene.toImagePicture.toImageSync 同步返回一個 Image 的句柄,其中 Image 的光柵化會在背景中異步執行。然後,當 GPU 上下文可用時,圖片會保留為 GPU 常駐,這意味著與透過 toImage 生成的圖片相比,它的繪製速度更快。(透過 toImage 生成的圖片也可以保留為 GPU 常駐,但這種優化尚未在這種情況下實作。)

新的 toImageSync API 支援以下用例:

  • 迅速捕捉一個光柵化代價高昂的圖片,以便在多個畫面中重複使用。
  • 將多通道濾鏡應用於圖片。
  • 應用自訂著色器。

例如,Flutter 框架現在 使用此 API 來改進 Android 上的頁面轉場效能,這幾乎將畫面光柵化時間減半,減少了卡頓,並允許動畫在支援這些更新率的設備上達到 90/120fps。

自訂著色器支援改進

此版本包含 Flutter 對自訂片段著色器支援的許多改進。Flutter SDK 現在包含一個著色器編譯器,它會將 pubspec.yaml 檔案中列出的 GLSL 著色器編譯為目標平台的正確後端特定格式。此外,自訂著色器現在可以熱重新載入,以實現便捷的開發週期。自訂著色器現在也受 iOS 上的 Skia 和 Impeller 後端支援。

我們對社群已經分享的演示非常印象深刻,並且期待看到自訂著色器在 Flutter 中的進一步創新使用:

在 docs.flutter.dev 上查看 撰寫和使用自訂片段著色器 的詳細文件,並查看 pub.dev 上的實用程式套件 flutter_shaders

字體資產熱重新載入

以前,將新字體添加到 pubspec.yaml 檔案中需要重新建立應用程式才能看到它們,這與可以熱重新載入的其他資產類型不同。現在,對字體清單的更改(包括新增新字體)可以在應用程式中熱重新載入。

減少 iOS 設備上的動畫卡頓

感謝 luckysmg 的開源貢獻,兩個改進減少了 iOS 上的動畫卡頓。特別是,在手勢期間在主線程上添加一個虛擬 CADisplayLink 現在會強制以最大更新率刷新。此外,鍵盤動畫 現在會將 CADisplayLink 的更新率設定為與 Flutter 引擎的動畫器使用的相同更新率。由於這些更改,使用者應該會注意到 120Hz iOS 設備上更一致的平滑動畫。

總結

毫不誇張地說,沒有才華橫溢且充滿熱情的貢獻者社群,Flutter 就無法成為今天的傑出體驗。我們將繼續一起踏上這段旅程,Google 的 Flutter 團隊希望大家知道,沒有你們,我們是無法做到的。謝謝!

這股勢頭不會減弱,敬請關注未來的更新!


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

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

展示 Flutter 和機器學習的虛擬照片亭體驗

隆重推出 Flutter Forward Holobooth,這是一個展示 FlutterFirebase 和機器學習(使用 MediaPipeTensorFlow.js)功能的全新體驗,以虛擬照片亭呈現。首先選擇您的頭像(Dash 或 Sparky),然後將自己傳送到熱帶海灘、火山山脈、外太空、海底或其他地方!由於我們無法將所有人運送到奈洛比現場參加 Flutter Forward,因此我們想要提供同樣令人興奮的虛擬體驗!使用 Holobooth,您可以捕捉一段短片來紀念您的虛擬之旅。然後,透過分享到 Twitter 或 Facebook 來與您的朋友炫耀。

Flutter Forward Holobooth 網頁應用程式的登陸畫面。左邊,Dash 在一個以紫色和藍色色調以及 Flutter 標誌裝飾的照片亭裡拍照。右邊是一個開始按鈕。
holobooth.flutter.dev 上嘗試 Flutter Forward Holobooth

Holobooth 基於 Google I/O 2021 的第一版 Photo Booth 應用程式。Holobooth 沒有拍攝你和 Dash 或 Sparky 的照片,而是使用機器學習,透過你的臉部表情控制 Dash 或 Sparky 的動畫。

我們將分解說明我們的團隊如何與 Google 合作,透過運用 Google 工具的功能,打造更具沉浸感和未來感的照片亭體驗。我們使用 FlutterFirebase 建立 Holobooth 應用程式。JavaScript 中的 Web ML 讓我們能夠透過虛擬、互動式、3D 頭像將體驗提升到新的水平。讓我們深入了解我們是如何建立它的!

使用 TensorFlow.js 偵測臉部

Holobooth 最令人興奮的功能之一是能夠將您臉部的即時影片,映射到 Dash(或 Sparky)的 3D 模型上,同時您穿梭在他們的虛擬世界中。如果您臉部表達驚訝,Dash 的臉部也會表達驚訝,依此類推。為了實現這一點,我們使用了 Flutter Web 的 camera Plugin 和 TensorFlow.js 來偵測相機畫面中使用者的臉部。更具體地說,我們使用了 MediaPipe FaceMesh 模型,它可以實時估計 468 個 3D 臉部特徵點,以偵測 Web 和行動瀏覽器中相機畫面中使用者臉部的特徵。

一個穿著灰色襯衫和眼鏡坐在椅子上的男人。在他臉上是一堆紅點,映射到他的五官上。在他的眼睛周圍和嘴巴周圍有高濃度的紅點。
使用 MediaPipe FaceMesh 模型偵測到的特徵

根據每個臉部特徵的位置,我們可以判斷使用者是否在畫面中,他們的眼睛或嘴巴是否睜開,等等。當使用者在相機視圖中移動時,MediaPipe FaceMesh 模型(透過 TensorFlow.js Face Landmarks Detection 套件 提供)確保我們可以追蹤使用者特徵的確切座標,以便我們可以在 Dash 或 Sparky 上鏡像它們。如需更多詳細資訊,您可以深入了解 face_geometry.dart 檔案。雖然目前還沒有針對 TensorFlow.js 的官方 Dart 套件,但 Dart 的 JS 套件允許我們將 JavaScript 函式庫導入 Flutter Web 應用程式(如需更多詳細資訊,請參閱 tensorflow_models 套件資料夾)。

  FaceGeometry({
required tf.Face face,
required tf.Size size,
}) : this._(
rotation: FaceRotation(keypoints: face.keypoints),
leftEye: LeftEyeGeometry(
keypoints: face.keypoints,
boundingBox: face.boundingBox,
),
rightEye: RightEyeGeometry(
keypoints: face.keypoints,
boundingBox: face.boundingBox,
),
mouth: MouthGeometry(
keypoints: face.keypoints,
boundingBox: face.boundingBox,
),
distance: FaceDistance(
boundingBox: face.boundingBox,
imageSize: size,
),
);

const FaceGeometry._({
required this.rotation,
required this.mouth,
required this.leftEye,
required this.rightEye,
required this.distance,
});

使用 Rive 和 TensorFlow.js 動畫背景和頭像

我們求助於 Rive 來讓 Holobooth 動畫栩栩如生。Rive 是一個使用 Flutter 建立的 Web 應用程式,它提供了用於建立高性能、輕量級、互動式動畫的工具,這些動畫易於整合到 Flutter 應用程式中。我們與 Rive 的才華洋溢的設計師和 HOPR 設計工作室 合作,創造出可以在我們的 Flutter 應用程式中無縫運作的動畫 Rive 圖形。動畫背景和頭像都是 Rive 動畫。

左邊是一個向左、向右、向上、向下移動、眨眼,然後張嘴的臉。Dash 模仿了左邊臉移動的相同動作。
移動您的臉,看看 Rive 模型如何模仿您的行為

頭像使用 Rive 狀態機,讓我們可以控制頭像的行為和外觀。在 Rive 狀態機中,設計師指定所有輸入。輸入是由您的應用程式控制的值。您可以將它們視為設計和工程團隊之間的契約。您的產品程式碼可以隨時變更輸入的值,狀態機會對這些變更做出反應。

對於 Holobooth,我們使用輸入來控制嘴巴張開或閉合的程度。使用來自 FaceMesh 模型的特徵偵測,我們可以將它們映射到頭像模型上的對應座標。使用 StateMachineController,我們轉換來自模型的輸入,以確定頭像在螢幕上的顯示方式。

class CharacterStateMachineController extends StateMachineController {
CharacterStateMachineController(Artboard artboard)
: super(
artboard.animations.whereType<StateMachine>().firstWhere(
(stateMachine) => stateMachine.name == 'State Machine 1',
),

例如,頭像模型有一個屬性用於測量 嘴巴的張開程度(從 0 到 1 測量,其中 0 表示完全閉合,1 表示完全張開)。如果使用者在相機視圖中閉合嘴巴,應用程式會提供對應的值並將其饋送到頭像模型中,因此您會看到您的頭像嘴巴在螢幕上也閉合了。

使用 Firebase 捕捉動態照片

Holobooth 的主要功能是您可以分享的 GIF 或影片,以慶祝 Flutter Forward。我們求助於 Firebase 的雲端函數 來幫助我們生成和上傳您的動態照片到 Firebase 的雲端儲存空間。當您按下相機按鈕時,應用程式會開始捕捉畫面 5 秒鐘。使用 ffmpeg,我們使用雲端函數將畫面轉換為單個 GIF 和影片,然後上傳到 Firebase 的雲端儲存空間。您可以選擇下載 GIF 或影片以供日後觀賞,或手動上傳到社交媒體。

使用者選擇 Dash 作為頭像,然後選擇外太空的動畫背景,其中有行星和星星。一個火箭斜向上向左移動,在 Dash 身後。使用者選擇一頂藍色的巫師帽,上面有星星,搭配一件相同的襯衫和一個 Flutter 馬克杯,然後按下相機按鈕錄製動態照片。最終的照片在一個單獨的螢幕上顯示,其中有按鈕可以分享照片、下載照片或重新拍攝照片。
捕捉動態照片

若要將您的 GIF 直接分享到 Twitter 或 Facebook,您可以點擊分享按鈕。然後,您將被帶到所選平台,其中包含一個預先填寫的帖子,其中包含您的影片第一畫面的照片。若要觀看完整的影片,請點擊您的 holocard 連結 - 一個網頁,它會完整顯示您的影片,並有一個按鈕引導訪客自己嘗試 Holobooth!

Holocard 頁面,左邊是使用者動態照片的第一個畫面。Dash 穿著太空人服,站在未來城市前。右邊是 Flutter Forward 活動標誌,文字為“Check out my Flutter holocard”,以及一個顯示“Try now”的按鈕,使用者可以在其中使用 Holobooth 拍攝自己的照片。
Holocard 範例

挑戰和解決方案

Holobooth 包含許多元素,這些元素擴展了 Flutter 的可能性 - 例如使用機器學習模型和 Rive 圖形,同時確保為使用者提供高性能、流暢的體驗。

與 TensorFlow.js 合作對 Very Good Ventures 來說是第一次。目前沒有官方的 Flutter 函式庫,因此我們在這個專案上的早期工作很大一部分是專注於對可用模型進行實驗,以確定哪個模型適合我們的需求。當我們確定了特徵點偵測模型後,我們就必須理解模型輸出的資料,並將它們映射到 Rive 動畫。以下是一個早期探索臉部偵測的範例:

一個穿著淡藍色襯衫和紅色帽衫的男人正在螢幕上移動他的臉。他的臉周圍有一個藍色方框,紅點映射到他的臉上,他的眼睛和嘴巴周圍有高濃度的點。當他移動他的臉時,紅點隨著他的臉部特徵一起移動。
臉部偵測的早期探索

官方 Flutter 的 camera Plugin 為我們提供了開箱即用的許多功能,但目前它不支持在 Web 上串流圖片。對於 Holobooth,我們 分支 了 camera Plugin 以添加此功能。我們希望這種功能可以在 未來由官方 Plugin 支援

另一個挑戰是效能優化。錄製螢幕可能會是一項昂貴的操作,因為應用程式正在捕捉大量數據。我們還必須考慮使用者會從不同的瀏覽器和設備訪問這個應用程式。我們希望確保該應用程式具有高性能,並且無論使用者使用什麼設備,都能提供流暢的體驗。當在桌面端訪問 Holobooth 時,影片背景會動畫化並反映橫向模式。為了優化行動瀏覽器,背景是靜態的,並被裁剪以適合縱向模式。由於行動螢幕比桌面螢幕更小,因此我們還優化了圖片素材的解析度,以減少初始頁面載入時間和設備使用的數據量。

如需更詳細地了解我們是如何解決這些挑戰以及更多問題,您可以查看 開源程式碼。我們希望這能為想要嘗試 TensorFlow.js、Rive 和影片的開發人員提供靈感,甚至對於那些只是想優化他們 Web 應用程式的開發人員也能提供靈感。

展望未來

在建立這個演示過程中,我們想要探索 Flutter Web 應用程式以簡單、高性能且有趣的方式與 TensorFlow.js 模型整合的潛力。雖然我們建立的許多內容仍然是實驗性的,但我們對機器學習在 Flutter 應用程式中的未來感到興奮,它可以為使用者在任何設備上創造出令人愉悅的體驗!加入社群對話,告訴我們您的想法,以及您如何在您的下一個 Flutter 專案中使用機器學習。

在 Holobooth 中拍一段影片,並在社交媒體上與我們分享!


它是如何製作的:Holobooth 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

現在,從 Flutter 3.7 開始,我很高興地宣布,開發者可以從 *任何* 隔離區使用 Plugin 和平台通道。這一直是我們 [排名最高的議題之一](https://github.com/flutter/flutter/issues/13937),並且從 2018 年就開始存在。由於實作起來並不簡單,而且存在一種雖然繁瑣但可行的解決方案:始終從根隔離區(Flutter 提供的隔離區)使用 Plugin,因此它被降級了。但是,隨著 Flutter 的成熟,它越來越注重效能,遵循軟體界的古老格言「讓它運作,讓它正確,讓它快速」。選擇實作此功能是改善效能和讓 Flutter 更易於使用的幸福交集。因此,它成為了很容易做出的投資決定。

如果您想了解此功能的用法,請查看 GitHub 上的 [範例程式碼](http://tbd)。

用例

為什麼有人想要從背景隔離區使用 Plugin 呢?很明顯 Plugin 有其存在的必要性,因為並非世界上所有的程式碼都是用 Dart 編寫的。社群花費了數年的努力來讓這些程式碼透過 Plugin 變得可用,例如:path_provider 的尋找臨時目錄功能,或 flutter_local_notifications 的發佈通知功能。

接下來的邏輯問題是:「為什麼有人要在背景隔離區上執行程式碼?」答案是,有時您別無選擇,某些函式庫可能會在背景隔離區上呼叫回呼函式,例如 android_alarm_manager_plus。或者,應用程式可能會進行大量的計算,而開發者不希望這些計算干擾 UI。

在我幫助 Google 的其他團隊採用 Flutter 的時間裡,隨著產品的成熟,他們最終會遇到根隔離區成為瓶頸的情況,這幾乎是不可避免的。因此,我們需要確保框架中的所有內容都經過優化,並為使用者提供在必要時輕鬆卸載工作的工具。

以下是一個為背景隔離區通道設計的虛構具體用例:

想像一個使用 AI 從文字提示生成高解析度圖像的應用程式。使用者的先前創作儲存在 Firebase 雲端儲存空間中,並且有一個功能可以從使用者的手機匯出和分享創作。Flutter 應用程式啟動一個背景隔離區,它從 Firebase 雲端儲存空間下載圖像的 8k 版本,將圖像縮放到所需的匯出大小,將圖像儲存到相機膠捲,最後在匯出完成時發佈本地通知。

在此範例中,至少有 3 個 Plugin 是從背景隔離區使用的,一個用於從 Firebase 雲端儲存空間讀取,一個用於儲存到手機的相機膠捲,一個用於發佈本地通知。如果沒有背景隔離區通道,應用程式必須將 8k 圖像從根隔離區複製到背景隔離區,才能對其進行縮放。今天,使用 Dart 無法將其變成恆定時間運作。

快速範例

以下是一個使用新 API 從背景隔離區呼叫 shared_preferences Plugin 的快速範例:

import ‘package:flutter/services.dart’;
import ‘package:shared_preferences/shared_preferences.dart’;
void main() {
// 識別要傳遞給背景隔離區的根隔離區。
// (在 Flutter 3.7 中引入的 API)
RootIsolateToken rootIsolateToken = RootIsolateToken.instance!;
Isolate.spawn(_isolateMain, rootIsolateToken);
}
void _isolateMain(RootIsolateToken rootIsolateToken) async {
// 將背景隔離區註冊到根隔離區。
BackgroundIsolateBinaryMessenger
.ensureInitialized(rootIsolateToken);
// 您現在可以使用 shared_preferences Plugin。
SharedPreferences sharedPreferences =
await SharedPreferences.getInstance();
print(sharedPreferences.getBool(‘isDebug’));
}

技術細節

以下是平台通道工作原理的高階概觀:

當平台通道的結果被呼叫時,會有一個硬編碼跳轉到 platform 線程。為了讓背景隔離區通道能夠運作,必須儲存傳送訊息的隔離區,以便引擎可以在該隔離區的事件迴圈中排程結果。這透過使用 [Dart 的 ports](https://github.com/dart-lang/sdk/blob/eb9554d70e386bb3177f63509ba8f7e4bbf500a0/runtime/include/dart_native_api.h#L125) 來實作。Dart ports 儲存擁有它們的隔離區,並且是從 C API 排程這些隔離區的唯一方法。

另一個需要實作的內容是將背景隔離區與其根隔離區關聯起來的方法。這讓我很驚訝,但是為了在 Flutter 引擎被破壞時關閉平台通道,必須知道哪些背景隔離區與該引擎關聯。否則,背景隔離區可能會嘗試與正在被破壞的 Flutter 引擎通訊。這在最終的 API 中可以被視為一種後果,其中需要使用 RootIsolateToken 初始化 BackgroundIsolateBinaryMessenger

若要進一步了解實作,請查看 [隔離區平台通道](https://docs.google.com/document/d/1yAFw-6kBefuurXWTur9jdEUAckWiWJVukP1Iay8ehyU/edit#heading=h.722pnbmlqbkx) 設計文件。此文件還包含反向通訊的提議,但尚未實作或被接受。

感謝 Flutter 社群的支持,希望大家都能為這個新功能找到絕妙的用途。


介紹背景隔離區通道 最初發佈在 Medium 上的 Flutter,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

探索可變字型和著色器

簡介

我是 Brian,Flutter 新手,六個月前加入了 Google 的 Flutter 團隊擔任 UX 工程師。作為 UX 工程師,我將我的圖形設計背景與編碼技能結合起來,幫助團隊構建 Flutter 本身,並展示 Flutter 的能力。這篇部落格文章分享了我作為混合設計師 - 開發人員的第一次 Flutter 實驗之一:一個簡單的以排版為主題的益智遊戲。它結合了我設計中的創意背景和對幾個您可能還沒有嘗試過的 Flutter API 的技術探索:FontVariationAnimationController。我創造這個應用程式玩得很開心,並透過它親身感受了 Flutter 對那些會編碼的設計師或擁有設計眼光的開發人員來說有多棒。

使用可變字型和著色器自訂 Flutter 文字 Widget 的調色盤。

排版

圖形設計師喜歡深入研究「排版」,這只是一個描述文字樣式的花哨詞彙。這包括選擇字型、大小、佈局、間距等等。透過所有這些可以設定的選項,字母本身也可以成為一種藝術形式!作為一名受過設計訓練的設計師,我知道我為這個探索性專案所創造的任何事物,都會以某種方式涉及使用 Flutter 深入研究排版。在過去幾年中,可變字型 已經成為設計師前所未有地控制文字樣式的一種有趣方法。這是我一直想進一步探索的領域,而 Flutter 對可變字型的支援,似乎是這個完美的機會。

您可能已經熟悉一般字型,它決定了文字區塊中每個字元的樣式。常規字型通常會提供我們可以選擇的幾個設定,例如粗細:粗體、常規或輕細。可變字型將這種自訂提升到一個新的層次。例如,在粗細方面,我們可能會選擇 100(極輕)到 1000(極粗)之間的任何數值設定。而且我們並不局限於粗細;字型創作者可以讓使用者設定各種項目,例如字母的寬度或下降字元(例如「p」和「y」等小寫字母下降的距離)的深度等等。所有這些不同的設定都稱為「軸」,就像圖表的軸一樣。

Roboto Flex 可變字型中的字母「g」,沿著寬度軸(從左到右)和粗細軸(從上到下)變化。這些只是它許多生效的軸中的兩個!

Flutter 提供了一種簡單的方法,可以在 TextStyle Widget 中透過使用 fontVariations 欄位來調整這些設定。例如,以下程式碼片段將在 Roboto Flex 可變字型中建立一個文字樣式,大小為 18,具有針對粗細(wght)和寬度(wdth)的可變軸設定:

1
2
3
4
5
6
7
8
TextStyle(
fontFamily: 'RobotoFlex',
fontSize: 18,
fontVariations:[
FontVariation('wght', 374),
FontVariation('wdth', 118)
],
)

若要進一步了解可變字型,請查看 Google Fonts 網站上的 可變字型資源

設定變化非常容易,但是我想要從一個變化設定動畫到另一個設定,以及在設定組合之間動畫。幸運的是,Flutter 和 Dart 讓將兩個現有的底層功能(FontVariationAnimationController)粘合在一起以製作我自己的自訂動態排版效果變得非常容易。

對於我的展示,我製作了一個 WonkyChar Widget 和一個 WonkyAnimPalette 協助類別,它提供了一種簡單的方法來選擇在螢幕上顯示的任何字母,控制文字大小,並輸入與可變字型軸相關的各種設定。WonkyChar Widget 還包含一個標準的 Flutter AnimationController 物件,我用它來為設定製作動畫。在此範例中,字母「M」將以 200 的大小顯示,並在 4 秒的動畫中將其粗細(粗體)從極細動畫到極粗:

1
2
3
4
5
6
7
8
9
10
11
WonkyChar(
text: 'M',
size: 200,
animationDurationMillis: 4000,
animationSettings: [
WonkyAnimPalette.weight(
from: 100,
to: 900,
),
],
)

自訂著色器

可變字型的效果,特別是加上動畫,非常棒,但我想要進一步提升我的視覺創造力,看看我可以用字母形狀做些什麼。順便說一句,我聽說 Flutter 剛剛加入了對自訂片段著色器的支援。著色器是在電腦的圖形處理單元 (GPU) 上執行的程式,讓開發人員可以在維持高畫面更新率的同時製作各種視覺效果。Flutter 支援使用 GLSL 撰寫著色器,GLSL 是最出名且文件最齊全的著色器語言之一,有許多書籍、網站、YouTube 影片和大型開放式線上課程 (MOOC) 中提供了許多教學和範例。我當然不是著色器或圖形程式的專家,但我以前曾玩過,所以這是另一個在建立自己的技能的同時探索 Flutter 功能的好機會。

注意:著色器是一個相當進階的編碼主題,有關將它們插入 Flutter 應用程式的詳細資訊超出了這篇部落格文章的範圍。如果您想自己嘗試撰寫一些著色器,請查看 Flutter 文件中的 [撰寫和使用片段著色器](https://docs.flutter.dev/development/ui/advanced/shaders)。這是一種真正引人入勝的編碼方法!

最初,只是為了展示一種可能性,我撰寫了一個簡單的 GLSL 著色器,以作為我其中一個 WonkyChar Widget(如上所述)的濾鏡,以製作以下效果:

應用著色器之前和之後的 `WonkyChar` Widget。

專案描述

這些原始元件 - 排版、可變字型支援和著色器 - 是一個有趣的開始,但它們需要實際整合到一個連貫的專案中。作為一個自我賦予的任務,以進一步了解 Flutter 和 Flutter 社群中的編碼,我製作了一個簡單的基於磁磚的益智遊戲 Type Jam,靈感來自 2022 Flutter 益智遊戲黑客大賽。在益智遊戲黑客大賽提示的背景下,針對這些想法進行集思廣益,我提出了以下概念:您,作為玩家,必須幫助一家陷入困境的字型公司透過解決一系列基於磁磚的益智遊戲來修復一個故障的字型檔案。

應用程式的每個畫面都有一個益智遊戲,由一個故障字母的混亂碎片組成,周圍環繞著完整的字母,根據可變字型軸(例如粗細或寬度)製作動畫。磁磚碎片上的故障效果是在每個頁面上透過不同的著色器來建立的,導致磁磚碎片看起來波浪狀、斷裂等等。而且,為了與通常的磁磚益智遊戲機制有所區別,我決定讓玩家透過旋轉磁磚來解決益智遊戲,而不是滑動它們,這樣一來,在完成後就可以看到整個字母,沒有空槽。回想起來,這可能讓益智遊戲變得過於容易,但我可以為 2.0 版想出更多挑戰!

在益智遊戲應用程式中應用可變字型加上著色器效果(在磁磚碎片上)。這個畫面的字母在「光學大小」軸上製作動畫。

如果您想看看它是如何整合在一起的,請查看 flutter/samples 儲存庫 中「experimental」資料夾中的 Type Jam 應用程式的 varfont_shader_puzzle 範例。正如我之前提到的,我仍然是 Flutter 的新手,而且我只對著色器有基本的了解,所以我希望在未來能夠改進它!目前,請將它視為一個快速展示,而不是模板。

結語

作為一名以設計為中心的 UX 工程師,將我的設計和技術興趣結合起來以製作有趣的排版,並讓其他人也能玩弄字母,這讓我感到非常滿足。此外,我親眼見證了 Flutter 作為一種創造性工具的潛力,它可以超越應用程式設計的典型模式。我製作這個專案玩得很開心,希望它能激勵其他設計師 - 編碼人員嘗試他們奇怪而有趣的想法,並將他們的設計作為真正的應用程式呈現出來!


使用 Flutter 製作有趣的排版 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

福爾摩斯與華生;花生醬與果醬;Flutter 與 Material!這些搭配都是天作之合!

Material 是一個設計系統,可以幫助您在行動、網頁和桌面跨平台構建出色的、無障礙的應用程式。

在 Flutter 中,Material 函式庫 為開發人員提供了 UI 所需的所有構建模組。自 2021 年 Google I/O 推出 Material 3 以來,Flutter 團隊一直在更新 Flutter 的 Material 函式庫以支援這些新的變更。

我於 2022 年 8 月加入 Flutter 的 Material 團隊。從那以後,我一直在幫助更新 Widget 以符合 Material 3 規格,同時支援開源 Flutter 社群中的 Material 3 使用者。

在本文中,我將向您展示 Material 3 的新功能,如何將它們整合到您的 Flutter 應用程式中,並向您更新接下來的規劃。

Flutter Material 3 範例應用程式

Material 3

若要查看所有最新的 Material 3 更新,請查看我們的 範例應用程式。它讓您可以與所有 Widget 進行實時互動。

此應用程式展示了更新後的組件,讓您可以在 Material 2 和 Material 3、亮模式和暗模式之間切換,並嘗試不同的顏色方案。

入門

若要將 Material 3 加入到您的應用程式中,請在主題的建構函式中將 useMaterial3 旗標設定為 true:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(useMaterial3: true),
      body: MyHomePage(),
    );
  }
}

有關遷移現有 Flutter 應用程式的資訊,請查看 [將 Flutter 應用程式遷移到 Material 3](https://blog.codemagic.io/migrating-a-flutter-app-to-material-3/),這是 Flutter 貢獻者 Taha Tesser 在 CodeMagic 上發表的文章。

在撰寫本文時,您可以 *選擇* 使用 Material 3。未來,它將成為 Flutter 應用程式的預設(以及強制性)Material 版本。

新的 Widget

若要充分利用 Widget 變更,請設定 useMaterial3 旗標。但是,有些 Widget 在 Material 3 中發生了很大的變更,因此已被新的 Widget 取代。以下是其中一些新 Widget:

NavigationBar & NavigationDrawer

BottomNavigationBar Widget 已被 NavigationBar 取代。它稍微高一點,而且沒有下拉陰影(表示高度)。

分段按鈕

分段按鈕讓您的使用者可以在 *單個 Widget* 中從多個選項中選擇可切換的選項。預設情況下,您只能選擇一個項目,除非您指定 multiSelectionEnabled 參數。

分段按鈕 - 單選和多選

填充按鈕

我們已增加了按鈕的選項,其中包括新的 FilledButton。此按鈕會建立一個有色且沒有高度的按鈕。FilledButton.tonalmethod 方法會將目前的背景設定為輔助顏色。

凸起、填充和輪廓按鈕

徽章

新的 Badge Widget 可用於為父 Widget 提供額外的資訊,通常表示計數或狀態變更。它們有大型和小型可供選擇:

附加到父圖示的徽章 Widget

產生顏色方案

Material 3 的一項全新的功能讓您可以從單個種子顏色設定整個應用程式的顏色主題。在主題的建構函式中設定 color scheme seed 參數,然後從 *單一* 輸入,Flutter 會為應用程式中 **所有** Widget 產生一個和諧的顏色方案。此方案在亮模式和暗模式下都有效!

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(
        useMaterial3: true,
        colorSchemeSeed: Color.fromRGBO(188, 0, 74, 1.0);
        ),
      body: MyHomePage(),
    );
  }
}
從種子顏色產生的顏色方案和色調值

如果您想進一步自訂顏色方案,請訪問 Material 生成器應用程式。您可以定義輔助顏色和第三顏色以建立完全獨特的調色盤。最棒的是,它會匯出 Dart 檔案,您可以立即在 Flutter 應用程式中使用。

接下來的規劃

Flutter 的 Material 3 遷移仍在繼續。您可以在 將 Material 3 帶入 Flutter GitHub 議題中追蹤進度。您也可以貢獻!我們歡迎錯誤報告和修復,讓 Material 3 變得對像您一樣的 Flutter 開發人員來說更加出色。

我們最近的更新帶來了 SnackBarTabBarSlider Widget 來符合 Material 3 規格。到目前為止,我們已經遷移了 27/30 個組件,並加入了一系列新功能以支援動態顏色、文字主題、Android 12 功能等等。

如果您想更多地參與 Flutter 社群,請前往 flutter.dev/community,並在您最喜歡的社交平台上找到我們。在那裡見!


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

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

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

加入我們參與 #17DaysOfFlutter

#17DaysOfFlutter 的橫幅

新年快樂!

為什麼不藉此機會提升您的 Flutter 技能來迎接新的一年呢?從 1 月 9 日開始,直至我們在 1 月 25 日舉辦的 Flutter Forward 活動 之前,我們將舉辦為期 17 天的 Flutter 活動,一場 Flutter 內容馬拉松,我們的 Flutter 專家將在星期一至星期五公開發表全新的內容。此外,您還有機會應用所學,並與 Flutter 社群分享您的作品。無論您是 Flutter 的新手,還是經驗豐富的 Flutter 專家,我們都有新的 YouTube 影片、Codelab、現場活動和其他精心策劃的內容,可以幫助您在學習過程中取得進展。

#17DaysOfFlutter 時間表

通往 Flutter Forward 的內容安排如下:

第一週

第一週將以趣味和遊戲為主!觀看開發者關係工程師 KhanhEricLearning to Fly 第二季 中打造他們首個 Web 遊戲(使用 Flame)。跟著他們學習遊戲開發,或按照自己的步調,使用我們的全新遊戲 Codelab 從頭開始打造一個遊戲。在本週稍晚,在 Widget of the Week 的新一集中,了解 Flame 遊戲引擎。我們提供多種方法來幫助您在 Flutter 中構建遊戲。

第二週

在第二週,我們將發佈另一個 Codelab 和一些關於 Material 3 和 UX 設計的部落格文章,這些文章將重新定義您對 Flutter 應用程式體驗的想法。然後觀看 1 月 17 日由 CraigFlutter YouTube 頻道 上主持的 The Boring Show - Live。為了結束 #17DaysOfFlutter 的第二週,我們將在一個新的 Decoding Flutter 影片中,揭開 dart fix 的神秘面紗。

社群遊戲提交

透過分享您自己的遊戲來參與 Flutter 社群!從 1 月 14 日開始,您將有機會參與遊戲編碼挑戰。為 Learning To Fly 的 Doodle Dash 和遊戲 Codelab 增添新功能或敵人,提升它們的功能。您可以在 17DaysOfFlutter 網站上找到更多關於如何與社群分享您的遊戲的詳細資訊。

請務必在 Twitter 上關注 FlutterDev,以獲取有關 #17DaysOfFlutter 的更新。

(為什麼是 17DaysOfFlutter?Flutter 團隊的人決定在星期三開始 Flutter Forward,而我們希望至少能有兩個完整的星期來準備內容!)


加入我們參與 #17DaysOfFlutter 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

基於 Mindy Hoover 和 Chris Bracken 於 2022 年進行的 Flutter 桌面使用者研究的見解和優先事項

2 月,Flutter 正式發佈了針對 Windows 應用程式的 [開發支援](https://medium.com/flutter/announcing-flutter-for-windows-6979d0d01fed),將其跨平台功能擴展到桌面。隨著 [Flutter 3](https://medium.com/flutter/introducing-flutter-3-5eb69151622f) 於 2022 年 5 月發佈,Flutter 宣布對 macOS 和 Linux 提供穩定支援,完成了桌面支援的三部曲!現在 Flutter 使用者已經有幾個月的時間可以嘗試這些新功能了,我們想知道:Flutter 如何才能更好地支援桌面開發人員?

為了回答這個問題,我們在 Q3 Flutter 調查中收集了來自 1,901 位 Flutter 桌面開發人員的數據。如果您在 8 月份參加了 Flutter Vikings,您可能會看到 UX 研究人員在焦點小組討論中與開發人員交談。以下是我們發現的內容,以及我們將如何利用這些內容來改進 Flutter。

您對 Flutter 在桌面上的滿意度如何?

平均而言,在 Windows、macOS 和 Linux 上,78% 的 Flutter 桌面開發人員表示他們對其開發體驗 *非常* 或 *相當滿意*。這個評分與 iOS 的滿意度(78%)持平,介於 Android(92%)和網頁(63%)之間。對於 Flutter 桌面來說,這是一個好消息!但它也引發了一個問題,對於其他 22% 的使用者,體驗在哪裡不足?

Bar chart of developer satisfaction with Flutter’s support of each target platform.
Satisfaction by target platform

桌面開發人員工作流程中最具挑戰的部分是什麼?

接下來,我們要求開發人員評估他們在軟體開發工作流程各階段的滿意度。結果顯示,滿意度在桌面應用程式開發流程中往往會下降。這導致使用者在 *除錯效能問題* 和 *部署應用程式* 時的滿意度最低。此外,根據調查和焦點小組的定性回饋,尋找適用於桌面的 Flutter 套件很具有挑戰性。

Line chart showing satisfaction on the y-axis and development stage on the x-axis. Satisfaction is high at the beginning when developers are seting up the environment, falls a bit when searching for documentation, and rises again when running and refreshing the app. Satisfaction steadily falls starting with debugging syntax and UI. Finally, it ends with the lowest satisfaction around debugging performance issues and deploying the app.
Flutter for desktop satisfaction by development workflow stage

Flutter 生態系統需要更多支援桌面的套件才能更好地支援桌面。(本文稍後列出了最受需求的套件。)我們正在努力開發新的支援桌面的 API(更多資訊請見下文),但我們無法做到所有事情。我們希望社群也能站出來提供幫助,透過建立新的套件和使用 [聯合外掛](https://docs.flutter.dev/development/packages-and-plugins/developing-packages#federated-plugins) 為現有套件添加桌面支援,例如。

我們知道排除效能問題不是一件有趣的事,但至少應該是一種令人滿意的體驗。我們的團隊正在努力改進 Flutter DevTools 的功能,特別是記憶體分析功能,以使排除效能問題變得更容易。例如,您現在可以使用 Flutter 的 DevTools 來 [比較記憶體快照](https://docs.flutter.dev/development/tools/devtools/release-notes/release-notes-2.20.0)!此外,請查看完全重寫的 [記憶體檢視頁面](https://docs.flutter.dev/development/tools/devtools/memory)。

Flutter 桌面開發人員告訴我們,部署桌面應用程式需要太多步驟。桌面團隊將對桌面應用程式部署進行任務分析,以確定我們可以在哪些地方改進應用程式部署流程和文件。

哪些內容可以幫助您製作更好的桌面使用者介面?

72% 的使用者同意「Flutter 的內建 Widget 可以建立適合桌面的 UI」。當我們詢問開發人員哪些內容可以幫助他們改進桌面應用程式的 UI 設計時,他們壓倒性地回答他們需要更好的支援:

  1. 自適應佈局(44%)
  2. 拖放(31%)
  3. 鍵盤快捷鍵(27%)
A horizontal bar chart of design feature requests for improving Flutter desktop apps. Adaptive layouts were most requested, followed by drag and drop, and keyboard shortcuts.
Which of the following could be improved to help you reach your design goals when using flutter to develop desktop apps?

我們努力讓 Flutter 成為最好的 *跨平台* 應用程式開發框架,因此這一直都是我們的首要任務。但是,改進「*自適應佈局*」是一個模糊的問題空間,會影響到每個目標平台,而不仅仅是桌面。此外,還存在許多因素,包括螢幕大小、作業系統、輸入設備(僅舉幾例),因此設計一個有用的解決方案並非易事。但我們的工程師正在努力,改進 [flutter_adapative_scaffold](https://pub.dev/packages/flutter_adaptive_scaffold) 套件並建立程式碼實驗室,引導您逐步了解如何有效地建立自適應應用程式。同時,請關注 1 月份的 [Flutter Forward](https://flutter.dev/events/flutter-forward),Greg Spencer 和 Justin McCandless 將討論如何使用現有的 Flutter 工具來架構自適應應用程式。

至於拖放和鍵盤快捷鍵,我們已經關注它們一段時間了。實際上,[Shortcuts Widget](https://api.flutter.dev/flutter/widgets/Shortcuts-class.html) 最近已發佈。您可以在最近的「[Widget of the Week](https://www.youtube.com/watch?v=6ZcQmdoz9N8) 集數」中看到它在行動。最後,拖放支援是我們在 2023 年的首要任務之一!

哪些套件可以使 Flutter 桌面開發變得更簡單?

桌面套件的支援還沒有趕上行動和網頁。桌面開發人員最需要的套件是:

  1. 多視窗(35%)
  2. 原生控制項(32%)
  3. 本地儲存(24%)
  4. 網頁檢視(23%)
Horizontal bar chart showing API requests for desktop with the most requested being multi-window and native controls. They were followed by local storage, web views, database access, and Firebase storage.
Which APIs or features do you wish were better supported by Flutter?

此回饋與 Flutter 目前的優先事項清單密切相關,其中包含針對多視窗、原生選單和網頁檢視的 API。在這些 API 發佈後,我們可以開始優先考慮對本地數據儲存和數據庫存取的解決方案。一些目前優先順序較低,但仍值得考慮的其他套件需求是音訊/影片播放器和音訊/影片設備。在 Flutter Vikings 的焦點小組討論中,出現了對支援剪貼簿管理和複雜輸入設備(例如 3D 滑鼠、遊戲手柄控制器)套件的需求,但沒有包含在季度調查中。

如果您有興趣為桌面的 Flutter 套件做出貢獻,請考慮透過建立套件來填補這些空白,或提交 PR 到現有套件,來幫助發展 Flutter 生態系統。我們相信,透過共同努力,Flutter 套件生態系統將會成長並適應,以更好地支援桌面開發人員。

還需要哪些額外的桌面文件?

最後一個調查類別涵蓋了 Flutter 的桌面文件。對 Flutter 桌面文件的滿意度比 Q3 中對 Flutter 其他文件的滿意度低 13%。接下來,我們詢問了哪些文件可以幫助簡化桌面開發流程。最受需求的文件主題是:

  1. 發佈應用程式(43%)
  2. 自動更新(42%)
  3. 外部函數介面 (FFI)(42%)

此回饋對優先考慮 2022 年第四季度和 2023 年的文件工作非常有幫助。因此,我們的團隊目前正在草擬文件以幫助桌面開發人員發佈他們的應用程式,並包含一個幾乎完成的實用 [程式碼實驗室](https://github.com/flutter/codelabs/tree/main/ffigen_codelab)!雖然自動更新不是我們為 Flutter 維護的功能,但 Flutter 生態系統中有一些 [社群](https://pub.dev/packages/auto_updater) [套件](https://pub.dev/packages/squirrel) 提供了此功能。因此,它不是我們優先考慮提供額外套件的項目。請參閱 [pub.dev](http://pub.dev) 以獲取自動更新套件及其相關文件。

A horizontal bar chart showing documentation requests for desktop with publishing apps, automatic updating, and FFI being the most requested.
Which of the following desktop-specific topics do you wish was better documented?

下一步是什麼?

在 2023 年,Flutter 團隊將根據您的回饋優先考慮工作。我們正在積極研究多視窗和原生選單列的解決方案。拖放也是我們的首要任務之一。正在進行任務分析,以確定如何使應用程式部署更有效率;有關此主題的額外文件即將推出。我們還正在努力改進 Flutter DevTools,以便您更好地監控應用程式效能並修復記憶體洩漏。最後,我們正在建立程式碼實驗室並調查對 flutter_adaptive_scaffold 套件的改進,以幫助開發人員使用 Flutter 建立自適應的跨平台應用程式。

現在我們已經設定了基準,我們將實施這些改進,並與 Flutter 開發人員聯繫以衡量我們的成功。因此,請關注未來的 Flutter 調查!

感謝所有在 Q3 Flutter 調查中提供桌面回饋的人,並感謝那些抽出時間在 Flutter Vikings 與我們交談的人!您的回饋意見價值連城。如果您希望參加季度調查之外的未來研究,您可以 [註冊參加即將舉行的 UX 研究](https://docs.google.com/forms/d/e/1FAIpQLSe0i4De809KXVCdljGKrjMj3lxhuzbuFKCtY5PEQPCYtGxFMg/viewform)。


我們如何改進 Flutter 的桌面體驗? 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

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