flutter web初探

距離flutter正式發佈已經有半年了。目前flutter發展如日中天，重新加qq羣的朋友數量就能夠看出來。flutter早已經支持了桌面版的開發，前一段時間又出來了web版。看來離flutter一統江湖，哦不，一統前端的時間已經不遠了：）。如今就差小程序這麼個前端領域沒有被flutter觸及到了，對於國人的diy能力，我是深信的。若是真有那麼一天，相信flutter也能翻譯成小程序的版本，看看taro就知道了。

好了閒話說完，下面正式進入主題：

環境

安裝flutter

安裝flutter的最新版本，仍是建議直接從官網直接下載，目前地址:

https://storage.googleapis.co...

下載完畢後解壓縮到一個目錄中，而且配置一下環境變量，這個在咱們的環境安裝篇裏面已經講過了，這裏再也不重複。

完畢以後運行一下

flutter precache

配置web版環境

按照官方的要求:https://github.com/flutter/fl...

運行一下這個命令:

flutter pub global activate webdev

這個步驟應該沒有毛病，至關順利。 不過出現了這麼個警告:

咱們依照這裏的指令，將export PATH="$PATH":"$HOME/working/flutter/.pub-cache/bin"加入配置。

咱們把官方的demo clone下來，

git clone https://github.com/flutter/flutter_web.git

進入到example中的hello_world,運行下flutter pub upgrade

cd examples/hello_world
flutter pub upgrade

而後運行webdev serve

這裏提示了dart: command not found

顯然，這裏是少了dart這個命令，以前沒有將dart sdk加入環境變量中，通過一番搜索，發現原來在這裏：

flutter/bin/cache/dart-sdk/bin

咱們將這個加入到環境變量

再次運行:

顯然須要運行:

pub get

再次運行:

效果:

來個複雜點的例子:

進入examples/gallery

運行

pub get
webdev serve

效果: