Flutter2.0初体验(Web支持)

常规操作，就是使用android studio编辑器，Flie--New--New Flutter Project

创新互联坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。十载网站建设经验创新互联是成都老牌网站营销服务商,为您提供做网站、网站制作、网站设计、H5页面制作、网站制作、品牌网站设计、微信小程序开发服务,给众多知名企业提供过好品质的建站服务。

一路直接Next+Finish ，项目就创建成功了。

常规的运行到手机或者模拟器上就不说了，下面说下运行到web浏览器上。

如上图，选择最后一个是手机真机调试，选择Chome或者Edge都可以运行到web浏览器中，选择好后点击绿色运行按钮。

flutter项目中添加web支持

Flutter 2.5.1

在项目目录下，在终端运行以下命令：

Flutter 中文文档 - Flutter 中文资源 | 在 Web 中展示图片

在无法修改服务器配置的情况下可以使用html渲染。此外官方文档中建议，如果显示的图片较多，使用html渲染性能更好

webview只支持移动端，其它平台尝试打开网页

webview - web view for flutter web application - Stack Overflow

使用 package_info_plus | Flutter Package (pub.dev) 替换package_info

使用 --base-href ，可设置服务器子目录

flutter web（3) 快速创建web工程并运行

如果没有输出可能原因有两个

1.我们使用 vscode ## vs code支持的额很好。

版本问题 -- 自行查找对应版本

修改 yaml 文件中的版本知道运行成功。或者直接改成any，从lock文件中找到真正版本再修改yaml中的文件

flutter 打包web

先运行下,看当前flutter 是否支持web项目, 如果没有enable-web: true 则输入 flutter config --enable-web

这时候项目中就包含了web文件夹.

输入 flutter build web 就可以在build文件夹中生成web文件, 将它放到到tomcat或者其他容器就能访问了!

附上项目的测试连接:

参考：

文章名称：flutter打开web,flutter打开微信发图片
网站路径：http://ybzwz.com/article/dssjhop.html