版權(quán)聲明：本文為博主原創(chuàng)文章窗骑，未經(jīng)博主允許不得轉(zhuǎn)載章贞。http://www.reibang.com/p/a5c48e81e4a6
轉(zhuǎn)載請標(biāo)明出處：http://www.reibang.com/p/a5c48e81e4a6
本文出自 AWeiLoveAndroid的博客

Flutter系列博文鏈接 ↓：

工具安裝：

• Flutter從配置安裝到填坑指南詳解

Flutter基礎(chǔ)篇：

• 谷歌Flutter1.0正式版發(fā)布
• Flutter基礎(chǔ)篇（1）-- 跨平臺開發(fā)框架和工具集錦
• Flutter基礎(chǔ)篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法
• Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
• Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
• Flutter基礎(chǔ)篇（5）-- Flutter代碼模板冰悠，解放雙手节槐，提高開發(fā)效率必備
• Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
• Flutter基礎(chǔ)篇（7）-- Flutter更新錯誤全面解決方案(圖文+視頻講解)
• Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細(xì)介紹
• Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實現(xiàn)Web頁面編寫
• Flutter1.9升級體驗總結(jié)（Flutter Web 1.9最新版本填坑指南）

Flutter進(jìn)階篇：

• Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項目
• Flutter進(jìn)階篇（2）-- Flutter路由詳解
• Flutter進(jìn)階篇（3）-- Flutter 的手勢（GestureDetector）分析詳解
• Flutter進(jìn)階篇（4）-- Flutter的Future異步詳解
• Flutter進(jìn)階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫
• Flutter進(jìn)階篇（6）-- PageStorageKey操灿、PageStorageBucket和PageStorage使用詳解
• Flutter進(jìn)階篇（7）-- Flutter路由輕量級框架FRouter

Dart語法系列博文鏈接 ↓：

Dart語法基礎(chǔ)篇：

• Flutter基礎(chǔ)篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法(這是Dart語法系列的第一篇)
• Dart的語法詳解系列篇（二）-- 類與函數(shù)
• Dart的語法詳解系列篇（三）-- mixin入門
• Dart的語法詳解系列篇（四）-- 泛型锯仪、異步、庫等有關(guān)詳解
• Dart2.6正式版發(fā)布趾盐，支持編譯為native可執(zhí)行文件

Dart語法進(jìn)階篇：

• Dart語法進(jìn)階篇（一）-- Dart源碼的排序算法詳解

最近谷歌搞了一件大事情庶喜，F(xiàn)lutter也可以寫Web應(yīng)用了小腊，去年我用Dart寫了一下Web，請看視頻介紹Dart開發(fā)前端頁面入門系列視頻（1）久窟，體驗了一把Dart寫Web的感覺≈雀裕現(xiàn)在谷歌把dart:ui重寫了一遍，讓Flutter也可以輕松實現(xiàn)Web網(wǎng)頁功能斥扛，廢話少說入问。本文詳細(xì)介紹Flutter for Web，讓各位了解一下它是何方神圣稀颁。不管你有沒有做過Web開發(fā)都可以快速學(xué)習(xí)和掌握這個新鮮玩意兒芬失。

Flutter系列博文鏈接 ↓：

工具安裝：

• Flutter從配置安裝到填坑指南詳解

Flutter基礎(chǔ)篇：

• Flutter基礎(chǔ)篇（1）-- 跨平臺開發(fā)框架和工具集錦
• Flutter基礎(chǔ)篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法
• Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
• Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
• Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手匾灶，提高開發(fā)效率必備
• Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
• Flutter基礎(chǔ)篇（7）-- Flutter更新錯誤全面解決方案(圖文+視頻講解)
• Flutter基礎(chǔ)篇（8）-- Flutterfor Web詳細(xì)介紹
• Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實現(xiàn)Web頁面編寫

Flutter進(jìn)階篇：

• Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項目
• Flutter進(jìn)階篇（2）-- Flutter路由詳解
• Flutter進(jìn)階篇（3）-- Flutter 的手勢（GestureDetector）分析詳解
• Flutter進(jìn)階篇（4）-- Flutter的Future異步詳解

