RainVisitor Blog

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

關於 Firebase SDK、快速修復和重構，以及目標平台

在過去的幾年中，超過 10,000 名 Flutter 開發人員參與了每季度的使用者調查，以提供回饋給 Flutter 團隊。最近一季也不例外——Flutter 團隊希望收集開發人員關於四個主題的回饋：1）Firebase SDK，2）快速修復和重構，3）目標平台，以及 4）桌面支援。在這些主題中，調查向每位受訪者展示了兩個隨機主題。感謝所有回覆的開發人員！

本文將涵蓋前三個主題的結果。我們將在另一篇文章中涵蓋最後一個主題（桌面開發）。

在深入探討前三個特殊主題的結果之前，我們想報告一下 Flutter 開發人員仍然非常喜歡這個框架。在調查的受訪者中，55% 的人對 Flutter 非常滿意，另外 38% 的人對 Flutter 有點滿意。這使得滿意的開發人員總數達到 93%。這個數字在過去三個季度一直很穩定。非常滿意 的開發人員比例略微下降至 55%。我們計畫追蹤這個指標，並研究是什麼可能導致開發人員的滿意度從 非常滿意 降至 有點滿意。

如 圖 2 所示，我們的受訪者非常喜歡核心框架、Android 支援和 Material Widgets。我們最大的機會在於 Cupertino Widgets 和 Web 支援。我們將繼續研究改善這些領域的開發人員體驗所需做的事情，並進一步投資以推動其進步。如果您想參與未來的使用者研究，可以在 flutter.dev/research-signup 上註冊。

Flutter 的 Firebase SDK

Flutter 開發人員使用 Flutter 的 Firebase SDK（又名 FlutterFire）來使用 Firebase 提供的工具和服務。這些包括驗證、資料庫、分析和訊息。目前，在 pub.dev 上有十五個穩定的 Firebase Plugin 套件 可用。由於這些套件被廣泛採用，我們想探討一下什麼樣的學習材料能夠提高其可用性。

我們學到的最有用的資訊是開發人員在嘗試使用各種 Firebase 套件時遇到的問題。如 圖 3 所示，開發人員指出「缺乏實際範例」是他們在嘗試使用新的 Firebase 套件時遇到的最常見問題（14.2%）。這對於具有許多活動部件的複雜套件來說尤其成問題，例如 firebase_messaging 或 firebase_dynamic_links。為了解決這個問題，我們將在 Firebase 文件 中加入更多範例應用程式。我們將加入兩種類型的範例應用程式。第一種，「快速入門範例」將涵蓋特定 Firebase 套件的使用。第二種將提供更複雜的實際範例應用程式，這些應用程式使用多個 Firebase 套件。

在調查中，一些開發人員還選擇了「API 設計過於複雜或不方便」。這個結果在許多套件中都一致，例如 firebase_database、firebase_in_app_messaging，包括前一節中提到的套件。我們發現這個結果值得注意。雖然一些 API 很簡單且很小，但它們涵蓋的概念，例如異步資料，並不像那樣簡單。有鑒於此，我們將努力簡化學習材料。此外，我們還將努力使新舊 API（用於工具和服務）盡可能易於理解。

「總體而言，文件品質很低」是前三個問題中的最後一個。為了回應這個需求，我們計畫改善 Flutter 開發人員的 Firebase 文件。我們將在 Firebase 文件中為 Firebase UI 套件（例如 Firebase UI for Auth）新增新章節，並在整個文件中新增更多程式碼範例。這些改進將在未來幾個季度陸續推出。

快速修復和重構

在 2022 年的第一個調查 中，開發人員指出，快速修復和重構是我們 IDE 中最缺乏的或支援不足的功能。如 圖 4 所示，我們在 IDE 中支援快速修復和重構，但我們想了解開發人員為什麼認為 IDE 缺少或沒有支援這些功能。

首先，我們了解到超過一半的受訪者認為快速修復和重構運作良好（53.1%），如 圖 5 所示。然而，34.6% 的人表示需要新增更多功能。這個數字幾乎是要求我們修復錯誤的開發人員人數的三倍（12.4%）。

然後，我們詢問那些想要新增功能的人，他們需要哪種類型的快速修復或重構功能。在設計這個問題之前，我們審查了所有相關的 GitHub 議題，並進行了一項簡短的 Twitter 調查，將各種功能請求分組。您可以在 圖 6 中看到這些組別的列表。

從這個問題中，我們了解到受訪者認為新增更多快速修復以「修復編譯錯誤、警告或 lint」比其他修復更重要（76.4% 「非常重要」），儘管這並沒有降低其他功能的重要性。我們還了解到，受訪者認為「提取或移動 Widget」比其他重構更重要（69.2% 「非常重要」）。我們現在知道，儘管我們支援提取和移動 Widget，但開發人員想要更多選項，例如將 Widget 提取到一個新檔案中。這與提交的許多 GitHub 議題相符：flutter/flutter-intellij/issues/5591，Dart-Code/Dart-Code/issues/1831，flutter-intellij/issues/4540，dart-lang/sdk/issues/35767 等等。此外，開發人員還想要更多用於重構函式庫、類別或方法（61.9% 「非常重要」）以及管理匯入（59.7% 「非常重要」）的功能。

所有這些資訊對 Dart Analyzer 團隊非常有價值，他們將審查診斷資訊，以找出更多修復的機會。該團隊已經開始為診斷資訊新增一些新的修復（將與 Dart 2.19 一起發佈），並計畫在未來版本中新增更多修復。

目標平台

Flutter 開發人員可以為六個平台建立可生產的應用程式：Android、iOS、Web、Windows、macOS 和 Linux。在調查的這一部分中，我們想知道開發人員針對了這六個平台中的哪幾個平台，以及他們是否在團隊層級使用 Flutter 進行跨平台開發。我們的問題首先詢問開發人員在哪些平台上編寫程式碼，然後詢問他們的團隊針對了哪些額外的平台。

如 圖 7 所示，大多數開發人員針對的是 Android (91.7%)、iOS (61.3%) 和 Web (35.5%)。由於這個問題允許多選，因此有一些重疊。統計選取的平台數量，只有 24% 的開發人員在上個月只針對了一個平台。在受訪者中，76% 的人針對了兩個或更多平台，其中 32% 的人針對了三個或更多平台。

此外，我們想知道有多少開發人員屬於開發團隊，團隊成員針對的平台與他們自己不同。例如，開發人員 A 針對 Android，而開發人員 B 針對 iOS。如 圖 8 所示，40% 的開發人員表示他們有同事正在針對與他們不同的平台工作。當我們篩選出那些表示他們自己只針對一個平台的開發人員時，這個數字上升到 61%。

合併起來，我們可以計算出 91% 的 Flutter 團隊是活躍的跨平台開發團隊（24%*0.61 + 76%）。至少有 72% 的受訪者為 Android 和 iOS 開發了應用程式。在所有受訪者中，34% 的人針對了 iOS、Android 和 Web，12% 的人針對了 iOS、Android、Web 和 Windows。

接下來要做什麼？

我們希望提供一個很好的開發體驗，最大限度地提高生產力。我們從這項調查和其他調查中獲得的見解非常有價值。我們將利用這些結果來優先處理工程任務和對 Flutter 開發人員有用的教育內容。

我們將在 2023 年回來，帶來更多調查結果。在那之前，我們將發表一篇獨立的文章，介紹我們從桌面支援研究中學到的東西。下一篇文章見！

我們從 Flutter 2022 年第三季度調查中學到了什麼 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

使用兩個鍵盤支援六個平台

Flutter 的魅力在於輕鬆地為六個平台開發應用程式。痛苦之處在於在六個平台上驗證你的應用程式。

我正在撰寫一個程式碼實驗室，使用 Dart 的外部函式介面 (FFI) 整合來自 iOS、Android、macOS、Linux 和 Windows 的 C 程式碼。這個故事描述了如何在不淹沒我的書桌在裝置的情況下，為 Flutter 支援的所有平台開發。

