天天看點

Flutter For Web

用來建構漂亮、定制化應用的跨平台的 ui 架構 flutter 現在已經支援 web 開發了。我們很高興推出了一個預覽版的 sdk 可以讓開發者直接使用 flutter ui 和業務邏輯代碼建構 web 應用在浏覽器中運作起來。

自從去年第一個公測版本推出之後,開發者使用 flutter 建構跨 ios 和 android 的應用。但是 flutter 自始至終被設計成一個跨平台的 ui 架構包括 windows ,mac,fuchsia 甚至是 raspberry pi(樹莓派)。因為 flutter 是由 dart 編寫的,裡面包含一個生産環境的編譯器來建構原生的代碼和 javascript 代碼,是以我們有一個堅實的基礎。剩下的挑戰就是替換基于 skia-based 的圖形引擎和文本渲染來适配 web 平台。

要做到這些,我們需要提供:

快速,無抖動的且每秒60幀的頁面互動

考慮到 flutter 在其他平台提供的能力和視覺

和現有開發模式整合的高效率的開發體驗

支援所有現代浏覽器的核心 web 功能

雖然flutter for 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 開發。

提高性能,浏覽器支援以及無障礙的通路的能力

繼續閱讀