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支持微信小程序，为他们点赞。