Flutter Web - 目標全平臺開發的Flutter再下一城！

Flutter做爲一個可移植的UI框架，已經支持現代Web應用開發了！咱們很開心已經發布了SDK預覽版，這樣你能夠在Web瀏覽器裏直接運行你的Flutter UI代碼。

Flutter Web的目標

從去年Beta版發佈以來，客戶們已經使用Flutter來建立能夠運行在iOS和Android上的移動應用了。可是，Flutter是以可移植的UI工具集構架的，它還能夠運行在其餘環境下，例如Windows、Mac、Fuchsia甚至Raspberry Pi。因爲Flutter是使用Dart構建的，它針對原生機器碼和JavaScript都包含了生產級的編譯器，所以咱們有了一個堅實的基礎。接下來的挑戰在於須要使用web平臺的對等單元來替換基於Skia的圖形引擎和文本渲染器。

要正確地實現這一點，咱們須要提供：

• 60幀/秒快速平滑動畫的性能
• 與其餘平臺一致的行爲和視覺感覺
• 能夠與當前開發模式集成的高效的開發者工具
• 在全部現代瀏覽器上對核心web特性的支持

雖然用於Web的Flutter還在開發中，在上述幾個方面都還有不少工做要進行，不過咱們已經能夠和你們分享一個預覽版了，你能夠嘗試如下，期待你的反饋！

Flutter Web整體架構

Flutter Web的整體架構與用於移動平臺的Flutter很是接近：

Flutter框架（上圖中綠色部分）在移動和web平臺中共享，它提供了Flutter的UI基礎層的高層次抽象，包括動畫、收拾、基礎組件類、以及大多數應用須要的物化主題的組件集。若是你已經在Flutter上開發，那麼使用Flutter Web時你會感到很是熟悉。

魔力來自於將這些概念翻譯到瀏覽器平臺。咱們從新實現了dart:ui庫，使用基於DOM和Canvas的代碼替換了移動平臺上對Skia引擎的綁定。當你爲Web平臺編譯Flutter代碼時，你的應用、Flutter框架、以及Web版本的dart:ui庫都將編譯爲JavaScript，能夠運行在任何現代瀏覽器上。

咱們仔細地擁抱web核心特性，例如將Flutter的路由模型與瀏覽器History無縫集成。咱們同時也努力讓Flutter適應桌面環境，例如啓用鼠標滾動、懸停、聚焦等等，雖然這些特性在移動體驗中並不須要。

Flutter Web項目聚焦於框架提供的核心價值：豐富的交互式體驗。而聚焦於文檔的Web內容依然能夠經過嵌入Flutter Web可視化元素來獲益。

預覽版本的Flutter Web框架當前是做爲已有Flutter框架的一個臨時分支。這使得咱們的工程師能夠快速實現Web功能，同時核心團隊能夠繼續維護並改進生產可用的工具集。咱們一進剛開始將 瀏覽器支持合併到主倉庫。咱們計劃提供一個Flutter工具集，提供一個單一的框架來知足移動、Web以及其餘平臺的開發須要。

接下來計劃的工做包括：

• 支持文本相關的特性，例如選中、複製、粘貼
• 支持插件。對於像位置、攝像頭、文件訪問這些特性，咱們但願使用單一API來橋接移動平臺和Web
• 爲PWA這樣的科技提供開箱即用的支持
• 使用已有的Flutter命令行和IDE集成工具來統一web開發工具鏈
• 使用DevTools調試web應用
• 性能的改善、瀏覽器的支持，以及可訪問性

你能夠到flutter.dev/web查看示例、文檔以及其餘資源的連接，咱們期待着看到你的創做！

匯智網原創翻譯，轉載請標明出處。這裏是原文Flutter Web - 目標全平臺開發的Flutter再下一城！