Flutter社區

Flutter 已于近期發布了 Flutter 2，Flutter 和 Dart 的產品總監 Tim Sneath 在 2021 年三月上旬舉辦的 Flutter Engage 活動中表示，Flutter 致力于成為多平臺 UI 工具包，為了 "徹底改變開發者眼中的應用構建方式，讓他們從期望打造的體驗來入手進行開發，而無需優先考慮目標平臺"。

在最新版發布前，美觀、快速、開放且高效是 Flutter 的四大關鍵特性，為用戶構建跨平臺應用提供了極大便利。隨著 Flutter 2 的發布，其又新增了一項關鍵特性: 可移植性，對于 Flutter 來說，這可謂是一項重大的里程碑式進展，意味著 Flutter 現在可以利用單一代碼庫，為移動端、web 端、桌面設備和嵌入式設備上的原生應用提供穩定支持。Flutter 是首款真正意義上專為環境計算世界而設計的界面平臺。

在本文中，我們將探索 "可移植性" 這項關鍵特性對 Flutter 有何意義并討論其支持 web 應用和多屏設備類型的功能，以及豐田如何將 Flutter 應用至其車輛的信息娛樂系統。

移動應用向 web 應用的跨越

Flutter 起初是一個用于構建精美 iOS 和 Android 應用的 UI 框架。然而，Flutter 一以貫之的愿景是提供可移植的框架，幫助開發者為任意平臺上的用戶構建原生編譯應用。由于幾乎每臺設備都安裝有 web 瀏覽器，Flutter 也自然將下一個目標定為 web 端。

Flutter 2 可為 web 提供具有生產質量的支持，這意味著您可以利用單一代碼庫，為 iOS、Android 和 web 瀏覽器構建精美的高性能應用。目前的重點是開發 web 應用，即可安裝的漸進式 web 應用 (PWA)，以及內容豐富的交互式單頁應用 (SPA)，而非現在所看到的靜態內容網站。這些可幫助 Flutter 開發者無縫銜接，從當前的移動應用擴展至 web 應用的全新用戶群體。

有了 Flutter 2，就如同為您的應用進行了一次免費升級。Web 只是另一個設備目標而已，運行 Flutter Create，將自動生成一個帶有索引 HTML 文件的 web 目錄，可以隨時在您喜愛的瀏覽器中運行。

與移動應用一樣，web 應用也有 2 個編譯器。dev_compiler 適用于開發階段，而 dart2js 則適用于部署階段。將開發和部署階段的編譯器分開，一方面可優化開發周期生產力，另一方面則可優化正式應用的性能，使其快速運行。Flutter 支持以原生機器代碼編譯應用，這意味著您在發布已完工的應用時，無需再在虛擬機或 JavaScript 解釋器中完成這步操作。

Flutter 的 dev_compiler 具有與 JIT 編譯相同的智能功能。因此，該命令只會重新編譯受變動影響的代碼，并堆積增量，從而確保開發循環快速進行。但是，與移動端支持熱重載 (記住應用的狀態) 不同，在 web 應用中，您需要手動啟動熱重載，并重建應用狀態。

就像與以 Flutter 構建的移動應用一樣，插件的存在使得應用能夠與平臺的原生庫通信。許多 pub.dev 中現有的 Flutter 插件都已支持 web 應用。在 web 端運行 Flutter 應用時，您可以通過這些插件訪問 JavaScript 庫。如需查看某一插件是否受支持，只需前往 pub.dev 并搜索該插件即可。插件下方的標簽會顯示該插件所支持的平臺。

資料來源: pub.flutter-io.cn/packages?q=url_launcher

如果您希望更新某個插件以使其適用于 web 應用，您可以參閱以下文章，了解如何為現有的插件項目加入平臺的支持:

https://flutter.cn/docs/development/packages-and-plugins/developing-packages#add-support-for-platforms-in-an-existing-plugin-project

雖然您可以針對 web 應用使用與移動應用一致的代碼，但您還需要針對用戶體驗進行優化。您可以使用約束條件添加動態布局特性，以增強用戶體驗，例如，如果瀏覽器可以提供更多的屏幕空間，您可以將單列布局擴展至雙列。

類似的，您可能還會考慮添加 web 專用的導航功能，例如滾動條，以及鼠標或鍵盤交互。為了在網頁中提供更好的瀏覽體驗，您還可以隱藏滾動條中的 ListView，并在將鼠標懸于某個 widget 之上時，顯示鼠標光標。此外，您還可以使用快捷鍵 widget 在您的應用中添加鍵盤快捷鍵。

如需了解詳情，您可以訪問 flutter.cn/web。

支持可折疊設備和雙屏設備

如前所述，Flutter 專為環境計算世界設計而成。現在的屏幕種類繁多，已不僅局限于移動端、web 端和桌面端屏幕。從可穿戴式設備到家用設備、智能家電，甚至再到可折疊設備和雙屏設備，這些設備已越來越多地出現在我們日常生活中。用戶可以使用這些設備創作內容、玩游戲、看視頻、打字、閱讀或瀏覽網頁，既然這些設備能夠滿足用戶的需求，那么這些全新的設備類型就有助于提高生產力。

