flutter for web实现将移动demo打包web的小实验

文章直接的间隔越来越长了,一个多月过去了,总结一下进步甚小,只在java springboot的基础上写了获取个人信息和修改个人信息的接口,然后也就是flutter在web上的测试了。

转载注明出处,CSDN第七篇

其实这里并没有什么含金量,毕竟官方文档就已经有相关介绍,这里只是总结我的经验,防止大家走弯路。

flutter for web支持

首先使用flutter upgrade命令将flutter更新最新版本,然后flutter config --enable-web命令开启支持web功能。
开启成功后会提示为true,这个时候cd 到空文件夹下调用flutter create 项目名,就可以生成一个带web的项目,其实就是在android,ios,lib的同级多了一个web文件夹,如果你以前有flutter写好的移动端项目就可以将这个web文件夹复制到项目中即可使用。
demo里生成的文件只有图标、manifest.json和index.html。

flutter for web注意

1、设备判断

当运行到web端,原先对于手机端权限的调用等都会失效或者报错,需要一个全局的状态去判断一下,使用const bool kIsWeb = identical(0, 0.0);可以有效的判断是否是web端,不用去找第三方,同时Platform.isAndroid等会失效或报错

2、接口请求

网络请求使用dio3.0.0以上即可支持web请求,我这里使用的是dio: ^3.0.9,如果发现接口无法请求,多半是web的跨域问题,让服务器的小伙伴修改一下接口即可。

2、Log打印

跑到web之后发现看不到log了,不得不在手机端修改有问题的地方。但是有些log我设置到控件上或者使用Toast弹到屏幕上,也算是凑合着看吧,我并没有打断点的习惯,toast项目中有,底部会挂出gitee地址分享。

3、尺寸问题

当项目运行到web上,除了手机端一致,如果在电脑上那可真是有点不雅,所以我这里直接获取屏幕宽度,发现宽比高大的多的时候就将尺寸按16:9来固定了,也就是在电脑浏览器看到的也是手机端的大小。在MaterialApp中使用final size = MediaQuery.of(context).size;可获取屏幕尺寸,注意必须在MaterialApp的里面获取哟。

flutter for web运行

查询设备:flutter devices可以查看当前在线的设备,开启web后会显示浏览器或Web Server
生成web:flutter build web可以将当前的dart文件生成对应的js放在web目录下
运行web:flutter run -d web可以将项目运行到Web Server上,当下会生成一个ip+端口号的地址,点击在浏览器打开即可访问,

flutter for web打包

其实这个就太简单了,只要知道生成的文件在哪里即可。
没错当你调用flutter build web之后,已经在build文件夹下生成了web,只需要把build中的web文件夹下的都复制到服务器即可跑起来了,就是这么方便。

2020-08-07补充

正式上线时,将打包好的web项目放到服务器的tomcat的webapps下,并且tomcat在运行的情况下才可以访问。
本地测试时,我用java的web项目的结构图:大体就是将index放在资源文件的templates下,将js等放在static里,运行该项目可在本地环境访问。

在这里插入图片描述

flutter for web总结

总体来说这次干货不多,flutter对web的支持还算是比较方便的,基本没有大改的地方,当然第三库的完善也是越来越多,总体来说flutter这种原生的页面肯定会比较吃香,虽然现在还不是最完美,但是也能开发出一些可观的项目了。
也许是因为我只写了一个小小的demo还没发现太复杂的问题,后续如果有疑难杂症我还会继续更新的。
下一步想了解uni-app方面,或者继续进修java的springboot。
项目地址: https://gitee.com/sky-nine/piao.git.
继续期待flutter对于小程序的支持吧,不过貌似京东有个团队在研究,之前他们发布React Native转换并运行微信小程序,现在又在研究flutter支持微信小程序,为他们点赞。

代码交流 2021