flutter for web

2019-09-21

谷歌开发者大会上宣布flutter1.9正式发布，并且flutter_web已经合到dev合master。
我们来体验一下。

首先切换到master并升级flutter到最新版本

1 2	flutter channel master flutter upgrade

安装webdev

1	flutter pub global activate webdev

这里需要注意一下，安装之后看提示还要添加环境变量

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"添加进去，然后更新环境变量。

1	source ~/.bash_profile

到这webdev就完事了，命令行敲webdev测试一下

1 2	webdev /Users/xxx/.pub-cache/bin/webdev: line 7: dart: command not found

惊不惊喜，意不意外，这是因为dart没有添加环境变量。
在.bash_profile中添加dart环境变量

1 2	export DART_HOME=/Users/xxx/sdk/flutter/bin/cache/dart-sdk/bin export PATH=${DART_HOME}:${PATH}

刷新环境变量

1	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版本不匹配而出现如下提示

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

出现这种情况把dart卸载

1	brew uninstall dart

然后如前边所述将flutter内置的dart-sdk添加到环境变量就可以了。
启用flutter_web

1	flutter config --enable-web

出现如下提示

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

接下来创建一个flutter项目

1 2	flutter create myapp cd myapp

可以看见目录下多了一个web文件夹里边是一个index.html，内容如下

<!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里跑一下项目

1	flutter run -d chrome

效果如下，一个熟悉的页面。

可以看见大多数都是自定义标签，当然也不全是自定义，比如中间那一行文本和数字就是p标签，关于渲染flutter用了CSS Paint（能不能打开看缘分），就是用css画图，挺有意思的api。
点sources，然后command+o

可以看见这里并不是js文件，而是dart文件。
选择main.dart，看到的就是main.dart的源码。
接下来说一下调试，直接用chrome的开发者工具查找DOM是比较困难的，这个时候需要android Studio，在android Studio中打开myapp，设备选择chrome(web)，点绿色的三角跑起来

在View > Tool Windows下选择Flutter Inspector

打开之后是这个样子

可以看到不知道多少个层级

这个按钮可以在页面上显示widget的边界

这个准星一样的按钮相当于浏览器的审查元素，点击之后页面左下角会出现一个放大镜，想要重新在页面上选择元素需要点击放大镜，也可以在Inspector之中直接选择，页面上对应的元素会高亮。
这里再说一下另一种方式，chrome内置了Dart DevTools
项目跑起来之后点下边这个按钮

chrome会弹出个新窗口

和Flutter Insector类似，但是更好用一点。

关于dart文件的调试，和js一样可以打断点

接下来是打包

1 2	➜ myapp flutter build web Compiling lib/main.dart for the Web... 26.4s

build结束后看一下build > web目录下

1 2	➜ web ls assets index.html main.dart.js main.dart.js.map

dart被编译成了js