接受你需要不止一台機器。當你計劃至少在六個平台的子集中建立你的應用程式時，請考慮這並沒有聽起來那麼糟糕。

我可以用兩台機器在六個平台上開發應用程式：一台 macOS 筆記型電腦和一台 Windows 11 桌機。此外，我還有兩個鍵盤、一隻滑鼠和一個魔法觸控板。

以下說明為什麼你需要這兩個平台。

從顯而易見的開始：你需要一台 macOS 機器來為 macOS 和 iOS 開發。蘋果是這麼說的。在 Windows 上為 Windows 開發。這是 Flutter for Windows 預設支援的，因此它是鋪好的道路。Flutter 支援在 macOS 或 Win11 或兩者上進行 Web 和 Android 開發。出於鍵盤熟悉度的原因（我在 macOS 上已經超過十年了），我使用 macOS。

Windows 11 上的 Windows Subsystem for Linux 版本 2 或 WSL2 避免了我需要三個完整的鍵盤。當你在 Ubuntu Summit 上向滿屋子 Linux 狂熱者發表關於 WSL2 的主題演講時，你開始理解過去二十年世界發生了多大的變化。

WSL2 中的 Linux 支援超越了運行圖形化 Linux 應用程式。Visual Studio Code 為 WSL2 主機開發提供了出色的支援。WSL2 在其 Linux 環境內運行 VS Code 的無頭版本，並從 Windows VS Code 實例控制它。這使得 Windows 和 Linux 開發可以在一台機器上進行，使用相同的鍵盤快捷鍵，即使檔案系統佈局不同。

話雖如此，不要嘗試從一個共用的檔案區域運行 Flutter Windows 和 Linux 開發。是的，WSL2 允許你從 Linux 查看 Windows 檔案系統，以及從 Windows 查看 Linux 檔案系統。但是，Dart 將不知道使用哪個二進制檔。另一個小問題是你的原始碼檔案中的行尾也會被混淆。使用 Git 將程式碼傳輸到 Linux 和 Windows 之間，並配置 適當的行尾對映。你的理智會感謝你。

如果你想在 Flutter 支援的所有平台上開發 Flutter，請幫自己一個忙，同時取得一台 macOS 機器和一台 Windows 11 機器。你的編譯時間會感謝你的。

使用兩個鍵盤支援六個平台 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

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

宣布 Flutter Forward

鎖定 Flutter Forward，下一場全球 Flutter 活動，將於 2023 年 1 月 25 日從肯亞奈洛比現場直播。

現在可以註冊！

隨著今年在 Google I/O 上發佈 Flutter 3，我們完成了 四年前在 Flutter Live 上首次規劃的旅程：為行動裝置、桌面裝置、嵌入式系統和網頁裝置提供一個強大的開源 UI 工具組，用於建立令人驚豔的體驗。

現在，我們準備分享我們正在進行的一些新的投資，這些投資展示了我們計劃在未來一年左右的時間內帶領 Flutter 走的方向。

我們迫不及待地想像我們在 Flutter Live 和 Flutter Interact 中所做的那樣，將我們的全球社群虛擬地聚集在一起。在一個正在經歷快速數位轉型的世界地區，有什麼比談論未來的科技更好的地方呢？

我們很興奮能在非洲舉辦我們的下一場全球活動。不僅 Google 在該地區投入大量資金，包括在奈洛比開設我們的第一個 非洲工程中心，而且 新創事業蓬勃發展，數十萬開發人員在非洲互聯網經濟中工作。這是為您提供 Flutter 未來一瞥的完美場所。

以下是可以從活動中期待的事項：

主旨演講

在我們現場直播的主旨演講中，我們將展示我們正在進行的工作 - 並展示更廣泛的社群中其他人在使用 Flutter 時所做的事情 - 以推動 UI 開發的進步。

#AskFlutter 直播

#AskFlutter 將回歸，回答您渴望提出的所有問題，從平台特定的詢問到為何 Dash 總要擁有銳利的喙，從不彎曲。

技術演講

與往常一樣，我們將透過一系列技術演講來擴展主旨演講，涵蓋最新消息、熱門話題，以及使用 Flutter 建立驚豔體驗的秘訣和技巧。

觀看派對

如果您想與其他人一起觀看 Flutter Forward，請參加全球 300 多個城市中其中一個的當地觀看派對。如果您的附近有派對，請務必參加，以便與當地 Flutter 開發人員建立人脈並向他們學習。

敬請期待

自我們上次活動以來，社群規模已大幅擴大，但它仍然是 Flutter 的生命線，也是 Flutter 不斷發展的故事背後的動力。我們非常感謝能再次將全球 Flutter 社群聚集在一起。

在 1 月 25 日之前，我們還有很多計劃，所以 立即註冊，確保您不會錯過議程公告，在您附近找到觀看派對的機會，以及我們為您準備的幾個驚喜。

註冊後，請關注我們的 Twitter，LinkedIn，並訂閱 Flutter YouTube 頻道，以確保您不會錯過 Dash 的任何多元宇宙冒險。

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

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

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

Introducing the Flutter News Toolkit - 現在接受申請

成為首批使用 Flutter News Toolkit 推出新聞行動應用程式的先驅

過去二十年來，我們獲取新聞的方式發生了巨大的變化。市場研究表明，美國智慧型手機使用者中有 88% 的時間花費在應用程式上，而不是行動網頁瀏覽器上。然而，對於通常資源有限的新聞出版商來說，行動應用程式可能很困難且成本高昂。

建立一個高品質的行動新聞應用程式是一項重大工作：您需要包含豐富的閱讀體驗、出色的導航和搜尋、驗證、廣告整合、通知、個人資料和訂閱，以及量身打造的設計體驗。此外，您還必須針對多個平台（例如 iOS 和 Android）完成所有這些工作，並持續使用最新功能更新您的應用程式，並保持多個產品同步。這對於擁有品牌組合的大型新聞機構來說是一項巨大的努力，以及對於負擔不起專門為每個平台組建大型應用程式開發團隊的小型出版商來說也是如此。

我們投入了資源來幫助新聞機構解決這個問題，利用業界最佳實務和 Google 的強大新工具組。

Introducing the Flutter News Toolkit

我們很高興地宣布 Google 的 Flutter 團隊正在與 Google 新聞倡議 (GNI) 合作，推出 一個免費的工具組，該工具組允許出版商透過將應用程式開發時間縮短高達 80% 來更快地為 iOS 和 Android 建立行動應用程式。

Flutter News Toolkit 是一個易於使用的範本，新聞機構可以在其基礎上建構應用程式，並且包含針對常見使用者介面和應用程式功能的範例程式碼區塊。

我們與世界各地的產業專家和新聞出版商密切合作，了解新聞應用程式的最關鍵功能和使用者工作流程，並整合了 News Consumer Insights 的最佳實務，以幫助您透過 Flutter News Toolkit 達成更高的讀者參與度並實現財務目標。

Flutter News Toolkit 包含關鍵功能，例如：

• 使用者入學
• 帳戶建立/登入
• 內容供應源和內容頁面
• 分析
• 通知
• 社交分享
• 訂閱
• 廣告

您可以直接使用這些預先整合的功能，或者輕鬆地修改和替換您喜歡的其他功能。

Flutter News Toolkit 的早期採用者

Flutter News Toolkit 的早期採用者之一是 Hespress，它是摩洛哥最大的新聞網站之一。Hespress 一直希望透過建立一個針對英語使用者的行動應用程式來接觸更多受眾，但沒有足夠的資源來開始。透過 Flutter News Toolkit，Hespress 能够在 6 週內完成完整的應用程式開發，並且最近推出了他們的應用程式 Hespress English。