同時，這些設備類型意味著您將有機會探索全新的場景和用戶體驗。在兩個屏幕上運行應用，可帶來更多屏幕空間用于顯示內容和與用戶互動。當在兩個屏幕上適配 Flutter 應用時，您可以使用雙屏設計模式，例如列表詳情視圖、配套窗格，或采取其他用于調整應用 UI 的方法。

可折疊的設備類型也使得這些設備中的應用可以和其他應用互相分享內容。例如，為您的應用添加拖放功能后，您可以在并排運行的應用間互相移動內容。

在 Flutter Engage 活動中，Microsoft 宣布 正在與 Google 合作，使 Flutter 支持可折疊設備。Microsoft 將提供代碼，使 Flutter 應用把握這些新機會，在 Surface Duo 設備和三星等制造商生產的設備上大展拳腳。

有了 Flutter 2，所有 Flutter widgets 均將支持可折疊設備。例如，在您使用對話框時，應用能感知到其位于折疊設備上，將內容顯示在右邊或左邊的窗格中。

您也可以使用全新的雙窗格 widget 來放置資源。借助此 widget，您可以在左側或右側窗格中放置資源。同時，該 widget 也能正確顯示于單屏幕手機或平板類設備上。雙窗格 widget 可輕松支持全新的設備類型。

豐田借助 Flutter 打造的車載用戶體驗

Flutter 2 可以幫助開發者構建出適用于移動端、web 端、桌面端，甚至是新興設備類型的精美應用，但這只是 Flutter 靈活性的冰山一角。想要成為真正的可移植性平臺，支持發布應用至客戶所在的任意平臺，Flutter 還需要為嵌入式設備提供支持。豐田已于近日宣布，其車輛的信息娛樂系統未來將由 Flutter 提供動力支持，屆時，Flutter 將為全球最大的汽車制造商之一帶來最佳的數字化體驗。

來自豐田北美汽車公司 (Toyota Motor North America) 總工程師 Daniel Hall 在 Flutter Engage 活動 中介紹了此次合作以及 選擇 Flutter 的原因:

• 豐田的客戶期望享受到高性能車載用戶體驗，使之與豐田汽車的整體質量相符。Flutter 的渲染引擎可在受限的環境下提供優異性能，且其自帶的 AOT 編譯功能可為豐田提供其在車載技術中所追求的一致性特色。
• 在 Flutter 的助力下，豐田提供的車載用戶體驗可以與客戶期待在智能手機中獲得的體驗相媲美。豐田相信 Flutter 的跨平臺機制所包含的觸控機制能使其適應任何運行環境。這種跨平臺機制可幫助豐田規避許多嵌入式系統都會遇到的問題，如性能遲滯，用戶體驗差等。
• 豐田也被 Flutter 的開發者體驗所吸引。雖然豐田只是在針對單一目標平臺發布其應用，但該應用可支持在桌面端進行熱重載并向 iOS 和 Android 系統的平板電腦傳輸內容，這些功能已證明其有助于提升實體和數字用戶體驗。隨著這種更快的迭代周期的出現，豐田可以更早、更頻繁地收集和整合客戶的反饋，有助于創造最佳用戶體驗。

借助 Flutter 的嵌入器 API，豐田在其由 Linux 驅動的汽車級信息娛樂系統中發揮了這項技術的優勢。Flutter 引擎架構通過交叉編譯引擎并將其封裝于嵌入器內的方式，使自身得以輕松地嵌入目標環境。嵌入器 API 易于使用，可以幫助豐田將 Flutter 應用與車載系統融為一體。

借助 Dart 的語言設計和 Flutter SDK 的軟件設計，豐田已開發出諸多內部工具，并通過在豐田的設計流程中運用這些工具，使其得以提高 Flutter 的開發者人機工程學。豐田的目標是打造如下的工作流: 利用設計工具生成代碼并運行，然后立即驗證軟件。例如，Flutter 會將聲明式 UI 和代碼用作配置，在這種方法的助力下，豐田能夠高效地運行生成于設計過程中的代碼，而無需經歷復雜且混亂的中間環節。

在開發這些豐田專用工具時，Flutter 的開源原則和規模日益壯大的開發者社區對豐田的成功起到了至關重要的作用。豐田相信，若沒有這種龐大的開放性生態系統的支持，便無法將 Flutter 擴展至自己的車載用例中。

豐田將與開源軟件方的合作視為對其車載用戶體驗的一次積極投資，并期待自身可以在開源的 Flutter 社區中有所作為。

Flutter: 為所有平臺構建精美應用

Flutter 可支持汽車、web 瀏覽器、筆記本電腦、手機、桌面設備、平板電腦和智能家居設備，可謂是真正意義上的可移植性 UI 工具包，其內置成熟的 SDK，可以讓您隨時隨地滿足用戶需求。Flutter 現可在您的重點目標平臺上運行，并可支持與您鐘愛的 Google SDK 和服務結合使用。Flutter 集精美而迅捷的用戶體驗與高效的開發環境于一身，使其可以探索內容并進行迭代，Google 提供的所有開源代碼加之遍布世界的眾多開發者社區，為 Flutter 在過去幾年的指數級發展作出了貢獻。沒有其他平臺可與之媲美。

您可以訪問 Flutter 開發者社區中文資源，我們將持續分享 Flutter 相關的最新資訊、內容以及教程，助力您未來的開發之旅。也歡迎您在下面的評論區分享您對 Flutter 開發多平臺應用的想法和建議。