---

theme: smartblue

Flutter Forward 作為一場 Flutter 的突破性發佈會，事實上 Flutter 3.7 在大會前已經發布 ，所以本次大會更多是介紹未來的可能，核心集中於 come on soon 的支援，所以值得關注的內容很多，特別是一些 Feature 讓人十分心動。

開始之前

按照慣例，在展望未來之前需要先總結過去，首先，到目前為止已經超過 700,000 個已釋出應用使用了 Flutter，例如騰訊知名的 PUBG 再次登上了大會 PPT。

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- |

另外，如 Google Classroom 團隊也分享了他們使用 Flutter 開發的經歷和收穫，包括了程式碼複用率和開發效率等。

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- |

“使用 Flutter，我們將相同功能的程式碼大小減少了 66%……這意味著每個平臺的錯誤更少，未來的技術債務也更少。”（Kenechi Ufondu，Google 課堂軟體工程師）

另外從 Flutter 目前的使用者資料情況看，當前階段 Flutter 還是很受歡迎的。

而關於 Flutter 3.7 部分這裡就不再贅述，感興趣可以看前面已經發布的 Flutter 3.7 的更新說明 。

本次 Flutter 還安利了兩個低程式碼的友商平臺：FlutterFlow 和 WidgetBook 。

不得不說它們的成熟度都挺高的，例如 FlutterFlow 的線上除錯執行和翻譯支援就相當驚豔。

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- | | | |

另外 WidgetBook 作為開源專案，它支援 Flutter 開發者針對自己的控制元件進行分類歸納，同時可以在使用 Widgetbook Cloud 的情況下，將 Widget 與 Figma 同步並和團隊共享，為設計和開發人員提供更靈活的協作工具。

FlutterFlow 並不是完全免費哦。

Dart 3 alpha

本次大會的另外一個重點就是 Dart 3 alpha ，其實在此之前官方就有提前預熱過，在《Flutter 的下一步， Dart 3 重大變更即將在 2023 到來》 裡我們就提前預覽過對應更新，其中大家最關注的莫過於 Records 和 Patterns 。

Records 支援高效簡潔地建立匿名複合值，不需要再宣告一個類來儲存，而在 Records 組合資料的地方，Patterns 可以將複合資料分解為其組成部分。

例如要將 geoLocation 上面的返回值（由一對整陣列成的記錄）解構為兩個單獨的 int 變數 lat和 long，就可以使用這樣的 Patterns 宣告。

Patterns 是完全型別安全的支援，並且會在開發過程中進行錯誤檢查。

你還可以對值的型別進行 Patterns 匹配，通過 switch可以使用匹配型別的 Patterns ，以及每種型別的欄位。

當然，Dart 3 還有一個重點就是 100% 空安全的要求，也就是不再支援非空安全的程式碼，這對於舊專案來說是很大的挑戰，相信還是有相當一大部分人的 Flutter 專案一直維持在低版本。

Dart 3 還進行了很大程度的優化， 例如 Dart 3 進行了清理一些不必要的 API ，同時對編譯做了很大的優化，例如下圖是變異後的程式碼對比。

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- |

另外 Dart 3 將支援更多的平臺架構，例如 RISC-V ，同時還在覆蓋 Windows 上的 ARM64 支援，而 Web 上 Dart 3 也將可以脫離 Flutter 直接支援 WebAssembly (Wasm) 。

最後在新工具的支援下，Dart 可以根據 C/ObjC/Swift/Java/Kotlin 程式碼的標頭檔案/介面檔案，自動建立具有 Dart 介面的繫結，以及那些跨語言呼叫所需的自動繫結，也就是 FFIgen + JNIgen。

具體可見：https://github.com/flutter/samples/blob/main/experimental/pedometer/README.md

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- |

Web

本次還有一個驚喜就是 add-to-web 要來了， 一個叫做 element embedding 的支援即將到來。