“Flutter News Toolkit 使用起來很直觀，並且可以自訂，使其看起來和感覺起來像一個真正的 Hespress 應用程式，”Hespress 總經理 El Guennouni Hassane 表示。“它包含我們所需的所有核心功能、區段和佈局。它幫助我們節省了幾個月的開發時間，並優化了重新設計我們的英文應用程式的整個流程，同時維護一個程式碼庫而不是兩個。”

立即申請以存取 Flutter News Toolkit

隨著我們推出 Flutter News Toolkit，我們將為有興趣在未來 3-6 個月內推出新聞行動應用程式的出版商提供有限的名額。此計畫開放向世界各地的所有出版商和任何語言申請。我們將隨著時間推移擴展我們的計畫，但以下是一些您現在加入可以獲得的優點：

• 免費存取 Flutter News Toolkit 的所有原始碼和分步指南
• 能夠按照您的意願修改、刪除或新增新功能
• Google 在 Play 商店和 Apple 商店推出自訂應用程式的協助
• 在 Google 的行銷材料中展出的機會

請填寫申請。隨著我們在未來幾個月內推出一般可用性之前改進產品，我們將分批吸納新的出版商。我們期待幫助更多新聞機構擴展其數位影響力、建立受眾關係，並透過多元的收入來源打造可持續的商業模式。

常見問題解答

什麼是 Flutter？

Flutter 是 Google 的開源 UI 工具組，用於從單一程式碼庫建立適用於行動、網頁和桌面的精美應用程式。Flutter 大大縮短了建立和發佈應用程式所需的時間。今天，Flutter 是 最流行的跨平台 開發框架，在全球擁有超過 300 萬名開發人員。有超過 50 萬個 Flutter 應用程式，包括阿里巴巴、BMW、Google Pay、PUBG、Shein 和微信。

Flutter 容易學習嗎？

是的，對於懂其他程式語言（如 Java）的開發人員來說，學習 Flutter 很快。此外，我們還提供了大量的 學習資源 供您開始使用。

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

當然可以！Flutter News Toolkit 僅旨在提供範例。您不需要使用任何您不想要使用的服務。事實上，可以輕鬆地移除或替換現有的整合，使用其他服務。例如，如果您想使用非 Google 廣告服務，您可以在 `pub.dev` 上找到其他 套件。

我需要做多少工作才能推出應用程式？

雖然新聞範本可以降低建立新聞行動應用程式的進入門檻，但這個解決方案仍然需要 Flutter 開發工作。範本不支持无代码或所见即所得的功能或工具（例如仪表板），以便非技术用户修改应用程序品牌和样式。

我們已經規劃了部署流程，並假設有 2-3 位 Flutter 工程師參與此專案。舉例來說，Hespress 等早期採用者在 6 週內完成了他們的應用程式開發。

如果我沒有內部開發團隊，如何使用範本？

我們可以推薦 Flutter 機構，協助您將範本完成。聲明免責聲明，Google 與這些機構無關，我們也不會從他們那裡獲得任何利潤分攤。

Introducing the Flutter News Toolkit - 現在接受申請 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

研究 Flutter 開發人員的 IDE 使用情況

2022 年第二季使用者調查結果。作者：李家 Young 和 Ander Dobo

Google 的 Flutter 團隊目前為 Android Studio（基於 IntelliJ-IDEA）和 Visual Studio Code（VS Code）建立和維護支援。我們在這些 IDE 的插件中整合了 Flutter 應用程式開發功能，例如程式碼完成、語法高亮、Widget 編輯輔助、運行和除錯支援等等。自 Flutter 最初推出以來，Flutter 開發人員一直使用這兩種 IDE，Android Studio 傳統上比 VS Code 更受歡迎。如以下圖所示，VS Code 的普及速度比 Android Studio 快，最近在 Flutter 開發中也超越了 Android Studio 的普及程度。

為了更好地了解 Flutter 開發人員在 IDE 選擇背後的思考，Flutter UX 團隊在 2022 年 5 月針對這個主題進行了一項調查。

• 在本文的其餘部分，「Android Studio」代表 Android Studio 和 IntelliJ-IDEA。

我們之前對 IDE 的了解

除了 Flutter 開發人員在 2022 年初在 Android Studio 和 VS Code 之間的比例為 50:50 之外，我們還根據之前的調查對開發人員的選擇有了更多了解。

Flutter 開發人員傾向於使用他們熟悉的 IDE

在 2019 年第三季，我們詢問 Flutter 開發人員為什麼他們最喜歡他們使用的 IDE。最常見的選擇是 IDE 對他們來說「更熟悉」。

VS Code 使用者重視他們在 IDE 中體驗的速度

上述圖表（圖 2）的另一個值得注意的地方是，68% 的 VS Code 使用者選擇 IDE 是因為它比其他 IDE 快，而只有 12% 的 Android Studio 使用者這麼認為。在一個開放式問題中，VS Code 使用者表示他們喜歡 IDE，因為它輕量級但有很多擴展。

VS Code 使用者對 Flutter 的 IDE 支援感到更滿意

我們還詢問了對 Flutter 的 IDE 支援的滿意度，VS Code 使用者往往更滿意。（當開發人員從 IDE 中打開調查時，我們會記錄他們使用的 IDE。當開發人員點擊調查連結時，我們會通知他們有關此記錄。）

當然，Android Studio 是專門為 Android 開發而設計的完全整合 IDE，因此它在這個目的上具備更豐富的功能集。開發人員表示，在 Android Studio 中處理原生 Android 程式碼和使用重構等便利功能很容易。在下一節中，我們將更深入地探討偏好，以及為什麼開發人員對這些優勢感到不滿意，而沒有在 Android Studio 中使用 Flutter。

我們從 2022 年第二季調查中學到了什麼

上述結果讓我們想知道，為什麼 Flutter 開發人員對 VS Code 的支援比對 Android Studio 的支援更滿意。我們想要了解 Flutter 開發人員真正喜歡 VS Code 的地方。

為了了解這一點，我們向開發人員詢問了一組問題，這些開發人員將他們的首要 IDE 從一個 IDE 切換到另一個 IDE，無論方向如何。我們相信這些開發人員能夠從他們的角度告訴我們每個 IDE 中的獨特價值。

首先，將主 IDE 從 Android Studio 切換到 VS Code 的 Flutter 開發人員更多。

如以下圖表所示，那些切換到 VS Code 的開發人員喜歡它的效能（82%）和可用性（63%）。另一方面，那些切換到 Android Studio 的開發人員喜歡它的功能（51%）、與 Flutter 工具的整合（39%）和原生平台（27%）。

儘管如此，約有 23% 的 Flutter 開發人員同時使用 VS Code 和 Android Studio。當我們詢問他們為什麼使用不止一個 IDE 時，出現的最突出的主題是 VS Code 使用者需要使用 Android Studio 和 Xcode 才能實現特定於原生的功能，例如模擬器設定、構建配置、發佈要求（例如金鑰生成和簽署），以及在開發混合 Flutter+原生應用程式時。

我們從調查中獲得的另一個見解是，來自不同國家或地區的 Flutter 開發人員偏好不同的 IDE。雖然大多數 Flutter 開發人員更喜歡 VS Code 而不是 Android Studio，但來自中國大陸的開發人員更喜歡 Android Studio（56%）而不是 VSCode（23%）。我們發現這很有趣——Flutter 在全球範圍內被採用，但在不同的開發環境中使用。如果您有來自您國家或地區的任何故事要與我們分享關於這種趨勢的資訊，請在本文下方留言。

總結

我們的目標是提供一個有用且完整的開發體驗，最大限度地減少開始使用 Flutter 的摩擦，並最大限度地提高開發人員的生產力。我們將考慮這些和未來的研究結果，為未來 Flutter IDE 支援和文件制定路線圖。作為第一步，我們正在對網站的入門文件進行一些小的更新，以反映上述 IDE 偏好和使用模式。

我們從這項調查和其他調查中獲得的見解對我們來說非常寶貴，並確保我們投資於正確的領域，以繼續改善 Flutter 開發人員體驗。感謝所有參與的使用者！如果您有興趣參加未來的使用者研究，您可以透過 https://flutter.dev/research-signup 註冊。我們將在下個季度回來分享第三季度的調查結果。下篇文章見！

