Flutter Web

介紹

Flutter Web 是Flutter 新版本 stable1.9 的重磅發(fā)布的， 它已經(jīng)合并到 Flutter master 分支。這意味著我們可以真正地使用一套代碼、一套資源部署大前端。

環(huán)境配置

1、 查看你電腦上的 Flutter 在哪個 Channel 上，指令是：$flutter channel ，結(jié)果顯示如下：

$flutter channel 指令執(zhí)行結(jié)果

從上圖看到我的 Flutter 的 Channel 是在 *** master *** 上，所以不要在切換。否則要執(zhí)行 $flutter channel master 進行 Channel 的切換。

2、進行Flutter 的 grade 的更新，保持最新；指令是：$flutter upgrade ；該指令有可能運行時間較長，請耐心等待。如果報錯請考慮翻墻 或者 更換鏡像等。更新完畢后如下圖所示：

$flutter upgrade 指令執(zhí)行結(jié)果

3、讓 Flutter 支持 Web ，需要在終端執(zhí)行 $flutter config --enable-web 指令，執(zhí)行后顯示如下：

$flutter config --enable-web 執(zhí)行結(jié)果

??????如果要查看是否配置成功（都是成功的?），請執(zhí)行 $flutter config ,結(jié)果如下：

$flutter config 查看配置

4、在終端 cd 到構(gòu)建目錄下，執(zhí)行$flutter create flutterapp ,創(chuàng)建項目flutterapp, 如下圖所示：

$flutter create flutterapp 執(zhí)行結(jié)果

5、然后在 cd 到 flutterapp 的根目錄執(zhí)行 $flutter run -d chrome, 指令過程如下：

$flutter run -d chrome 指令

執(zhí)行完成后，你電腦上的 chrome 瀏覽器就會打開，如下圖：

image.png

Flutter Web 項目結(jié)構(gòu)

項目的目錄結(jié)構(gòu)如下：

Flutter Web 項目目錄

從上圖我們看到 Flutter Web 項目比不支持的Flutter 項目多了一個 web 目錄。如上圖紅色框內(nèi)的內(nèi)容。 下個文章介紹 Flutter Web 項目某些文件的作用。