最近需要跟公司前端部門搞一次Flutter的技術(shù)分享，分享主題就是Live coding?；?0分鐘完成一個(gè)簡(jiǎn)單的美女圖庫(kù)（it男都好這口）。作為公司的前端部門，不僅是有android、iOS開發(fā)，還有眾多的H5前端開發(fā)。為了照顧H5的開發(fā)兄弟，也為了突出下谷歌Flutter有一統(tǒng)大前端的決心，還是需要對(duì)Flutter Web嘗嘗鮮。
Flutter使用的是dart語言，本來就是專門為javascript而生的。說到這里，聯(lián)想到大約十多年前的谷歌gwt項(xiàng)目http://www.gwtproject.org/，那時(shí)候正是web2.0、ajax興起，一大堆js框架涌現(xiàn)出來，例如prototype，dojo等等。作為一個(gè)java開發(fā)者，非常不習(xí)慣javascript缺少靜態(tài)編譯的特性。當(dāng)遇到gwt時(shí)，就像遇到初戀的感覺。但是當(dāng)用gwt開發(fā)大型項(xiàng)目的時(shí)候，缺點(diǎn)也蠻明顯的，那就是編譯速度，java編譯成js，速度非常非常慢，當(dāng)時(shí)2G內(nèi)存（當(dāng)時(shí)是高配）的機(jī)器都扛不住。所以我猜測(cè)莫非dart就是因此而生的？
從flutter web架構(gòu)上來看，framework層是一模一樣的，這也意味著，flutter的代碼可能只需要很小的修改就能編譯成web項(xiàng)目。
在嘗鮮Flutter Web前，我其實(shí)已經(jīng)完成了flutter demo的開發(fā)。整個(gè)demo也非常簡(jiǎn)單，用了一些基礎(chǔ)的組件，F(xiàn)utureBuilder和provider第三方狀態(tài)管理框架。下面是運(yùn)行效果。
所以我需要做的就是把這個(gè)flutter項(xiàng)目轉(zhuǎn)成flutter web項(xiàng)目，按照官方的遷移手冊(cè)https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md進(jìn)行遷移，除了官方文檔說的那些事項(xiàng)，我還發(fā)現(xiàn)以下這些問題。
1、provider代碼編譯不通過，發(fā)現(xiàn)需要修改成provider的web版本。
添加provider flutter web的dependency overrides：
2、Flutter web項(xiàng)目中除了需要把a(bǔ)ssets目錄拷貝到web目錄下，還需要修改代碼中的應(yīng)用路徑。在flutter項(xiàng)目中是"assets/loading.png"，而在flutter web中直接是"loading.png"。
整個(gè)遷移還是非?？斓模ㄩ喿x遷移文檔、搞定上面兩個(gè)問題，大概花了10分鐘左右的時(shí)間讓flutter web跑起來了。目前flutter web還是技術(shù)預(yù)覽版，還是有很多的一些bug和性能問題要解決，不建議用于生產(chǎn)系統(tǒng)，像我這樣嘗嘗鮮還是可以的，希望正式版能盡快的出來。
最后在cmd中運(yùn)行flutter pub global run webdev serve，瀏覽器打開http://127.0.0.1:8080就能看到效果了。
代碼已經(jīng)上傳到github：https://github.com/dengyin2000/beauty_sample_app
master分支就是flutter項(xiàng)目，for-web分支就是flutter web項(xiàng)目。