Dart語法系列博文鏈接 ↓：

• Flutter基礎(chǔ)篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法(這是Dart語法系列的第一篇)
• Dart的語法詳解系列篇（二）-- 類與函數(shù)
• Dart的語法詳解系列篇（三）-- mixin入門
• Dart的語法詳解系列篇（四）-- 泛型棱烂、異步、庫等有關(guān)詳解

【注意】如果不想看文字介紹阶女，也可以看視頻講解颊糜，內(nèi)容都是一樣的。視頻地址：https://www.bilibili.com/video/av52008765

一秃踩、Flutter for Web介紹

Flutter for Web官方的Github庫地址：https://github.com/flutter/flutter_web ,此存儲庫包含面向Web 的 Flutter 分支的源代碼 衬鱼。Flutter團(tuán)隊的目標(biāo)是把Web與??iOS和Android一起添加到Flutter SDK中的第一層平臺。此存儲庫中的代碼提供實現(xiàn)（幾乎）整個Flutter API的純Web包憔杨。

Flutter for Web 是Flutter的代碼兼容實現(xiàn)馁启，使用基于標(biāo)準(zhǔn)的Web技術(shù)呈現(xiàn)：HTML，CSS和JavaScript芍秆。使用Flutter for web惯疙，您可以將使用Dart編寫的現(xiàn)有Flutter代碼編譯成可以嵌入瀏覽器并部署到任何Web服務(wù)器的客戶端體驗。您可以使用Flutter的所有功能妖啥，而不需要瀏覽器插件霉颠。

Flutter for web目前只是預(yù)覽版，旨在驗證產(chǎn)品是否滿足開發(fā)人員的需求荆虱。目前只支持Chrome瀏覽器上調(diào)試頁面蒿偎。

二、Flutter for Web架構(gòu)圖

Flutter for Web架構(gòu)圖

Flutter框架（上圖中的綠色部分）在移動和網(wǎng)絡(luò)產(chǎn)品之間共享怀读。它為Flutter的UI基礎(chǔ)提供高級抽象概念诉位，包括動畫，手勢菜枷，基本小部件類苍糠，以及面向最常見應(yīng)用程序需求的Material主題的小部件。如果您已經(jīng)使用過Flutter構(gòu)建項目啤誊，那么您將可以快速體驗到Flutter for Web的功能岳瞭。

Flutter for Web的神奇之處在于將Flutter UI的概念轉(zhuǎn)移到瀏覽器中拥娄。與Flutter移動端框架不一樣的是，Flutter for Web的第一層（橙色的）是Browser瞳筏，里面有Cabvas稚瘾、JS Engine和DOM。Flutter團(tuán)隊重新實現(xiàn)了dart:ui庫姚炕，用針對DOM和Canvas的代碼替換了手機端使用的對Skia引擎的綁定摊欠。Browser這一層核心繪圖層完全是用Dart實現(xiàn)的，并使用Dart優(yōu)化的JavaScript編譯器將Flutter核心和框架與應(yīng)用程序一起編譯成一個可以部署到任何Web服務(wù)器的簡化的源JavaScript文件柱宦，可以在任何現(xiàn)代瀏覽器上運行凄硼。

三、Flutter for Web的編譯器

（1）適用于生產(chǎn)（部署）環(huán)境的JavaScript編譯器：dart2js

dart2js: 為了部署環(huán)境而生成優(yōu)化的精簡的代碼捷沸。使用dart2js工具將Dart代碼編譯為可部署的JavaScript摊沉。

（2）適用于開發(fā)（測試）環(huán)境的JavaScript編譯器：dartdevc

dartdevc: 它提供漸進(jìn)式編譯和熱啟動。你可以編輯Dart文件痒给，在Chrome中刷新说墨，并立即查看文件修改后的結(jié)果。dartdevc只編譯更新的模塊苍柏，而不是編譯應(yīng)用所依賴的所有軟件包尼斧。

