用來構建漂亮、定制化應用的跨平台的 UI 框架 Flutter 現在已經支持 Web 開發了。我們很高興推出了一個預覽版的 SDK 可以讓開發者直接使用 Flutter UI 和業務邏輯代碼構建 web 應用在瀏覽器中運行起來。
Flutter 在 Web端的雄心
自從去年第一個公測版本推出之后,開發者使用 Flutter 構建跨 IOS 和 Android 的應用。但是 Flutter 自始至終被設計成一個跨平台的 UI 框架包括 Windows ,Mac,Fuchsia 甚至是 Raspberry Pi(樹莓派)。因為 Flutter 是由 Dart 編寫的,里面包含一個生產環境的編譯器來構建原生的代碼和 JavaScript 代碼,所以我們有一個堅實的基礎。剩下的挑戰就是替換基於 Skia-based 的圖形引擎和文本渲染來適配 Web 平台。
要做到這些,我們需要提供:
- 快速,無抖動的且每秒60幀的頁面交互
- 考慮到 Flutter 在其他平台提供的能力和視覺
- 和現有開發模式整合的高效率的開發體驗
- 支持所有現代瀏覽器的核心 Web 功能
雖然Flutter for web是一項正在進行中的工作,而且為了實現上述功能還有很多工作要做。我們已經推出一個預覽版,所以開發者可以進行嘗鮮並給我們反饋。
廣州VI設計公司https://www.houdianzi.com
Flutter Web 架構
Flutter 在 Web 端的整體架構和移動端的架構差不多,Flutter 核心層(上圖綠色部分)在移動端和 Web 端是一樣的。它提供了 Flutter UI 的高度抽象,包括動畫,手勢,基本的小部件,以及一套大部分應用需要的 Material 風格的部件。如果你已經在客戶端開發中使用了 Flutter,那么你就會很快的在 Web 開發中上手。
神奇之處就是將這些概念(客戶端層面的)編譯到瀏覽器中。我們重新實現了 dart ui 庫,原本是基於 Skia 引擎被用在客戶端上,現在是基於 DOM 和 Canvas API。當你編譯 Flutter 代碼到 Web 端,你的應用包括 Flutter 核心庫,Web 端的 dart ui 庫,所有的用 Dart 語言寫的代碼都會被編譯成 JavaScript 代碼,能夠運行在所有的現代化瀏覽器中。
我們正在認真考慮采納 Web 核心的特性,像用 Flutter 的路由模型無縫銜接瀏覽器的 History 路由。我們還在與 Flutter 桌面終端 合作,來實現鼠標滾動,懸停和聚焦這些客戶端開發中用不到的功能。
Flutter Web 項目聚焦的核心功能就是框架提供的豐富流暢的交互體驗。基於 document 的 Web 端也能從 Flutter web 可視化中 收益。
這個預覽版的核心庫是現有 Flutter 核心庫的一個臨時分支。這讓我們的工程師能夠很快的實現 web 端功能而核心團隊能夠持續保持開發穩定的用於生產環境的工具。我們已經開始往主倉庫合並部分支持瀏覽器端的代碼。我們計划提供一個 Flutter 的工具包,里面的核心框架將為移動端,web,和其他平台提供支持。
我們計划的工作包括:
- 支持文本特性例如選中,復制和粘貼。
- 提供插件支持。像位置信息,攝像頭,文件 API,我們希望提供一個簡單的 API 將客戶端和 web 端橋接起來。
- 對 PWA 提供開箱即用的技術支持。
- 將 web 開發所需要的工具集成到現有的 FLutter 腳手架和編輯器中。
- 能夠用 DevTools 來調試 web 開發。
- 提高性能,瀏覽器支持以及無障礙的訪問的能力