研究 Flutter 開發人員的 IDE 使用情況 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

在 Flutter Vikings 大會上宣布 Flutter 3.3

來自美麗的挪威首都奧斯陸的問候，Flutter 社群的成員們正聚集在 Flutter Vikings 大會。Flutter Vikings 是一個為期兩天的由社群驅動的開發者活動，有來自世界各地的專家的三個內容曲目。迄今為止，已有超過 5,000 名開發者註冊，雖然現場活動已售罄，但您仍然可以 免費觀看所有線上課程。

Flutter 不斷成長，無論是在使用率還是生態系統規模方面。每天，都有超過 1,000 個使用 Flutter 研發的手機應用程式被發佈到 Apple 和 Google Play 商店，以及更多在網頁和桌面上的使用。而 Flutter 套件生態系統 現在包含超過 25,000 個套件，進一步證明了它的成熟度和廣泛性。

今天我們宣布 Flutter 3.3。 這個版本重點放在強化 Flutter 3 中發佈的功能的細化和效能改進。它擴展了對不斷發展的 Material 3 規範的支援，包括幾個新的元件和許多錯誤修復，並且包含針對平板電腦和桌面開發者的新功能，包括 iPad 上的塗鴉手寫支援、可選文字分組和觸控板支援。這個版本還包含 Dart 2.18，它為使用 Swift 或 Objective-C 編寫的程式庫和程式碼引入了 FFI 支援。針對此版本構建的應用程式將在桌面、網頁和行動裝置上體驗到效能提升，因此我們鼓勵您運行 flutter upgrade 以在所有開發者工作站上獲取最新版本！

若要深入了解所有新功能和改進，請查看 Flutter 3.3 發行說明 和 Dart 2.18 宣布部落格文章。

Wonderous：一個新的參考應用程式

與 gskinner 的設計團隊合作，今天我們推出 Wonderous，一個專門用來展示 Flutter 的能力，可以無縫交付高階、美麗的體驗的應用程式。即使它展示了 Flutter 的強大功能，我們也共同打造了 Wonderous，使其本身成為一個美麗的應用程式。從印度阿格拉令人驚嘆的泰姬瑪哈陵到墨西哥尤卡坦半島的奇琴伊察瑪雅遺址，Wonderous 將世界上一些最非凡的地方帶到您的手機上，使用影片和影像探索藝術、歷史和文化的交匯點。

Wonderous 是一個我們希望您與家人和朋友分享的應用程式，但它也是一個您可以作為開發者探索的開源專案。作為一個真實世界的應用程式，它提供了一系列視覺技巧和最佳實務的綜合示例，我們認為這些技巧和實務會激勵中級到高級開發者。在接下來的幾週裡，gskinner.com 團隊將分享更多有關應用程式製作的技術文章，包括對無障礙功能的支持、可泛化的動畫技巧以及效能的提示和技巧。

若要進一步了解我們開發 Wonderous 的動機，以及與其相關網站、Android 和 iPhone 應用程式以及原始碼的連結，請查看 Flutter 部落格上的 獨立文章。

Impeller：我們的全新圖形引擎

除了 3.3 本身的改進之外，團隊一直在努力開發 Impeller，我們的下一代渲染層。

Impeller 是對 Flutter 引擎核心部分的大規模重寫，它用自訂運行時替換了以前的 Skia 程式碼，該運行時充分利用了現代硬體加速圖形 API，例如 iOS 上的 Metal 和 Android 上的 Vulkan。它提供絲般順暢的動畫，大幅提升了應用程式可以從多平台 UI 工具包中期待的水平。這種差異是直觀的，使用 Impeller 的應用程式可以期待能夠比以前更進一步地突破界限，同時保持鎖定在 60Hz 或更快的更新率。最值得注意的是，Impeller 完全消除了對運行時著色器編譯的需要，而這正是當今應用程式中造成畫面更新率「卡頓」的常見原因。

雖然它尚未完成所有功能，並且我們仍在優化效能，但我們現在正在 Google 級別的應用程式上進行內部測試。如果您從 Apple App Store 下載 Wonderous for iPhone，您將在一個產品級別的應用程式上看到 Impeller 的實際運行。

我們很興奮地宣布，現在可以將 Impeller 作為 iOS 上的早期採用者預覽版提供。 Impeller 不需要更改您的程式碼，除了 啟用標誌 之外。有關 Impeller 架構和如何啟用的更多資訊，請 參閱我們的 Wiki。在開發過程中，Impeller 的早期採用者應該切換到 Flutter 的 master channel，以確保您使用的是最新的程式碼。

我們期待看到利用 Impeller 中的效能和品質改進的應用程式和演示。我們也欣賞 可重現的議題報告，這些報告顯示了當前構建中的效能或保真度回歸。

向 Eric 告別

最後，我們向 Eric Seidel 表示溫暖的告別，他是 Flutter 的聯合創始人之一，本月將離開 Google，開始新的冒險。Eric 是第一個向世界介紹 Flutter 的人，當時它還沒有名字或吉祥物，是在 2015 年的 Dart 開發者峰會 上；他管理了 Flutter 工程團隊的大部分時光，簡而言之，沒有 Eric，就不會有我們所知的 Flutter。

但 Eric 有一顆企業家的心，他的「超級力量」（用他最喜歡的詞之一來說）是作為一個創造者和發起者。因此，當他分享他的創業計畫時，並沒有讓人感到意外。因此，當他離開巢穴，開始他的下一個冒險時，我們向他送去我們的鼓勵和感謝。

以摘錄自 Flutter 1.0 發佈活動 的內容來結束這篇文章，在該活動中，Eric 分享了我們對 Flutter 的願景：一個長期的賭注，我們可以徹底改進構建美麗使用者體驗的體驗。這仍然是我們的願景，並且我們尚未完成。隨著來自世界各地的數百萬開發者依賴它，一個由數千名貢獻者組成的生態系統，以及 Google 的團隊蓬勃發展和壯大，我們希望您能繼續加入我們的旅程！

在 Flutter Vikings 大会上宣布 Flutter 3.3 最初发布于 Flutter 的 Medium，人们在那里通过突出显示和回应这个故事来继续讨论。

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

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

展示如何使用 Flutter 開發定制 UI 的參考應用程式

我們對 Flutter 的願景是為您提供一個空白畫布，讓您可以設計和繪製美麗的應用程式，不受限制。最近，我們與 gskinner 的出色團隊合作，透過建立一個新的行動應用程式 Wonderous，使這一願景成為現實。Wonderous 使用 Flutter 建立了一個高度表現力的使用者介面，該介面針對行動外觀因素量身定制，並且不符合標準設計系統。相反，Wonderous 實現了其設計師的創意願景。

在開發 Wonderous 時，我們心中有幾個目標：

1. 建立一個有趣且有用的應用程式。 Wonderous 不僅僅是一個示範，它是一個功能齊全的應用程式，允許使用者透過探索世界奇觀來探索歷史、藝術和文化的交匯點。在許多人難以旅行的時代，Wonderous 利用令人驚嘆的插圖和增強的動畫，直接在您的設備上讓這些景點的奇蹟栩栩如生。
2. 展示高品質的使用者體驗。 我們希望 Wonderous 的品質能與系統框架中的任何應用程式相媲美。Wonderous 以其量身定制的富有想像力的設計吸引觀眾，同時使用熟悉的手勢和行為來確保無縫的使用者體驗。
3. 建立一個用於測試和基準測試的應用程式。 我們已經使用 Wonderous 來測試 Impeller，這個新的渲染引擎現在可以在 iOS 上預覽。到目前為止，我們對結果感到滿意，這有助於驗證我們對改善效能的假設。從 Apple App Store 下載的應用程式版本使用 Impeller，我們渴望看到它在更廣泛的 iOS 設備上的實際條件下是如何執行的。
4. 提供一個示例的開放原始碼參考應用程式，展示最佳實務。 Wonderous 程式碼 展示了自訂設計、引人入勝的互動和新穎動畫的開發最佳實務 - 所有這些都將無障礙列為首要考量。
5. 建立一個用於學習材料和文件資源的來源。 在接下來的幾週內，gskinner 團隊將發佈更多關於 Wonderous 的內容，包括如何建立動畫、如何整合無障礙功能以及應用程式效能的最佳實務。敬請期待！

