藉助 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/devel...
](https://flutter.cn/docs/devel...

雖然您能夠針對 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 開發多平臺應用的想法和建議。