yii.
← Writing
Flutter 技術 · · 8 min read

Flutter 3 with some good stuff!

這篇寫於 2022 年。工具和 API 變化很快，部分步驟可能已經不適用。

支援新版 Dart2.17

https://medium.com/flutter/introducing-flutter-3-5eb69151622f

Intro#

Google IO 2022 發佈了Flutter 3，它是一個全新且完整的版本，但實際造成的影響多寡，取決於你是哪種使用者。身為一個本來就透過Flutter框架開發Android、iOS的人，或許會覺得更新與改動不大。但如果在觀察Flutter能否當作開發核心，以及對多平台適配、支援性或是效能有疑慮的人，想必這次升級會讓你愛上

本文主要參考官方以及許多影片、文章提供的資訊，希望大家能快速了解Flutter 3 的魅力

全面性的平台支援#

這次新增了MacOS、Linux的穩定支持，可以安全地開發桌面應用程式。加上原本支援的Android、iOS、WEB、Windows，移動端與桌面端皆到齊，讓開發完成的APP同時部署到手機、平板、網頁與桌面，大大節省開發週期與提升效率

在 macOS 上，支援 Intel 和 Apple Silicon( Mac、M1 Mac)，提供通用二進制文件，允許應用打包成可在兩種架構上運行的可執行文件，高質量且更快的編譯速度

在 Linux 上，Canonical 和 Google 合作提供了一個高度集成的、最佳的開發選項

如果要在原生(Android、iOS)的專案上將 Flutter 導入，可以查看此官方教學

支援macOS選單#

使用 Flutter 提供的 PlatformMenuBar Widget 進行實作，輕鬆實現桌面應用的多層選單列，輕鬆與其中選項互動

https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0

指令創建 ipa 檔案#

簡化iOS應用的發布流程

  1. 使用指令創建 Xcode 檔案（.xcarchive文件）和應用程序（.ipa文件）
* flutter build ipa --export-method ad-hoc
* flutter build ipa --export-method development
* flutter build ipa --export-method enterprise

\2. 使用指令xcrun altool進行驗證與上傳檔案

\3. 完成後，應用即可發佈到 TestFlight 或 App Store

也可以透過App Store裡的 Transporter 輕鬆將應用檔案上傳到 Apple

Firebase 正式支援 Flutter#

Flutter 終於被納入成核心的一員，未來的專案可以更輕鬆的引進 Firebase 服務，不用再煩惱Android與iOS端，幾個點擊就能完成了

另外 flutterfire_ui 套件，提供登入流程的範例，包含常用的用戶登入、驗證和其他的畫面UI，可以參考及使用

https://console.firebase.google.com
https://console.firebase.google.com

Firebase Crashlytics#

Crash Reporting Tool，可以在錯誤、例外發生時記錄StackTrace，這包括重要的警告和提示訊息，也能更快地對問題進行分類、排序和修復，幫助開發時更快掌握應用的穩定性

Flutter Casual Games Toolkit#

https://medium.com/flutter/introducing-flutter-3-5eb69151622f

遊戲工具包，它提供最佳實作的入門範例、學習資源以及廣告數據

官方創建了一個有趣的彈球臺遊戲，由 Firebase 和 Flutter 的網絡實現。遊戲內圍繞 Google 最喜歡的四個吉祥物來設計，包括Flutter 的 Dash、Firebase 的 Sparky、Android 機器人和 Chrome 恐龍，有趣的UI與遊戲效果讓人喜歡。大家可以盡力遊玩，累積分數與其他人競爭

https://pinball.flutter.dev/#/

折疊手機的適配#

Flutter 3 提供有關於折疊相關的屬性與元件，MediaQuery現在支援一些DisplayFeatures，包含設備的邊界和狀態，例如：hinges、folds 和 cutouts。此外，DisplayFeatureSubScreen元件有定義本身的child widgets不會與邊界重疊，並且已經支援 dialogs 和 pop-ups，能夠立即與這些元件互動

