谷歌開發(fā)者大會上宣布flutter1.9正式發(fā)布，并且flutter_web已經(jīng)合到dev合master。
首先切換到master并升級flutter到最新版本
flutter channel master
flutter upgrade
安裝webdev
flutter pub global activate webdev
這里需要注意一下，安裝之后看提示還要添加環(huán)境變量
Installed executable webdev.
Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):
export PATH="$PATH":"$HOME/.pub-cache/bin"
Activated webdev 2.5.1.
打開~ > .bash_profile把export PATH="$PATH":"$HOME/.pub-cache/bin"添加進去，然后更新環(huán)境變量。
source ~/.bash_profile
到這webdev就完事了，命令行敲webdev測試一下
webdev
/Users/xxx/.pub-cache/bin/webdev: line 7: dart: command not found
驚不驚喜，意不意外，這是因為dart沒有添加環(huán)境變量。
在.bash_profile中添加dart環(huán)境變量
export DART_HOME=/Users/xxx/sdk/flutter/bin/cache/dart-sdk/bin
export PATH=${DART_HOME}:${PATH}
刷新環(huán)境變量
source ~/.bash_profile
重新試一下webdev如果顯示如下，說明沒有問題
A tool to develop Dart web projects.
Usage: webdev <command> [arguments]
Global options:
-h, --help Print this usage information.
--version Prints the version of webdev.
Available commands:
build Run builders to build a package.
help Display help information for webdev.
serve Run a local web development server and a file system watcher that rebuilds on changes.
Run "webdev help <command>" for more information about a command.
這里需要注意一下，如果沒有用flutter自帶的dart-sdk而是單獨安裝，這里可能會因為dart版本與flutter版本不匹配而出現(xiàn)如下提示
Can't load Kernel binary: Invalid kernel binary format version.
No active package webdev.
出現(xiàn)這種情況把dart卸載
brew uninstall dart
然后如前邊所述將flutter內(nèi)置的dart-sdk添加到環(huán)境變量就可以了。
啟用flutter_web
flutter config --enable-web
出現(xiàn)如下提示
Setting "enable-web" value to "true".
接下來創(chuàng)建一個flutter項目
flutter create myapp
cd myapp
可以看見目錄下多了一個web文件夾里邊是一個index.html，內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myapp</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
從這里可以看見，最終也是編譯成js文件。
先看一下已連接的設備
? myapp flutter devices
3 connected devices:
macOS ? macOS ? darwin-x64 ? Mac OS X 10.14.5 18F132
Chrome ? chrome ? web-javascript ? Google Chrome 76.0.3809.132
Server ? web ? web-javascript ? Flutter Tools
這里合之前相比多了Chrome和Server
在chrome里跑一下項目
flutter run -d chrome
效果如下，一個熟悉的頁面。
image.png
可以看見大多數(shù)都是自定義標簽，當然也不全是自定義，比如中間那一行文本和數(shù)字就是
p標簽，關于渲染flutter用了CSS Paint，就是用css畫圖，挺有意思的api。點
sources，然后command+o
image.png
可以看見這里并不是js文件，而是dart文件。
選擇
main.dart，看到的就是main.dart的源碼。接下來說一下調(diào)試，直接用chrome的開發(fā)者工具查找DOM是比較困難的，這個時候需要
android Studio，在android Studio中打開myapp，設備選擇chrome(web)，點綠色的三角跑起來
image.png
在
View > Tool Windows下選擇Flutter Inspector
image.png
打開之后是這個樣子
image.png
可以看到不知道多少個層級
image.png
這個按鈕可以在頁面上顯示
widget的邊界
image.png
這個準星一樣的按鈕相當于瀏覽器的審查元素，點擊之后頁面左下角會出現(xiàn)一個放大鏡，想要重新在頁面上選擇元素需要點擊放大鏡，也可以在
Inspector之中直接選擇，頁面上對應的元素會高亮。這里再說一下另一種方式，chrome內(nèi)置了
Dart DevTools項目跑起來之后點下邊這個按鈕
image.png
chrome會彈出個新窗口
image.png
和
Flutter Insector類似，但是更好用一點。
關于dart文件的調(diào)試，和js一樣可以打斷點
image.png
接下來是打包
? myapp flutter build web
Compiling lib/main.dart for the Web... 26.4s
build結(jié)束后看一下build > web目錄下
? web ls
assets index.html main.dart.js main.dart.js.map
dart被編譯成了js
