Flutter作為一個(gè)可移植的UI框架，已經(jīng)支持現(xiàn)代Web應(yīng)用開(kāi)發(fā)了！我們很開(kāi)心已經(jīng)發(fā)布了SDK預(yù)覽版，這樣你可以在Web瀏覽器里直接運(yùn)行你的Flutter UI代碼。

原文鏈接：Flutter Web - 目標(biāo)全平臺(tái)開(kāi)發(fā)的Flutter再下一城！- 匯智網(wǎng)

Flutter Web的目標(biāo)

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

要正確地實(shí)現(xiàn)這一點(diǎn)，我們需要提供：

• 60幀/秒快速平滑動(dòng)畫(huà)的性能
• 與其他平臺(tái)一致的行為和視覺(jué)感受
• 可以與當(dāng)前開(kāi)發(fā)模式集成的高效的開(kāi)發(fā)者工具
• 在所有現(xiàn)代瀏覽器上對(duì)核心web特性的支持

雖然用于Web的Flutter還在開(kāi)發(fā)中，在上述幾個(gè)方面都還有很多工作要進(jìn)行，不過(guò)我們已經(jīng)可以和大家分享一個(gè)預(yù)覽版了，你可以嘗試以下，期待你的反饋！

Flutter Web總體架構(gòu)

Flutter Web的總體架構(gòu)與用于移動(dòng)平臺(tái)的Flutter非常接近：

Flutter框架（上圖中綠色部分）在移動(dòng)和web平臺(tái)中共享，它提供了Flutter的UI基礎(chǔ)層的高層次抽象，包括動(dòng)畫(huà)、收拾、基礎(chǔ)組件類(lèi)、以及大多數(shù)應(yīng)用需要的物化主題的組件集。如果你已經(jīng)在Flutter上開(kāi)發(fā)，那么使用Flutter Web時(shí)你會(huì)感到非常熟悉。

魔力來(lái)自于將這些概念翻譯到瀏覽器平臺(tái)。我們重新實(shí)現(xiàn)了dart:ui庫(kù)，使用基于DOM和Canvas的代碼替換了移動(dòng)平臺(tái)上對(duì)Skia引擎的綁定。當(dāng)你為Web平臺(tái)編譯Flutter代碼時(shí)，你的應(yīng)用、Flutter框架、以及Web版本的dart:ui庫(kù)都將編譯為JavaScript，可以運(yùn)行在任何現(xiàn)代瀏覽器上。

我們仔細(xì)地?fù)肀eb核心特性，例如將Flutter的路由模型與瀏覽器History無(wú)縫集成。我們同時(shí)也努力讓Flutter適應(yīng)桌面環(huán)境，例如啟用鼠標(biāo)滾動(dòng)、懸停、聚焦等等，雖然這些特性在移動(dòng)體驗(yàn)中并不需要。

Flutter Web項(xiàng)目聚焦于框架提供的核心價(jià)值：豐富的交互式體驗(yàn)。而聚焦于文檔的Web內(nèi)容依然可以通過(guò)嵌入Flutter Web可視化元素來(lái)獲益。

預(yù)覽版本的Flutter Web框架當(dāng)前是作為已有Flutter框架的一個(gè)臨時(shí)分支。這使得我們的工程師可以快速實(shí)現(xiàn)Web功能，同時(shí)核心團(tuán)隊(duì)可以繼續(xù)維護(hù)并改進(jìn)生產(chǎn)可用的工具集。我們一進(jìn)剛開(kāi)始將瀏覽器支持合并到主倉(cāng)庫(kù)。我們計(jì)劃提供一個(gè)Flutter工具集，提供一個(gè)單一的框架來(lái)滿(mǎn)足移動(dòng)、Web以及其他平臺(tái)的開(kāi)發(fā)需要。

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

• 支持文本相關(guān)的特性，例如選中、復(fù)制、粘貼
• 支持插件。對(duì)于像位置、攝像頭、文件訪(fǎng)問(wèn)這些特性，我們希望使用單一API來(lái)橋接移動(dòng)平臺(tái)和Web
• 為PWA這樣的科技提供開(kāi)箱即用的支持
• 使用已有的Flutter命令行和IDE集成工具來(lái)統(tǒng)一web開(kāi)發(fā)工具鏈
• 使用DevTools調(diào)試web應(yīng)用
• 性能的改善、瀏覽器的支持，以及可訪(fǎng)問(wèn)性

你可以到flutter.dev/web查看示例、文檔以及其他資源的鏈接，我們期待著看到你的創(chuàng)作！