element embedding 允許將 Flutter 新增到任何 Web <div>中 ，當以這種方式嵌入時，Flutter 就變成了一個 Web 元件與 Web DOM 完全整合，甚至可以使用 CSS 來設定父 Flutter 物件的樣式。

例如將 Flutter 嵌入到基於 HTML 的網頁中，然後使用 CSS 旋轉效果，並且在旋轉時 Flutter 內容仍可以互動。

同時 Dart 3 還對 Pub 上的 js 包進行了一些重大更改，從而實現 JavaScript 和 Dart 之間可以直接呼叫，如裡使用 @JSExport 屬性註釋 Dart 程式碼中的任何函式，然後從 JS 程式碼中呼叫它。

除此之外 Flutter Web 也有一系列的優化計劃，其中針對體積大小的優化是最重要的指標之一。

從官方提供的資料下看，未來 Flutter Web 的載入速度將會不斷提升。

最後，現在 Flutter 支援在 Web 上的使用 Pixel shaders ，從而實現各種炫酷的視覺效果。

Flutter 新聞工具包

本次還有一個有意思但是對國內比較雞肋的介紹： Flutter News Toolkit，一個用來加速新聞應用開發的免費 Flutter 應用模板。

這是 Flutter 團隊和 GNI 合作的專案，官方宣稱與 iOS 和 Android 上的傳統雙端開發相比，在該領域使用 FNT 可以節省高達 80% 的時間。

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- |

使用 Wonderous 適應大螢幕

Wonderous 早在去年 9 月份官方就推薦過一次 ，這一次主要是介紹了 Wonderous 的下一個版本，增加了對可摺疊裝置、平板電腦和平板電腦橫向的支援。

此次迭代同時測試了 Flutter 對不同裝置格式的適配能力， 具體可見：https://github.com/gskinnerTeam/flutter-wonderous-app

Impeller

隨著 3.7 的釋出，Impeller 現在已經可以在 iOS 上進行預覽。

Impeller 針對 Flutter 進行了優化，提供了更大的靈活性和對圖形管道的控制支援。

例如使用預編譯著色器，減少執行時由著色器編譯引起的丟幀，利用 Metal 和 Vulkan 中的原始支援等等。

除了讓 UI 更流暢，Impeller 還可以在某些極端情況下顯著提高效能，比如大會介紹的一個例子：

左邊是預設渲染器，右邊是 Impeller，可以看到滾動是左側因為效能問題導致幀速率為 7-10 fps，而右側 Impeller 可以穩定在 60 fps 。

3D

本次最後一個亮點就是 Flutter 未來將正式支援 3D 渲染，同時也代表著 Flutter 在遊戲領域的更進一步。

其實從去年的 I/O 也好，還有本次 Flutter Forward 提前預熱的相關內容，可以看到 Flutter 進軍遊戲領域一直沒有停歇。

在本次演示中，除了支援 3D 渲染之外，還支援對 3D 檔案資源進行 hotload 、新增動畫支援。

| | | | ----------------------------------------------------------- | ----------------------------------------------------------- |

可以看到，在演示中多個 3D 模型同時渲染動畫的情況下，畫面依然可以流暢執行，這絕對是本次 Flutter Forward 最讓人期待的特性。

最後官方還演示了在低端 iPhone 上的 3d 遊戲場景（有指紋解鎖的老 iPhone ），可以看到畫面還是相當流暢。

最後

看完之後你是不是蠢蠢欲動？但是這裡面絕大多的都還只是開發中，可能會在未來可能還會有其他變動，而本次 Flutter Forward 展示它們的目的，相信也是官方想讓大家更直觀地瞭解 Flutter 未來的方向。

最後總結一下，本次 Flutter Forward 主要的核心內容有：

• Impeller
• 3D 支援
• add-to-web 支援
• Dart 3

讓我們期待未來 Flutter 的更新能讓這些 Feature 都能用上吧，在沒有坑的情況下～