四、核心功能點（作用）

• 1.使用Flutter構(gòu)建的與progressive-web-apps相關(guān)聯(lián)的程序试吁。對Flutter的Web支持使現(xiàn)有的基于移動的應(yīng)用程序可以打包為PWA棺棵，以覆蓋更廣泛的設(shè)備，或為現(xiàn)有應(yīng)用程序提供配套的Web體驗熄捍。
• 2.嵌入式互動內(nèi)容烛恤。Flutter為創(chuàng)建豐富的，以數(shù)據(jù)為中心的組件提供了一個強大的環(huán)境余耽，可以輕松地在現(xiàn)有網(wǎng)頁中托管缚柏。無論是數(shù)據(jù)可視化，在線工具如汽車配置器還是嵌入式圖表碟贾，F(xiàn)lutter都可以為嵌入式Web內(nèi)容提供高效的開發(fā)方法币喧。
• 3.在Flutter移動應(yīng)用中嵌入動態(tài)內(nèi)容。在現(xiàn)有移動應(yīng)用程序內(nèi)提供動態(tài)內(nèi)容更新的既定方法是使用Web視圖控件袱耽，其可以動態(tài)地加載和顯示信息杀餐。Flutter支持現(xiàn)在提供統(tǒng)一的Web和移動內(nèi)容環(huán)境，使您可以在線部署內(nèi)容或嵌入應(yīng)用程序而無需重寫朱巨。

五史翘、最終目標(biāo)（特點）

• 1.運行的快速，無抖動，每秒60幀的性能恶座。
• 2.Flutter在其他平臺上的一致行為和視覺效果。
• 3.高效的開發(fā)人員工具沥阳，可與現(xiàn)有的開發(fā)模式集成跨琳。
• 4.支持所有現(xiàn)代瀏覽器的核心Web功能。

六桐罕、計劃中的工作

• 1.支持文本功能脉让，如選擇和復(fù)制粘貼。
• 2.支持插件功炮。flutter_web目前還沒有插件系統(tǒng)溅潜。暫時提供dart:html，dart:js薪伏，dart:svg, dart:indexed_db 這些讓你和其他網(wǎng)絡(luò)庫能夠訪問的絕大多數(shù)瀏覽器的API滚澜。對于位置，相機和文件訪問等功能嫁怀，F(xiàn)lutter團(tuán)隊希望通過單一API橋接移動和網(wǎng)絡(luò)设捐。
• 3.對Progressive Web Apps等技術(shù)的開箱即用支持。
• 4.在現(xiàn)有的Flutter CLI和IDE集成下統(tǒng)一Web開發(fā)工具塘淑。
• 5.使用DevTools調(diào)試Web應(yīng)用程序萝招。
• 6.改進(jìn)性能咖耘，瀏覽器支持和可訪問性豺瘤。

七深夯、Flutter項目移植到Web注意事項

• 1.并非所有Flutter API都在Flutter for web上實現(xiàn)蘑斧。
• 2.Flutter for web目前還是預(yù)覽版汞幢，生成的代碼可能運行緩慢损痰。
• 3.桌面用戶界面的互動并不完全很友好女坑，因此flutter_web即使在桌面瀏覽器上運行尘盼，構(gòu)建的用戶界面也可能像移動應(yīng)用程序一樣肖油。
• 4.目前只支持Chrome瀏覽器上調(diào)試頁面凹嘲，其他瀏覽器調(diào)試可能會有問題。
• 5.Flutter for Web小部件API與移動小部件API相同构韵，但是是單獨臨時打包的周蹭。
• 6.您可以重新打包現(xiàn)有的Flutter代碼以便在Web預(yù)覽上使用，但在Flutter for Web目前仍處于預(yù)覽階段疲恢，使用時會有一些警告凶朗。

八、示例代碼庫

Github: https://flutter.github.io/samples/

【聲明】本文首發(fā)于我的公眾號Flutter那些事显拳，未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載棚愤！