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

运行上面的命令会看提示还要添加环境变量,如下所示:

Flutter Web入门_第1张图片
按照提示,打开~ > .bash_profile文件把

export PATH="$PATH":"$HOME/Flutter/flutter/.pub-cache/bin"

添加进去,然后使用source ~/.bash_profile命令更新环境变量。到这webdev就完事了,命令行敲webdev测试一下,如果没有任何错误,会看到如下帮助信息。

Flutter Web入门_第2张图片
需要说明的是,如果没有用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入门_第3张图片

你可能感兴趣的:(flutter)