Flutter Web入门

javascript/jquery

浏览数:64

2020-6-27

AD:资源代下载服务

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

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

作者:xiangzhihong