Flutter Web架構(gòu)? ：
要使Flutter運(yùn)行于Web之上狠鸳，需要解決三個(gè)主要問題：1. 編譯Dart為JavaScript 2. 選擇可運(yùn)行于Web之上的功能件舵，剔除與特定平臺相關(guān)的模塊 3. 選擇合適的Web特性來實(shí)現(xiàn)Flutter的功能脯厨。為此合武，F(xiàn)lutter項(xiàng)目組實(shí)現(xiàn)了三種原型：純組件層（widgets）、組件加自定義布局（Widgets + custom layout）盟庞，以及構(gòu)建全新的底層Web引擎什猖。諸多嘗試后红淡，F(xiàn)lutter項(xiàng)目組發(fā)現(xiàn)只有第三種方式才能夠保證真正跨平臺，即為Flutter實(shí)現(xiàn)一個(gè)全新的Web引擎摇零。
web框架層和mobile的幾乎一模一樣颈渊。因此只需要重新實(shí)現(xiàn)一下引擎和嵌入層俊嗽，不用變動Flutter API就可以完全可以將UI代碼從Android / IOS Flutter App移植到Web铃彰。Dart能夠使用Dart2Js編譯器把Dart代碼編譯成Js代碼牙捉。大多數(shù)原生App元素能夠通過DOM實(shí)現(xiàn)敬飒，DOM實(shí)現(xiàn)不了的元素可以通過Canvas來實(shí)現(xiàn)无拗。
廢話不多說被饿，直接上步驟：
一，安裝：
1闪金，更新flutter需要1.5.4以上的版本：flutter channel master && flutter upgrade
2论颅，檢查版本：flutter doctor
3嗅辣，把.pub-cache/bin加入PATH中比如：
windows：
C:\Users\<your-username>\AppData\Roaming\Pub\Cache\bin
mac或linux
$FLUTTER_HOME/.pub-cache/bin
4，安裝webdev
$ flutter pub global activate webdev
webdev --help
二愿题，運(yùn)行已有項(xiàng)目：
谷歌已經(jīng)把gallery示例運(yùn)行到web上蛙奖，可以看到效果還是很驚人的雁仲，后面有資料有鏈接可以詳細(xì)參考。下面運(yùn)行g(shù)alllery步驟：
把代碼下載下來https://github.com/flutter/flutter_web.git
進(jìn)入到倉庫的gallery目錄
cd examples/hello_world/
更新包
flutter pub upgrade
本地運(yùn)行
webdev serve
如果提示webdev需要升級缸兔，可以再次執(zhí)行下面的命令即可：
flutter pub global activate webdev
三惰蜜，其他：
Flutter Web應(yīng)用可以調(diào)用所有已有的Dart Web庫受神，而且支持使用dart:js和package:js與JavaScript交互。
出于性能以及可移植性考慮联四，F(xiàn)lutter Web應(yīng)用目前不支持直接使用CSS撑教，即跟原生Flutter一樣，全部使用組件代碼來實(shí)現(xiàn)樣式鱼辙。
Flutter Web應(yīng)用暫不支持嵌入到其他Web應(yīng)用中倒戏，但可能會使用iframe或Shadow Dom方式實(shí)現(xiàn)杜跷。
其他Web組件如：html自定義標(biāo)簽矫夷、React組件、Angular組件等淑趾，都還不能嵌入Flutter Web應(yīng)用中扣泊。主要問題是這些組件會引入CSS嘶摊，可能帶來不可預(yù)知的影響，項(xiàng)目組還在研究應(yīng)對方案阱飘。
Flutter Web版將保證最大的可移植性虱颗，但并不意味所有Flutter應(yīng)用都不用修改就能運(yùn)行于Web之上，比如：使用了ARCore等Web端不具備的功能的應(yīng)用高帖。
