听说flutter 2.0后直接支持web端了, 意思就是不需要进行flutter channel变成master的,就可以体验web端, 怀着好奇心就开始了

1. 如果你的flutter版本还没有升级到2.0版本的话,请自行进行升级

image.png

flutter --version

flutter upgrade --force

2.创建一个新的flutter 项目

image.png

我这里创建一个叫flutter_app_web的项目;

如果小伙伴们已经安装过了chrome浏览器的话,如下图位置就可以看到多了一个Chrome(web)的选项,是不是很神奇!

image.png

选择Chrome(web)这个,然后把工程跑起来,就可以看到代码跑到web端喽.如下图

image.png

初步体验完成!!!

下面是打包web相关

1.我们稍微改动一下代码,把主题色由蓝色改为紫色! 如下图

image.png

细心的小伙伴可能会发现,安卓有android文件夹, iOS 有ios的文件夹,但目前目录结构是没有web文件夹的,如下图

image.png

2. 创建web文件夹

输入下面的命令创建web文件

flutter create .

然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图

image.png

3. 打包web版本

我们知道要给android手机用,需要打包apk出来, 要给iPhone手机用,需要打包ipa出来;同样的道理要给浏览器用,也需要打包web相关代码.

flutter build web --web-renderer html

flutter build web 

flutter build web --web-renderer canvaskit

经过测试,上面三种方式都可以打包web版本, 其中第一种是针对移动端的打包方式, 第二种是一般的打包方式, 第三种是针对pc端的打包方式.

那这3种方式打包出来,运行起来有什么不同呢

flutter build web --web-renderer html 打开速度最快,兼容性好(是指ie,chrome,safari等浏览器兼容)

flutter build web 打开速度一般,兼容性好

flutter build web --web-renderer canvaskit 打开速度最慢,兼容性好

结论
就是使用第一种打包方式会比较好

flutter build web --web-renderer html

打包过程中遇到的坑

坑1: 找不到打包完文件在哪里

如下图解决

image.png

坑2: 找到了index.html,用浏览器打开一片空白

这个属于正常的, 这个不像前端web ,html css js那套,点击index.html就能访问的. 在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等

坑3: 已经放到tomcat了,用浏览器打开还是一片空白

那是因为文件路径引用不对.解决办法有2种
方法1:
用编辑器打开index.html,能看到源文件,把<base href="/">,改成<base href="">

方法2:
用编辑器打开index.html,能看到源文件,把<base href="/">,改成你服务器的路径比喻说:<base href="http://192.168.1.80:3350/web/">

image.png

改完这个,再上传到服务器tomcat上,然后再来访问,相信就会正常了

我这边最后是这样的

image.png

结尾

今天的分享先到这里了,后续会分享更多的干货,欢迎点赞,加关注了,如下其他问题,欢迎留言喽~祝君好运!!

补充

有的小伙伴可能会说，我已经按照上面的步骤做了，但还是打不开，还是一片空白，是怎么回事啊！ 经过本人这边测试，低版本的IE浏览器 和 低版本的 Chrome浏览器是会出现这样的现象！这个时候，只需要把浏览器升级成最新的版本，就可以啦！！！祝君好运~