版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。http://www.lxweimin.com/p/a5c48e81e4a6
轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://www.lxweimin.com/p/a5c48e81e4a6
本文出自 AWeiLoveAndroid的博客
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎(chǔ)篇：
- 谷歌Flutter1.0正式版發(fā)布
- Flutter基礎(chǔ)篇（1）-- 跨平臺(tái)開發(fā)框架和工具集錦
- Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語法
- Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
- Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
- Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開發(fā)效率必備
- Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
- Flutter基礎(chǔ)篇（7）-- Flutter更新錯(cuò)誤全面解決方案(圖文+視頻講解)
- Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細(xì)介紹
- Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實(shí)現(xiàn)Web頁面編寫
- Flutter1.9升級(jí)體驗(yàn)總結(jié)（Flutter Web 1.9最新版本填坑指南）
Flutter進(jìn)階篇：
- Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項(xiàng)目
- Flutter進(jìn)階篇（2）-- Flutter路由詳解
- Flutter進(jìn)階篇（3）-- Flutter 的手勢(shì)（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路由輕量級(jí)框架FRouter
Dart語法系列博文鏈接 ↓：
Dart語法基礎(chǔ)篇：
Dart語法進(jìn)階篇：
最近谷歌搞了一件大事情，F(xiàn)lutter也可以寫Web應(yīng)用了，去年我用Dart寫了一下Web，請(qǐng)看視頻介紹Dart開發(fā)前端頁面入門系列視頻（1），體驗(yàn)了一把Dart寫Web的感覺。現(xiàn)在谷歌把dart:ui重寫了一遍，讓Flutter也可以輕松實(shí)現(xiàn)Web網(wǎng)頁功能，廢話少說。本文詳細(xì)介紹
Flutter for Web，讓各位了解一下它是何方神圣。不管你有沒有做過Web開發(fā)都可以快速學(xué)習(xí)和掌握這個(gè)新鮮玩意兒。
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎(chǔ)篇：
- Flutter基礎(chǔ)篇（1）-- 跨平臺(tái)開發(fā)框架和工具集錦
- Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語法
- Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
- Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
- Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開發(fā)效率必備
- Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
- Flutter基礎(chǔ)篇（7）-- Flutter更新錯(cuò)誤全面解決方案(圖文+視頻講解)
- Flutter基礎(chǔ)篇（8）-- Flutterfor Web詳細(xì)介紹
- Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實(shí)現(xiàn)Web頁面編寫
Flutter進(jìn)階篇：
Dart語法系列博文鏈接 ↓：
【注意】如果不想看文字介紹，也可以看視頻講解，內(nèi)容都是一樣的。視頻地址：https://www.bilibili.com/video/av52008765
一、Flutter for Web介紹
Flutter for Web官方的Github庫地址：https://github.com/flutter/flutter_web ,此存儲(chǔ)庫包含面向Web 的 Flutter 分支的源代碼 。Flutter團(tuán)隊(duì)的目標(biāo)是把Web與??iOS和Android一起添加到Flutter SDK中的第一層平臺(tái)。此存儲(chǔ)庫中的代碼提供實(shí)現(xiàn)（幾乎）整個(gè)Flutter API的純Web包。
Flutter for Web 是Flutter的代碼兼容實(shí)現(xiàn)，使用基于標(biāo)準(zhǔn)的Web技術(shù)呈現(xiàn)：HTML，CSS和JavaScript。使用Flutter for web，您可以將使用Dart編寫的現(xiàn)有Flutter代碼編譯成可以嵌入瀏覽器并部署到任何Web服務(wù)器的客戶端體驗(yàn)。您可以使用Flutter的所有功能，而不需要瀏覽器插件。
Flutter for web目前只是預(yù)覽版，旨在驗(yàn)證產(chǎn)品是否滿足開發(fā)人員的需求。目前只支持Chrome瀏覽器上調(diào)試頁面。
二、Flutter for Web架構(gòu)圖
Flutter框架（上圖中的綠色部分）在移動(dòng)和網(wǎng)絡(luò)產(chǎn)品之間共享。它為Flutter的UI基礎(chǔ)提供高級(jí)抽象概念，包括動(dòng)畫，手勢(shì)，基本小部件類，以及面向最常見應(yīng)用程序需求的Material主題的小部件。如果您已經(jīng)使用過Flutter構(gòu)建項(xiàng)目，那么您將可以快速體驗(yàn)到Flutter for Web的功能。
Flutter for Web的神奇之處在于將Flutter UI的概念轉(zhuǎn)移到瀏覽器中。與Flutter移動(dòng)端框架不一樣的是，Flutter for Web的第一層（橙色的）是Browser，里面有Cabvas、JS Engine和DOM。Flutter團(tuán)隊(duì)重新實(shí)現(xiàn)了dart:ui庫，用針對(duì)DOM和Canvas的代碼替換了手機(jī)端使用的對(duì)Skia引擎的綁定。Browser這一層核心繪圖層完全是用Dart實(shí)現(xiàn)的，并使用Dart優(yōu)化的JavaScript編譯器將Flutter核心和框架與應(yīng)用程序一起編譯成一個(gè)可以部署到任何Web服務(wù)器的簡化的源JavaScript文件，可以在任何現(xiàn)代瀏覽器上運(yùn)行。
三、Flutter for Web的編譯器
（1）適用于生產(chǎn)（部署）環(huán)境的JavaScript編譯器：dart2js
dart2js: 為了部署環(huán)境而生成優(yōu)化的精簡的代碼。使用dart2js工具將Dart代碼編譯為可部署的JavaScript。
（2）適用于開發(fā)（測(cè)試）環(huán)境的JavaScript編譯器：dartdevc
dartdevc: 它提供漸進(jìn)式編譯和熱啟動(dòng)。你可以編輯Dart文件，在Chrome中刷新，并立即查看文件修改后的結(jié)果。dartdevc只編譯更新的模塊，而不是編譯應(yīng)用所依賴的所有軟件包。
四、核心功能點(diǎn)（作用）
- 1.使用Flutter構(gòu)建的與progressive-web-apps相關(guān)聯(lián)的程序。對(duì)Flutter的Web支持使現(xiàn)有的基于移動(dòng)的應(yīng)用程序可以打包為PWA，以覆蓋更廣泛的設(shè)備，或?yàn)楝F(xiàn)有應(yīng)用程序提供配套的Web體驗(yàn)。
- 2.嵌入式互動(dòng)內(nèi)容。Flutter為創(chuàng)建豐富的，以數(shù)據(jù)為中心的組件提供了一個(gè)強(qiáng)大的環(huán)境，可以輕松地在現(xiàn)有網(wǎng)頁中托管。無論是數(shù)據(jù)可視化，在線工具如汽車配置器還是嵌入式圖表，F(xiàn)lutter都可以為嵌入式Web內(nèi)容提供高效的開發(fā)方法。
- 3.在Flutter移動(dòng)應(yīng)用中嵌入動(dòng)態(tài)內(nèi)容。在現(xiàn)有移動(dòng)應(yīng)用程序內(nèi)提供動(dòng)態(tài)內(nèi)容更新的既定方法是使用Web視圖控件，其可以動(dòng)態(tài)地加載和顯示信息。Flutter支持現(xiàn)在提供統(tǒng)一的Web和移動(dòng)內(nèi)容環(huán)境，使您可以在線部署內(nèi)容或嵌入應(yīng)用程序而無需重寫。
五、最終目標(biāo)（特點(diǎn)）
- 1.運(yùn)行的快速，無抖動(dòng)，每秒60幀的性能。
- 2.Flutter在其他平臺(tái)上的一致行為和視覺效果。
- 3.高效的開發(fā)人員工具，可與現(xiàn)有的開發(fā)模式集成。
- 4.支持所有現(xiàn)代瀏覽器的核心Web功能。
六、計(jì)劃中的工作
- 1.支持文本功能，如選擇和復(fù)制粘貼。
- 2.支持插件。
flutter_web目前還沒有插件系統(tǒng)。暫時(shí)提供dart:html，dart:js，dart:svg,dart:indexed_db這些讓你和其他網(wǎng)絡(luò)庫能夠訪問的絕大多數(shù)瀏覽器的API。對(duì)于位置，相機(jī)和文件訪問等功能，F(xiàn)lutter團(tuán)隊(duì)希望通過單一API橋接移動(dòng)和網(wǎng)絡(luò)。 - 3.對(duì)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項(xiàng)目移植到Web注意事項(xiàng)
- 1.并非所有Flutter API都在Flutter for web上實(shí)現(xiàn)。
- 2.
Flutter for web目前還是預(yù)覽版，生成的代碼可能運(yùn)行緩慢。 - 3.桌面用戶界面的互動(dòng)并不完全很友好，因此
flutter_web即使在桌面瀏覽器上運(yùn)行，構(gòu)建的用戶界面也可能像移動(dòng)應(yīng)用程序一樣。 - 4.目前只支持Chrome瀏覽器上調(diào)試頁面，其他瀏覽器調(diào)試可能會(huì)有問題。
- 5.Flutter for Web小部件API與移動(dòng)小部件API相同，但是是單獨(dú)臨時(shí)打包的。
- 6.您可以重新打包現(xiàn)有的Flutter代碼以便在Web預(yù)覽上使用，但在Flutter for Web目前仍處于預(yù)覽階段，使用時(shí)會(huì)有一些警告。
八、示例代碼庫
Github: https://flutter.github.io/samples/
【聲明】本文首發(fā)于我的公眾號(hào)Flutter那些事，未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載！
