flutter移动端向web端移植

 

项目中使用的flutter1.7.8版本中还未将web端与移动端进行统一，所以将web端与移动端分为两个项目。

在包方面

1. Web端与移动端在package方面主要的差异有移动端使用Flutter的包，web端使用flutter_web包
2. 移动端能够使用的dart:io包在web端使用不了，web有个io.dart用来替代dart:io，因为flutter对web的支持时间还比较短，其中的方法没有实现，如post和get方法返回的是null（图一）,类方面，dart:io有的File等类，在io.dart没有。
3. 另外一个要注意的是使用了HTTPClient来实现代理的话，这个类在web端功能不全，而web端可以电脑直接抓包，也就不需要这个东西。

在库的使用方面

1. 首先是Sharedpreferences这些移动端专有的库使用不了
2. 另一个就是库中导入了dart:io的库也是使用不了的，通过不了编译。
3. 有些库中导入的是flutter，这种也是使用不了的，不过在使用provide库的时候，因为库只有一个文件，所以做了下尝试，将库的文件放入项目，将库导入的flutter包改为flutter_web，发现能够正常的使用，说明有些库拿下来改改还是能用的。

在网络方面

1. 浏览器的跨域访问限制使得flutter生成的js代码在访问网络方面需要服务端支持跨域访问，这个问题如果服务端没有限制访问的话，可以在谷歌浏览器使用Allow-Control_Allow_Origin这个扩展程序临时的解决问题。
2. 在使用了扩展程序后，开始使用的http库进行请求，因为没有带Header，浏览器访问服务器并未携带Access-Control-Request-Header的请求头，所以能够正常的访问网络，而如果请求带了Header，那么这个Header会被当成 Access-Control-Request-Header参数传给服务器（图二），在正式的请求之前，浏览器发送了一个options的跨域请求，带上了跨域请求头，服务端根本就没有限定什么跨域请求头，所以反而被认为是跨域请求给挡了。

从flutter1.9开始，web端并入了主代码库，web端也是导入flutter包，那么provide修改flutter为flutter_web也就不需要了。通过运行flutter1.9的一个支持web的example（使用的Android 9的小米8se手机，chrome为76.0.3809.132正式版），我发现web确实相对移动端还有些问题，最大的一个是video_play在web端加载不出来视频，一直处于加载中的状态，chewie使用了video_play，也存在这个问题。

在网络方面，dio开始支持web，调整了架构，发布了2.0的版本，2.0发现了问题，又重新调整，发布了3.0。dio如果用于项目需要处理跨域访问的问题，dio发送的请求，会设置Content-type的header，会被浏览器作为跨域访问的请求头发出去，而被浏览器拦截。

图一

 

图二