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示例项目，最终效果如下图所示。

当选择运行的环境为桌面时，系统运行时就会启动一个桌面应用，如下图所示。