Flutter For Web


用來構建漂亮、定制化應用的跨平台的 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 開發。
  • 提高性能,瀏覽器支持以及無障礙的訪問的能力


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM