Flutter新版本 Web App 嚐鮮

隨着 Flutter的快速發展，如今 Flutter生態也日漸壯大，偶然打開 Flutter的 官方文檔發現已經支持了 Web開發，因而便前去探探路，給你們分享點乾貨。

準備工做

首先咱們這裏以默認Flutter建立的項目爲例，也就是New一個Flutter Project,有的同窗會發現目錄下並無Web這個目錄，因此在參考官網進行flutter run -d chrome命令的時候是無效的。

第一步先檢查當前的Flutter 分支是否處在master上面。執行命令

flutter channel 
複製代碼

若是在master分支上Terminal內會打印以下。

flutter channels:
  beta
  dev
* master
  stable

複製代碼

若是沒在master分支上則切換至master上.

flutter channel master
複製代碼

隨後對Flutter的SDK進行更新，執行以下命令。至此咱們的SDK就具有構建Web的能力了。

flutter upgrade
複製代碼

構建Web項目

更新完SDK的同窗們確定都想躍躍欲試,遂照着官網敲下flutter run -d chrome,隨後發現SDK報錯~此處仍是埋了一坑，其緣由是SDK沒有啓用Web工具構建項目，目前Web開發還處於發育階段。執行以下命令啓用項目。

flutter config --enable-web
複製代碼

而後再執行

flutter create .
複製代碼

當你看到Flutter在終端給你的彩蛋就說明已經搭建成功了，而且會告訴你如今Web工具處於試錯階段，生產環境仍是要慎用。此時你會發現你的項目存在了一個Web的目錄。

Debug And Release

執行完上述命令事後咱們就可使用Chrome來調試咱們的頁面了，在Android Studio中設備選擇會多了幾個選項

選擇 Chrome(web)會直接運行在 Chrome瀏覽器上,當選擇 Server(web)的時候會在終端輸出一個地址如 http://localhost:54125/將地址輸入到瀏覽器中便可訪問。也可用過命令工具進行 Debug

flutter run -d chrome 
複製代碼

Android Studio默認會使用dhttpd來搭建HTTP服務，關於dhttpd我就不過多贅述,官方文檔有詳細的描述，實際上相似於python -m SimpleHTTPServer 80。

當咱們嘗試發佈的時候，先對Web項目進行構建，在項目根目錄下執行

flutter build web
複製代碼

在build目錄下產生對應的文件，結構以下。

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map
複製代碼

在打包的時候則需將build目錄總體打包，去除ios及android目錄，上傳到服務器便可。

隨後在服務器下對其進行解壓，CD到/build/web目錄下開啓Http服務，別人就能夠看到你的網站啦，官網的例子是dhttp和python,我試用Nginx也徹底沒有問題。

若是想使用本地服務調試，也能夠CD到/build/web執行

flutter pub global run dhttpd
複製代碼

端口默認是8080，在瀏覽器中輸入localhost:8080便可查看頁面。 沒有dhttpd話用pub安裝一下便可。

總結

從Flutter的進展能夠看出Google在跨平臺上下的決心,一份代碼如今能夠產出三端，不過我我的以爲一個項目有了IOS和Android兩端後，沒人會去用Web App吧，並且我以爲頁面初始化加載速率略慢。不過對於咱們客戶端的同窗來講沒事還能寫寫網頁仍是不錯的了。