Flutter Web入門

Google在今年5月的Google大會上發佈了Flutter1.5.4版本，同時也推出了Flutter for Web的預覽版，並開啓了Flutter的全棧框架之路。同時，今年9月舉行的谷歌開發者大會上，Google宣佈flutter1.9正式發佈，而且flutter_web已經被合到master分支，說明flutter_web愈來愈受到Google的重視。

首先切換到master並升級flutter到最新版本，或者下載最新的Stable channel版本，使用命令方式升級的命令以下：

flutter channel master
flutter upgrade

默認狀況下，flutter_web是沒有啓動的，須要開發者手動啓動它，啓動的命令以下：

flutter pub global activate webdev

運行上面的命令會看提示還要添加環境變量，以下所示：

按照提示，打開~ > .bash_profile文件把

export PATH="$PATH":"$HOME/Flutter/flutter/.pub-cache/bin"

添加進去，而後使用source ~/.bash_profile命令更新環境變量。到這webdev就完事了，命令行敲webdev測試一下，若是沒有任何錯誤，會看到以下幫助信息。

須要說明的是，若是沒有用flutter自帶的dart-sdk而是單獨安裝，這裏可能會由於dart版本與flutter版本不匹配而出現以下提示。

Can't load Kernel binary: Invalid kernel binary format version. 
No active package webdev.

出現這種狀況須要先把dart卸載，而後如前邊所述將flutter內置的dart-sdk添加到環境變量就能夠了，卸載的命令以下：

brew uninstall dart

而後，使用以下的命令啓動flutter_web。

flutter config --enable-web

出現以下提示，說明咱們尚未建立項目。

Setting "enable-web" value to "true".

接下來，就能夠使用命令行或者Android Studio、VSCode等可視化工具來建立Flutter Web應用了，以下圖所示。

能夠發現，新建的Flutter Web項目比原來的項目會多兩個包，即web包和macOS包。要運行Flutter Web應用或者桌面，只須要點擊工具欄上對應的設備便可，以下圖所示。

選擇運行環境爲Chrome(web)，而後運行Flutter Web示例項目，最終效果以下圖所示。

當選擇運行的環境爲桌面時，系統運行時就會啓動一個桌面應用，以下圖所示。