https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0

升級 iOS 手機的刷新率#

渲染引擎能夠更好地處理可變刷新率，實現120hz效果，在執行滾動操作時可以擁有更舒適的體驗

Flutter Web 性能優化#

使用新的 ImageDecoder API，市面上的瀏覽器Chrome、Edge、Opera與Firefox皆支援，執行非同步的圖像解碼，讓大量圖片載入的速度提升兩倍以上，且不阻塞主線程，實現同時現滾動網頁同時顯示圖片的順暢效果

Web Lifecycle API#

預設在html部分加上生命週期的掌控，在啟動時可以顯示自定義的啟動畫面、載入進度條等UI

https://docs.flutter.dev/development/platform-integration/web/initialization

Dev Tools 升級#

Performance的面板裡，擁有 Enhance Tracing 強化版的追蹤功能，包含三個選項Track Widget Builds、Track Layouts佈局和Track Paints繪製，還可以過濾掉一些渲染類型，例如：Clip、Opacity、Shape，讓開發者縮小範圍更精準的找到關鍵問題

Material 3 Design#

Material Design Language的新版，支援更多的元件可以在UI呈現時有不同的效果。這個部分也是對於開發者會比較有感的更新

調整MaterialAPP widget上的theme，幫ThemeData加上useMaterial3參數，並設置為true，迎接新版的設計風格(預設為Material 2)

持續關注官方flutter issue #91605，了解Material 3對於Widget的支援性與進展(目前還有許多元件還沒有進行升級)

主題擴展(Theme extensions)#

使用定義好的開發流程去擴展自定義主題風格，方便取得指定的顏色集合，針對Widget使用特殊的顏色名稱。官方有提供實作範例

https://github.com/guidezpl/flutter/blob/master/examples/api/lib/material/theme/theme_extension.1.dart

棄用的API與Widget#

  • 有些 Deprecated API 在Flutter 3已全面停用，需優化原有的程式碼
  • 常用按鈕，包括FlatButton、RaisedButton與OutlineButton，轉換成TextButton、ElevatedButton、OutlinedButton
  • SnackBar現在需要使用ScaffoldMessenger進行顯示

新專案納入 flutter_lint 2.0#

程式碼檢查工具，官方鼓勵開發者將專案升級到v2，確保開發時的最佳規範

flutter pub upgrade --major-versions flutter_lints
https ://pub.dev/packages/flutter_lints/versions/2.0.0
https ://pub.dev/packages/flutter_lints/versions/2.0.0

Dart 2.17#

強化版的枚舉 Enum#

可以像Class一樣定義，包含常用的property、constructor、getter、function，甚至是複寫父類的方法，例如：toString()

Super Constructor 建構子#

這個更新是我最喜歡的部分，可以立即優化專案的品質，避免冗長無聊的樣板程式碼，馬上撰寫馬上有感

Name Arguments 命名參數#

原本Dart限制有名稱的參數需要放在後面，但現在取消了，我們開發時可以靈活調動參數的位置，沒有任何的限制

知名的 Flutter 應用#

Line 購物、Alibaba 閒魚、BMW、Nubank、SHIEN、Fastic、Superlist…

https://flutter.dev/showcase

外部想法#

  • Academind主持人說到：Flutter Web目前沒有帶來強勁的影響，與使用傳統Web技術建置的網站相比，性能與可用性還有待觀察
  • Filip Hráček：Flutter is like Unity for apps.

參考#

其他文章#

關於我#

贊助#

謝謝你！這是一個很長的文章而且你花費時間看完，真的非常感謝。

還有一件事， 如果覺得文章不錯可以贊助我，讓我有更多的動力和熱情分享 學習筆記和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

最後#

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章，也請別忘記給我拍手哦 (最多可以達到50次)！

本文原刊登於 Medium。