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

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