flutterweb,flutterweb on kubernetes-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

flutterweb,flutterweb on kubernetes

flutter 打包web

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

创新互联公司专注于企业成都全网营销、网站重做改版、澄城网站定制设计、自适应品牌网站建设、H5场景定制商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为澄城等各大城市提供网站开发制作服务。

这时候项目中就包含了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传递信息,还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持,比如拨号和调用摄像头等,期待后续完善。


网页题目:flutterweb,flutterweb on kubernetes
浏览地址:http://kswsj.cn/article/dsiocgj.html

其他资讯