從 Apple App Store 或 Google Play 商店 [下載 Wonderous](http://wonderous.app) 後，您可能想探索以下幾個特點：

• 沒有 Flutter 可能很困難的轉場，這些轉場在奇觀之間左右滑動時特別明顯。
• 當您在全球時間軸中移動時，獨特的捲軸模式。
• 與 Wonderous 設計系統相符的定制按鈕和圖示。

我們很高興與全世界分享 Wonderous，讓我們知道您的想法！

Wonderous：使用 Flutter 探索世界 最初發表在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

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

Flutter 3.3 的新功能

文字處理、效能改進和更多令人興奮的更新！

歡迎來到 Flutter 3.3！僅僅三個月前，我們宣布了 Flutter 3，這是一個重大的里程碑，其中包含對所有平台的穩定支援！好消息是，自此重大版本發佈以來，其發展勢頭並沒有減弱。自 Flutter 3 發佈以來，Flutter 已合併了 5,687 個 Pull Request。

此版本為 Flutter 網頁、桌面、文字處理改進和效能方面帶來了更新 - 還有更多！

我們還將為 go_router 套件、DevTools 和 VS Code 擴展引入令人興奮的更新。請继续阅读以了解更多。

架構

全域選取

到目前為止，Flutter 網頁應用程式在嘗試選取文字時沒有與預期行為相符。像 Flutter 應用程式一樣，原生網頁應用程式由元素樹組成。在傳統的網頁應用程式中，您可以使用單個掃描手勢選取多個網頁元素，這在 Flutter 網頁應用程式中無法輕鬆完成。

今天，一切都改變了！隨著 SelectableArea Widget 的引入，SelectableArea Widget 的任何子元素都將免費啟用選取功能！

若要利用這個強大的新功能，只需將您的路徑主體（例如 Scaffold）用 SelectableArea Widget 包裹，然後讓 Flutter 完成其餘工作。

若要更全面地深入了解這個強大的新功能，請訪問 SelectableArea API 頁面。

觸控板輸入

Flutter 3.3 為觸控板輸入提供了增強的支援。這不僅提供了更豐富、更流暢的控制，而且在某些情況下還減少了誤解。要查看這種誤解的範例，請查看 Flutter 食譜 中的 拖動 UI 元素 頁面。捲動到頁面底部以到達 DartPad 實例，並執行以下步驟：

1. 調整視窗大小，使上部顯示一個捲軸
2. 將滑鼠懸停在上部
3. 使用觸控板捲軸
4. 在安裝 Flutter 3.3 之前，在觸控板上捲軸會拖動項目，因為 Flutter 在發送模擬的通用事件
5. 安裝 Flutter 3.3 後，在觸控板上捲軸會正確地捲軸列表，因為 Flutter 在傳送「捲軸」手勢，該手勢不被卡片識別，但被捲軸視圖識別

如需了解更多資訊，請查看 Flutter 觸控板手勢 設計文件以及 GitHub 上的以下 PR：

• PR 89944： 在框架中支援觸控板手勢
• PR 31591： iPad 觸控板手勢
• PR 34060： 重新提交「ChromeOS/Android 觸控板手勢」
• PR 31594： Win32 觸控板手勢
• PR 31592： Linux 觸控板手勢
• PR 31593： Mac 觸控板手勢 macOS

Scribble

感謝社群成員 fbcouch 的出色貢獻，Flutter 現在支援在 iPadOS 上使用 Apple Pencil 的 Scribble 手寫輸入。此功能在 CupertinoTextField、TextField 和 EditableText 中預設啟用。若要為您的最終使用者啟用此功能，只需升級到 Flutter 3.3 即可。

文字輸入

為了改進對富文本編輯的支援，此版本引入了從平台的 TextInputPlugin 接收細緻的文字更新的能力。以前，TextInputClient 僅在沒有舊版本和新版本之間的差異的情況下傳送新的編輯狀態，TextEditingDeltas 和 DeltaTextInputClient 填補了此資訊空白。能夠存取這些差異允許您建立一個帶有樣式範圍的輸入欄位，這些範圍會隨著您打字而伸縮。若要了解更多資訊，請查看 富文本編輯器演示。

Material Design 3

Flutter 團隊繼續將更多 Material Design 3 組件遷移到 Flutter。此版本包含對 IconButton、Chips 以及 AppBar 的大型和中型變化的更新。

若要監控 Material Design 3 遷移的進度，請查看 GitHub 上的 將 Material 3 帶入 Flutter。

IconButton

Chip

中型和大型 AppBar

桌面

Windows

以前，Windows 桌面應用程式的版本由特定於 Windows 應用程式的檔案設定。這種行為與其他平台設定其版本的方式不一致。

Windows 桌面應用程式版本現在可以從您的專案 pubspec.yaml 檔案和構建參數設定。這使得為您的最終使用者啟用自動更新變得更加容易，以便在推送應用程式更新時獲得最新和最棒的更新。

如需有關設定應用程式版本的更多資訊，請按照 docs.flutter.dev 上的文件和 遷移指南 進行操作。在 Flutter 3.3 之前建立的專案需要更新才能獲得此功能。

套件

go_router

在設計具有複雜導航需求的應用程式時，事情可能會變得非常難以理解。為了擴展 Flutter 的原生導航 API，團隊發佈了 go_router 套件的新版本，使設計跨行動、桌面和網頁運作的路由邏輯變得更加簡單。

由 Flutter 團隊維護的 go_router 套件通過提供宣告式、基於 URL 的 API 來簡化路由，使導航和處理深層連結變得更加容易。最新版本 (4.3) 使應用程式能夠使用異步程式碼進行重定向，並包含 遷移指南 中描述的其他重大變更。

如需了解更多資訊，請查看 docs.flutter.dev 上的 導航和路由 頁面。

VS Code 擴展增強功能

Visual Studio Code 的 Flutter 擴展包含多項更新，包括為加入相依項提供的改進。您現在可以使用 Dart: Add Dependency 一步加入多個以逗號分隔的相依項。

您可以閱讀自上次 Flutter 穩定版本發佈以來進行的 Visual Studio Code 擴展增強功能資訊：

• VS Code 擴展 v3.46
• VS Code 擴展 v3.44
• VS Code 擴展 v3.42

Flutter DevTools 更新

自上次穩定 Flutter 版本發佈以來，DevTools 進行了多項更新，包括對資料顯示表格的 UX 和效能改進，以實現更快、更少抖動的大型事件列表捲軸 (#4175)。

若要查看自 Flutter 3.0 以來的完整更新列表，請查看此處的個別公告：

• Flutter DevTools 2.16.0 發行備註
• Flutter DevTools 2.15.0 發行備註
• Flutter DevTools 2.14.0 發行備註

效能

柵格快取改進

此版本通過消除複製和減少 Dart 垃圾收集 (GC) 壓力來提高從資產載入圖片的效能。以前，在載入資產圖片時，ImageProvider API 需要將壓縮資料複製多個次。首先，在打開資產並將其作為類型化資料陣列公開給 Dart 時，它被複製到原生堆中。然後，在將該類型化資料陣列複製到 ui.ImmutableBuffer 的內部儲存器時，再次進行複製。

隨著 ui.ImmutableBuffer.fromAsset 的加入，壓縮圖片位元組可以直接載入到用於解碼的結構中。這種方法 需要對 ImageProviders 的位元組載入管道進行更改。這個過程速度也更快，因为它绕过了之前基于方法通道的加载器需要的一些额外的调度开销。特别是，在我们的微基准测试中，图片加载时间提高了近 2 倍。

如需了解更多資訊和遷移指南，請查看 docs.flutter.dev 上的 加入 ImageProvider.loadBuffer。

穩定性

iOS 指標壓縮已停用

在 2.10 穩定版本中，我們在 iOS 上啟用了 Dart 的 指標壓縮優化。但是，GitHub 上的 Yeatse 提醒我們 優化的意外後果。Dart 的指標壓縮通過為 Dart 的堆預留一個大型虛擬記憶體區域來工作。由於 iOS 上允許的總虛擬記憶體分配小於其他平台，因此這種大型預留減少了其他組件（例如 Flutter 外掛）為預留自己的記憶體而可用的記憶體量。

雖然停用指標壓縮會增加 Dart 物件佔用的記憶體，但它也會增加 Flutter 應用程式的非 Dart 部分可用的記憶體，總體而言這更可取。

Apple 提供了一個授權，可以增加應用程式允許的最大虛擬記憶體分配，但是此授權僅在較新的 iOS 版本上支援，並且在運行 Flutter 仍然支援的 iOS 版本的設備上不起作用。當我們能夠在所有地方使用此授權時，我們打算重新審查此優化。

API 改進

PlatformDispatcher.onError

在之前的版本中，您必須手動配置自訂區域才能捕獲應用程式的所有異常和錯誤。但是，自訂區域對 Dart 核心函式庫中的許多優化不利，這會減慢應用程式啟動時間。在此版本中，而不是使用自訂區域，您應通過設定 PlatformDispatcher.onError 回調來捕獲所有錯誤和異常。如需了解更多資訊，請查看 docs.flutter.dev 上更新的 在 Flutter 中處理錯誤 頁面。

FragmentProgram 變更

在應用程式的 pubspec.yaml 檔案的 shaders: 區段下編寫的 GLSL 中的片段著色器現在將自動編譯成引擎理解的正確格式，並作為資產與應用程式捆綁在一起。由於此更改，您將不再需要使用第三方工具手動編譯著色器。將來，您應將引擎的 FragmentProgram API 視為僅接受 Flutter 構建工具的輸出。這還不是現在的情況，但此更改計劃在未來的版本中進行，如 FragmentProgram API 支援改進 設計文件中所述。

要查看此更改的範例，請參閱此 Flutter 著色器範例。

分數翻譯

以前，Flutter 引擎始終將合成圖層對齊到精確的像素邊界，因為這會提高舊款 (32 位) iPhone 模型的渲染效能。自添加桌面支援以來，我們注意到這導致了可觀察到的捕捉行為，因為螢幕設備像素比率通常要低得多。例如，在低 DPR 螢幕上，工具提示在淡入時會看到明顯的捕捉。在確定此像素捕捉對於更新版 iPhone 模型的效能不再必要之後，我們從 Flutter 引擎中刪除了此像素捕捉 以提高桌面保真度。此外，我們還發現，刪除此像素捕捉使我們的一些黃金圖片測試穩定下來，這些測試會隨著微小的髮絲渲染差異而頻繁變化。

支援平台的更改

32 位 iOS 已棄用

正如我們之前在 3.0 穩定版本中宣布的那樣，由於使用率下降，該版本是 最後一個支援 32 位 iOS 設備和 iOS 版本 9 和 10 的版本。此更改會影響 iPhone 4S、iPhone 5、iPhone 5C 以及第二代、第三代和第四代 iPad 設備。Flutter 的 3.3 穩定版本和所有後續穩定版本不再支援 32 位 iOS 設備和 iOS 版本 9 和 10。這意味著針對 Flutter 3.3 和更高版本構建的應用程式將無法在這些設備上運行。

逐步淘汰 macOS 10.11 和 10.12

在 2022 年第四季度的穩定版本中，我們預計將放棄對 macOS 版本 10.11 和 10.12 的支援。這意味著從那時起針對穩定 Flutter SDK 構建的應用程式將不再在這兩個版本上運行，Flutter 支援的最低 macOS 版本將提高到 10.13 High Sierra。

Bitcode 已棄用

Bitcode 將不再被接受用於即將推出的 Xcode 14 版本中的 iOS 應用程式提交，並且啟用了 Bitcode 的專案將在此版本的 Xcode 中發出構建警告。鑑於此，Flutter 將在未來的穩定版本中放棄對 Bitcode 的支援。

預設情況下，Flutter 應用程式沒有啟用 Bitcode，我們預計這不會影響許多開發人員。但是，如果您在 Xcode 專案中手動啟用了 Bitcode，請在升級到 Xcode 14 後立即停用它。您可以通過打開 ios/Runner.xcworkspace 並將構建設定 Enable Bitcode 設定為 No 來實現這一點。應用程式內新增開發人員應在主機 Xcode 專案中停用它。

請參閱 Apple 的文件 了解有關 Bitcode 分佈的更多資訊。

總結

正如我們一直所說，Google 的 Flutter 團隊非常感謝社群為使 Flutter 變得如此出色所付出的辛勤工作！我們期待繼續迭代已完成的工作，重點關注最重要的內容 - 那就是大家！

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

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

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

了解如何在 Flutter Games 範例中啟用 Crashlytics，讓您更容易偵測和修復遊戲中的問題

Flutter 休閒遊戲工具包 (FCGT) 是一個針對想要建立行動遊戲應用程式的開發人員的入門範本。它已經透過主選單、遊戲關卡、設定畫面、音效、音樂等等進行自訂。除了範本應用程式之外，您也可以下載一個基於此範本的 井字遊戲應用程式。

以下螢幕截圖依序顯示開箱即用的主選單、遊戲關卡頁面和設定頁面：

FCGT 包含一些在開發您自己的遊戲時很有用的服務整合：Apple Game Center、Google Play Games 服務、Google 行動廣告 SDK 和應用程式內購套件。這些更進階的整合最初是被停用的，因為它們需要您（開發人員）在使用它們之前進行一些設定。如果您查看遊戲範本的 main.dart 檔案，並向下捲動到第一個「TODO」，您將看到廣告、遊戲服務和應用程式內購 Plugin 的程式碼，處於休眠狀態，等待啟用。

FCGT 中也包含了 Firebase Crashlytics，這是一個功能強大的錯誤報告解決方案，可幫助您實時偵測、追蹤、優先處理和修復問題。Crashlytics 儀表板讓您能夠將程式碼中的問題視覺化，查看受影響的使用者數量，並找出哪些程式碼行導致了這些問題。

在初始狀態下，未啟用 Crashlytics 時，crashlytics/crashlytics.dart 檔案中的程式碼會收集錯誤訊息、日誌和堆疊追蹤，並將它們寫入主控台。此資訊僅在本地開發設備上測試時可用。啟用 Crashlytics 後，您可以從在自己的設備上運行生產程式碼的使用者那裡接收資料，並在 Crashlytics 儀表板上查看它。

本文將向您展示如何在 FCGT 中啟用 Firebase Crashlytics，拋出一些測試異常，並演示這些異常如何在 Crashlytics 儀表板上顯示。如果您有興趣將 Crashlytics 用於您的 Flutter App，但不想使用 FCGT 開發遊戲，那麼有關拋出異常和 Crashlytics 儀表板的資訊適用於託管在 Firebase 上的任何應用程式。

在 main.dart 檔案 的頂部，您可以看到 Crashlytics 整合的程式碼：

此 Crashlytics Firebase 程式碼未包含在原始的 FCGT YouTube 影片教學中，使用 Flutter 建立遊戲的快速入門 - 這個程式碼很快就會說明。

在 FCGT 中啟用 Crashlytics 的步驟列在 FCGT 的 Crashlytics 區段 的 README.md 檔案 中，但請繼續閱讀以了解每個步驟的逐步指南，以及 Crashlytics 儀表板中事物的外觀。

要開始，請使用以下說明：

1. 從 Flutter 專案 GitHub 頁面 下載最新版本的遊戲範本副本。

2. 確保您已在電腦上安裝 Flutter，並且能夠在 iOS 模擬器或 Android 模擬器上運行應用程式。如果您對如何執行此操作有任何疑問，請參閱您的目標平台的 Flutter 入門指南。

3. 在您的 IDE 或終端機中打開遊戲範本資料夾，並升級到最新版本的 Flutter：

1

$ > flutter upgrade

4. 選擇您要運行應用程式的設備或模擬器。

5. 運行應用程式：

1

$ > flutter run

如果一切順利，應用程式將啟動，您將看到主畫面：

FCGT 的設計目的是讓開發人員能夠快速輕鬆地建立建立遊戲的基礎。在應用程式運行時，請在各個地方瀏覽並查看它可以做些什麼。您會很快發現 FCGT 中的「遊戲玩法」並不是最令人興奮的（除非您喜歡滑桿）。遊戲程式碼的淺層結構是一個刻意的設計選擇，讓您在開始撰寫自己的遊戲時保持簡單。

現在您有了程式碼，請前往 Firebase 網站 並設定一個免費帳戶（如果您沒有帳戶）。然後，打開 Firebase 主控台 並點擊 新增專案。從那裡開始，建立一個新的專案是一個 3 步驟的過程，只要按照螢幕上的指示操作即可。系統會詢問您是否要啟用 Google Analytics (GA)。建議您啟用 Google Analytics，因為除了免費之外，它還解鎖了一些 功能強大的分析功能，例如無錯誤使用者資料、會話麵包屑、速度警報和 BigQuery 整合。

如果您啟用了 Google Analytics，請使用以下命令安裝 Google Analytics Flutter Plugin：

1

$ > flutter pub add firebase_analytics

若要進一步了解，請參閱 使用 Google Analytics 取得錯誤報告的指標 指南中的步驟 1 和 2，但無需遵循指南中概述的其他步驟，因為這些步驟已在下面說明。

接下來，安裝 Firebase CLI。前往 Firebase CLI 文件，選擇您的作業系統，並按照說明操作。登入後，在終端機中運行以下命令，它應該會顯示一個 Firebase 專案名稱列表：

1

$ > flutterfire configure

選擇您之前建立的 Firebase 專案的名稱。然後，選擇您的應用程式支援哪些目標平台。目前，Crashlytics 主控台僅支援 iOS 和 Android，因此最多選擇這兩個平台。

FlutterFire CLI 會產生連接 Firebase 所需的所有金鑰和用戶端 ID，並將它們覆蓋到 src/firebase_options.dart 檔案中。如果您在未來添加更多 Plugin 或想要啟用更多平台，只需重新運行 flutterfire configure 命令即可。

要啟用 Crashlytics，請返回 lib/main.dart 檔案並取消註釋 Crashlytics 程式碼。在檔案的頂部，還有 3 個必須取消註釋的匯入語句：

然後，在同一檔案的下方，取消註釋您之前看過的 Crashlytics 整合程式碼。此程式碼會初始化一個 Crashlytics 的實例（如果還沒有實例），然後檢查應用程式是否正在 Android 或 iOS 上運行。如果應用程式正在桌面或網頁上運行，Crashlytics 程式碼將不會執行，因為 Crashlytics 儀表板還不支持這些平台。

取消註釋 Crashlytics 整合程式碼後，請再次使用 flutter run 命令運行應用程式，以確保一切正常。

是時候讓您的應用程式當機了！

事實上，您只會拋出一些測試異常，但您也會了解如何在 Crashlytics 儀表板中找到它們。這很有用，因為未捕獲的異常可能不會導致您的應用程式當機，但仍然會導致糟糕的使用者體驗，而且如果沒有啟用 Crashlytics，它們可能會被忽略。crashlytics/crashlytics.dart 檔案中使用的 Crashlytics 致命錯誤 API 將未捕獲的異常報告為致命事件，因此它們將出現在 Crashlytics 儀表板中，並且可以適當優先處理。

若要進一步了解如何實作此日誌記錄，請查看有關如何 自訂 Firebase Crashlytics 錯誤報告 的指南，並閱讀 crashlytics.dart 檔案中的註釋。

在您選擇的文字編輯器或 IDE 中，導航到 main_menu 資料夾，並打開 main_menu_screen.dart 檔案。向下捲動，直到找到 設定 按鈕的程式碼。

複製 ElevatedButton，然後在 onPressed 回呼中，不要呼叫 GoRouter 導航到 設定 頁面，而是拋出異常。在此過程中，請將按鈕的名稱更改為類似 拋出測試異常 的內容，如下所示：

1
2
3
4
5
6
7
8
9

ElevatedButton(
  onPressed: () => GoRouter.of(context).go('/settings'),
  child: const Text('Settings'),
),
_gap,
ElevatedButton(
  onPressed: () => throw Exception(),
  child: const Text("Throw Test Exception"),
),

接下來，導航到 audio 資料夾，並打開 audio_controller.dart 檔案。向下捲動，直到找到 _musicOnHandler 函數。當使用者在 設定 畫面中切換音樂播放時，框架會呼叫此函數。

在 else 語句中，在呼叫 _stopMusic() 函數的地方下方，使用 _log.severe() 方法將訊息寫入主控台。任何等級為 Level.severe 或更高的日誌訊息都會發送給 Crashlytics，因此此訊息也會出現在 Crashlytics 主控台中。為了演示說明，請在此處也拋出另一個異常：

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

void _musicOnHandler() {
  if (_settings!.musicOn.value) {
    // Music got turned on.
    if (!_settings!.muted.value) {
      _resumeMusic();
    }
  } else {
    // Music got turned off.
    _stopMusic();
    _log.severe("Someone is messing with the music!");
    throw Exception();
  }
}

現在，應用程式中有兩個地方可以點擊按鈕並拋出異常。再次運行您的應用程式，並確認在主選單中有一個 拋出測試異常 按鈕。

點擊 拋出測試異常 按鈕會產生一個關於拋出異常時的完整堆疊追蹤，並將其寫入主控台：

如果點擊 設定 打開設定視圖，然後點擊樂符按鈕幾次，主控台中將會出現更多異常和堆疊追蹤。現在您啟用了 Crashlytics，此資料可以在 Crashlytics 儀表板中使用。

打開 Firebase 主控台，選擇您的專案，然後從左側的選單中選擇 Crashlytics。選擇您正在運行的專案版本（Android 或 iOS），您應該能夠看到 Crashlytics 儀表板。

如果幾分鐘後，當您嘗試存取 Crashlytics 儀表板時，只看到這個傢伙在錯誤中晃動，可能是因為 Crashlytics 還沒有偵測到任何事件。

在這種情況下，請停止應用程式運行，然後返回您的設備或模擬器，關閉應用程式，並透過點擊應用程式圖示再次啟動它。現在，嘗試在應用程式中拋出一些異常，並再次檢查 Crashlytics 儀表板。如果您刷新了 Firebase 主控台，手動重新啟動了應用程式，並且在五分鐘後仍然沒有看到測試錯誤，請 [啟用除錯日誌記錄](https://firebase.google.com/docs/crashlytics/test-implementation#enable-debug-logging) 以查看您的應用程式是否正在發送錯誤報告。

如果您啟用了 Google Analytics，無錯誤統計資料窗格將會顯示在選定時間範圍內未遇到錯誤的使用者百分比。

Crashlytics 儀表板底部 的 問題 表格顯示了拋出的異常。

點擊表格中的一個特定問題會顯示每當發生此問題時的卡片，以及有關該問題的更多詳細資訊。預設情況下，會顯示堆疊追蹤，這讓您能夠識別錯誤發生的程式碼位置。從下面的螢幕截圖中可以看出，異常是在 audio_controller.dart 檔案的第 197 行的 _musicOnHandler() 函數中拋出的。這並不奇怪，因為您正是將該異常放置在程式碼中的位置，但想像一下，這對於追蹤複雜的生產應用程式中的問題會有多有用。

如果您點擊 日誌 標籤，您可以看到 _log.severe() 方法寫入主控台的任何訊息：

恭喜您！現在，當您繼續撰寫獲獎遊戲（也許會有大量滑桿）時，您將啟用 Crashlytics 來幫助您找到和修復任何問題。

Firebase Crashlytics 和 Flutter 休閒遊戲工具包 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。

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

只需幾行程式碼，就能將 Flutter 功能連接到原生應用程式，並迅速啟動！

如果您一直想要嘗試使用 Flutter，但又不想從頭開始構建，那麼 Flutter 的 新增至應用程式功能 就是一個很棒的起點。為了讓您更輕鬆地將 Flutter 投入使用，我們與 Flutter 團隊合作，創建了一個新增至應用程式的示例原型，以展示如何在付出最少努力的情況下，將 Flutter 整合到原生程式碼庫中。無論您是想試用 Flutter，還是想以實際的方式向您的團隊展示 Flutter 的運作方式，這篇文章都適合您！

將 Flutter 新增到原生新聞提要應用程式

在本教程中，我們將向您展示如何使用 Flutter 的新增至應用程式 API，僅需幾行程式碼，就能將 Flutter 功能整合到原生應用程式中。

我們將要查看的專案分為兩個部分。第一部分包含三個針對三個獨立原生平台（Android、iOS 和 Web）的相同新聞提要應用程式。該應用程式是互動式的，因此您可以在設備上運行它，捲動文章，點擊新聞項目等等。此專案的第二部分是一個對話方塊，當您與應用程式互動時會彈出，並要求使用者提交反饋。此功能我們將稱之為 NPS（淨推薦值）模組，它是使用 Flutter 構建的。

首先，前往 示例儲存庫。您將看到每個平台的資料夾，其中包含新聞提要應用程式的原生程式碼。儲存庫中還有一個 flutter_nps 資料夾，其中包含 NPS 模組的所有 Flutter 程式碼。

使用 Angular 將 Flutter 新增到 Web

Flutter 模組在原生 Web 應用程式中作為一個 <iframe> 執行。要將此功能整合到 Angular 程式碼庫中，首先運行針對 Web 目標的 Flutter 構建。此步驟將生成一個 index.html 以及其他必要的檔案。將所有構建檔案複製到 Angular 應用程式 src 資料夾中。從那裡，您可以在 iframe 中引用構建檔案。下次運行 Web 應用程式時，您將看到 Flutter 功能！

查看 README 以獲取完整說明。

使用 Kotlin 將 Flutter 新增到 Android

現在讓我們將 NPS 模組加入到 Android 應用程式中。首先使用快取的引擎開始一個 Flutter 活動。當您啟動原生新聞應用程式時，Flutter 引擎會在背景中預熱。然後，您將開始一個新的活動，並將其指向 Flutter 活動。這確保了從原生 Kotlin 程式碼到 Flutter 的快速轉換，並允許 Flutter 功能在 Android 應用程式中無縫運作。

查看 README 以獲取完整說明。

使用 SwiftUI 將 Flutter 新增到 iOS

最後，我們可以將 NPS 模組加入到 iOS 應用程式中。首先，將編譯後的 Flutter 模組嵌入到 Xcode 的構建設定中。然後，在您的應用程式委託中，創建一個 Flutter 引擎的實例並啟動它。完成之後，您就可以在需要的地方顯示 Flutter UI - 只需使用 Flutter 引擎創建一個 FlutterViewController 並呈現它。然後使用路徑運行 flutter build ios-framework。

查看 README 以獲取完整說明。

將 Flutter 投入您的使用（以及您的團隊！）

現在您已在應用程式中運行 Flutter 程式碼，您可以試驗 Flutter 的一些有趣部分。以下幾個部分包含一些開始的地方。

支援多個平台

在此新聞提要示例中，您可以看到 NPS 模組是如何支援平台差異的。在 Web 上，此模組顯示為新聞提要頂部的對話方塊，並對來自滑鼠或螢幕閱讀器的輸入做出反應。在行動設備上，此模組佔用整個螢幕空間，並透過觸控或螢幕閱讀器接受輸入。

請注意，Flutter NPS 模組包含 Material Widget，它會根據使用者的設備自動處理手勢偵測。如果您使用的是桌面設備，那麼應用程式會接收滑鼠輸入，如果您使用的是行動設備，那麼應用程式會接收觸控輸入。

動畫

此原型包含一些 隱式動畫，由於它們是內建在 Flutter 框架中的，因此很容易調整。例如，如果您想對 AnimatedContainer Widget 進行更改，只需調整其屬性，例如動畫持續時間、容器高度、形狀和顏色。

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

...
return AnimatedContainer(
  duration: duration,
  height: Spacing.huge,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: isSelected 
      ? NpsColors.colorSecondary 
      : NpsColors.colorGrey5,
  ),
...
);

NPS 模組包含一個自訂頁面動畫轉場。查看 SlideTransition Widget 以獲取另一個動畫示例，可以透過更新其持續時間和其他元素來自訂。

1
2
3
4
5
6
7

SlideTransition(
  position: Tween<Offset>(
    begin: const Offset(0, 1),
    end: Offset.zero,
  ).animate(animation),
  child: child,
);

如果您想將動畫提升到另一個層級，您可以從 pub.dev 中導入 animations 套件，並使用一些花哨的預建動畫。

主題

更新 NPS 模組的主題也很簡單。由於它透過 ThemeData 使用內建的 Material 主題，因此您只需在一个位置更新顏色、按鈕樣式和字體即可。例如，要使用 Flutter 更改 NPS 模組的 accentColor 和 backgroundColor，請使用提供的 Material 顏色配置 或您想要的自訂顏色，更新為您想要的顏色。

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
27
28
29
30
31
32

class AppTheme {
  ThemeData get theme => ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          accentColor: NpsColors.colorSecondary,
          backgroundColor: NpsColors.colorWhite,
        ),
        scaffoldBackgroundColor: NpsColors.colorWhite,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: NpsColors.colorSecondary,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(24),
            ),
          ).copyWith(
            backgroundColor: MaterialStateProperty.resolveWith<Color?>(
              (Set<MaterialState> states) {
                if (!states.contains(MaterialState.disabled)) {
                  return NpsColors.colorSecondary;
                } else if (states.contains(MaterialState.disabled)) {
                  return NpsColors.colorWhite;
                }
                return null;
              },
            ),
          ),
        ),
        textTheme: const TextTheme(
          headline5: NpsStyles.headline5,
          subtitle1: NpsStyles.subtitle1,
          bodyText2: NpsStyles.link,
        ),
      );

其他功能

Flutter NPS 模組使用 flutter_bloc 進行狀態管理，以跟踪使用者的分數回覆。Cubit 是構建 Flutter 應用程式時 許多狀態管理選項 之一。此功能還包含 單元測試和 Widget 測試，它們是有用的工具，可以確保您正在編寫的程式碼按預期工作。最後，程式碼庫具有 78 種語言的本地化支援。此專案具有 用於持續整合的 GitHub Actions 整合，可以在合併更改之前運行格式化、棉絨檢查和測試階段。

後端

雖然此原型目前不與後端互動，但您可以使用您選擇的後端配置它，以便儲存來自 NPS 模組的資料，或者甚至為原生新聞提要引入示例文章。可以探索的一個選項是 Firebase，它與 Flutter 無縫整合在一起。查看 Firebase 文件，將 Firebase 添加到您的 Flutter 應用程式中。

現在您知道如何將 Flutter 功能加入到原生 Web、Android 和 iOS 程式碼庫中，您就可以按照類似的流程將此功能整合到任何原生應用程式中。查看完整的 新增至應用程式文件，以獲取更多資訊。

在 此處的開源儲存庫 中查看完整的程式碼。

讓 Flutter 為您所用 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。