Flutter Web 项目尝鲜

从 1.9 版本开始，Flutter 支持在 Web 上运行，之前有做过Flutter Mall移动端github上已经有600+star，
现在就开发Web端的Flutter Mall，该系列的文章会一直更新知道项目完结。

首先需要配置Flutter来支持Flutter Web开发，还没有搭建Flutter开发环境的同学自行百度，下面只介绍在已有的Flutter环境上支持Web，建议Flutter 版本在1.9及以上版本。

可以执行flutter --version来查看自己flutter的版本，我用的是1.11.0版本如果你的版本低于1.9使用flutter upgrade更新到最新版本

QQ截图20191204192738.png

flutter channel查看您当前使用的分支

QQ截图20191204192807.png

建议使用master分支 flutter channel master切换到master分支

QQ截图20191204192719.png

然后再次查看当前分支会发现已经切换到master了

使用flutter config --enable-web命令来开启Flutter支持web

QQ截图20191204193736.png

然后会在电脑的 C:\Users\Administrator\AppData\Roaming 路径生成 flutter_settings 文件， flutter_settings文件内容如下

QQ截图20191204194243.png

现在我们就来新建Flutter Mall Web项目，我用的编译器是AndroidStudio，步骤如下

QQ截图20191204194625.png

QQ截图20191204194825.png

QQ截图20191204194854.png

QQ截图20191204194952.png

可以看到跟之前Flutter项目不同的是多了一个web目录

QQ截图20191204195228.png

然后执行flutter run -d chrome命令就可以运行到浏览器上了

QQ截图20191204204525.png

到此Flutter Web尝鲜已经大功告成。