Flutter作爲(wéi / wèi)一個(gè)可移植的(de)UI框架，已經支持現代Web應用開發了(le／liǎo)！我們很開心已經發布了(le／liǎo)SDK預覽版，這(zhè)樣你可以(yǐ)在(zài)Web浏覽器裏直接運行你的(de)Flutter UI代碼。

原文鏈接：Flutter Web - 目标全平台開發的(de)Flutter再下一城！- 彙智網

Flutter Web的(de)目标

從去年Beta版發布以(yǐ)來(lái)，客戶們已經使用Flutter來(lái)創建可以(yǐ)運行在(zài)iOS和(hé / huò)Android上(shàng)的(de)移動應用了(le／liǎo)。但是(shì)，Flutter是(shì)以(yǐ)可移植的(de)UI工具集構架的(de)，它還可以(yǐ)運行在(zài)其他(tā)環境下，例如Windows、Mac、Fuchsia甚至Raspberry Pi。 由于(yú)Flutter是(shì)使用Dart構建的(de)，它針對原生機器碼和(hé / huò)JavaScript都包含了(le／liǎo)生産級的(de)編譯器，因此我們有了(le／liǎo)一個(gè)堅實的(de)基礎。接下來(lái)的(de)挑戰在(zài)于(yú)需要(yào / yāo)使用web平台的(de)對等單元來(lái)替換基于(yú)Skia的(de)圖形引擎和(hé / huò)文本渲染器。

要(yào / yāo)正确地(dì / de)實現這(zhè)一點，我們需要(yào / yāo)提供：

• 60幀/秒快速平滑動畫的(de)性能
• 與其他(tā)平台一緻的(de)行爲(wéi / wèi)和(hé / huò)視覺感受
• 可以(yǐ)與當前開發模式集成的(de)高效的(de)開發者工具
• 在(zài)所有現代浏覽器上(shàng)對核心web特性的(de)支持

雖然用于(yú)Web的(de)Flutter還在(zài)開發中，在(zài)上(shàng)述幾個(gè)方面都還有很多工作要(yào / yāo)進行，不(bù)過我們已經可以(yǐ)和(hé / huò)大(dà)家分享一個(gè)預覽版了(le／liǎo)，你可以(yǐ)嘗試以(yǐ)下，期待你的(de)反饋！

Flutter Web總體架構

Flutter Web的(de)總體架構與用于(yú)移動平台的(de)Flutter非常接近：

Flutter框架（上(shàng)圖中綠色部分）在(zài)移動和(hé / huò)web平台中共享，它提供了(le／liǎo)Flutter的(de)UI基礎層的(de)高層次抽象，包括動畫、收拾、基礎組件類、以(yǐ)及大(dà)多數應用需要(yào / yāo)的(de)物化主題的(de)組件集。如果你已經在(zài)Flutter上(shàng)開發，那麽使用Flutter Web時(shí)你會感到(dào)非常熟悉。

魔力來(lái)自于(yú)将這(zhè)些概念翻譯到(dào)浏覽器平台。我們重新實現了(le／liǎo)dart:ui庫，使用基于(yú)DOM和(hé / huò)Canvas的(de)代碼替換了(le／liǎo)移動平台上(shàng)對Skia引擎的(de)綁定。當你爲(wéi / wèi)Web平台編譯Flutter代碼時(shí)，你的(de)應用、Flutter框架、以(yǐ)及Web版本的(de)dart:ui庫都将編譯爲(wéi / wèi)JavaScript，可以(yǐ)運行在(zài)任何現代浏覽器上(shàng)。

我們仔細地(dì / de)擁抱web核心特性，例如将Flutter的(de)路由模型與浏覽器History無縫集成。我們同時(shí)也(yě)努力讓Flutter适應桌面環境，例如啓用鼠标滾動、懸停、聚焦等等，雖然這(zhè)些特性在(zài)移動體驗中并不(bù)需要(yào / yāo)。

Flutter Web項目聚焦于(yú)框架提供的(de)核心價值：豐富的(de)交互式體驗。而(ér)聚焦于(yú)文檔的(de)Web内容依然可以(yǐ)通過嵌入Flutter Web可視化元素來(lái)獲益。

預覽版本的(de)Flutter Web框架當前是(shì)作爲(wéi / wèi)已有Flutter框架的(de)一個(gè)臨時(shí)分支。這(zhè)使得我們的(de)工程師可以(yǐ)快速實現Web功能，同時(shí)核心團隊可以(yǐ)繼續維護并改進生産可用的(de)工具集。我們一進剛開始将浏覽器支持合并到(dào)主倉庫。我們計劃提供一個(gè)Flutter工具集，提供一個(gè)單一的(de)框架來(lái)滿足移動、Web以(yǐ)及其他(tā)平台的(de)開發需要(yào / yāo)。

接下來(lái)計劃的(de)工作包括：

• 支持文本相關的(de)特性，例如選中、複制、粘貼
• 支持插件。對于(yú)像位置、攝像頭、文件訪問這(zhè)些特性，我們希望使用單一API來(lái)橋接移動平台和(hé / huò)Web
• 爲(wéi / wèi)PWA這(zhè)樣的(de)科技提供開箱即用的(de)支持
• 使用已有的(de)Flutter命令行和(hé / huò)IDE集成工具來(lái)統一web開發工具鏈
• 使用DevTools調試web應用
• 性能的(de)改善、浏覽器的(de)支持，以(yǐ)及可訪問性

你可以(yǐ)到(dào)flutter.dev/web查看示例、文檔以(yǐ)及其他(tā)資源的(de)鏈接，我們期待着看到(dào)你的(de)創作！