flutterweb,flutterweb on kubernetes

flutter 打包web

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

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

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

附上项目的测试连接:

参考：

Flutter2.0初体验(Web支持)

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

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

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

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

Flutter Web选择并上传文件

需要使用universal_html插件

universal_html是用来替代dart:html的，使用dart:html会有如下警告：

这是为了避免在Flutter Web插件包之外使用纯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打包中文乱码

flutter web有三种渲染模式，auto 、html 和 canvaskit。

flutter build web命令默认的渲染模式为auto，这种模式在移动端使用html渲染，在pc端使用canvaskit渲染。

目前我的flutter版本是2.5.2，pc端浏览器使用canvaskit渲染时中文会出现短暂的乱码（方块叉号），像这样：

我们可以指定渲染模式为html，就不会有这个问题了，命令如下：

指定渲染模式为canvaskit的命令为：

2021.10.21：flutter web对中文的支持貌似不太好，在手机浏览器调试web项目时，textfield hinttext有中文输入会有卡顿bug

九、Flutter之webview

Flutter的webview常用的第三方库有 flutter_webview_plugin 、 webview_flutter ，后者的文档较少，暂先学习flutter_webview_plugin。

添加依赖

导入包

iOS端info.plist配置，其中NSAppTransportSecurity节点是为了支持http协议

一个简单的demo

要监听链接跳转的话，实现onUrlChanged即可

添加依赖

导入包

iOS端info.plist配置

一个简单的demo

但是在webview里点击链接跳转的时候，测试机有时会跳转到系统浏览器上，并且点击文本框无法弹出键盘，交互性很弱。

二者共同的缺点是与javascript难以交互，目前只能实现Flutter-JS传递信息，还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持，比如拨号和调用摄像头等，期待后续完善。