Flutter Web初尝试以及一些问题解决

Flutter 2在3月份发布以后，开放了移动端、Web端、桌面端的发布能力，之前一直使用Flutter开发移动应用，没有敢用Flutter做Web项目，近期有时间自己调研了一下，也遇到了一些问题，在这里记录一下。
创建一个Flutter项目做Demo，集成了一些插件：项目地址

目前遇到的问题（不断更新中…）

1、跨域

2、多设备调试

一、跨域问题

主要使用了cached_network_image来加载网络上的图片来展现跨域问题，直接用Image.network也是可以的，在网络上随便找了一张图片via.placeholder.com/350×150

PS: 一般看一个插件支持那些平台，可以在pub.dev上看，cached_network_image显示并不支持web，但是用浏览器运行起来后，也是可以调用相册和拍照的。

1、本人习惯用VSCode开发，VSCode运行Flutter Web项目首先选择设备为Chrome

2、然后选择Debug，点击三角符号运行

3、不出意外，运行成功后，Chrome就展现出项目了，这里首页用了一个第三方框架：gesture_password_widget，因为也想看看这个手势密码在Web上的表现

4、根据上面的提示滑动正确的手势顺序，就进入了功能列表页面

5、点击Cached Network Image Demo，进入测试加载图片页面，发现图片加载失败，并且控制台报错了

6、很明显，这边请求的图片服务器和页面运行的地址不通，产生了跨域问题

7、解决方法在这篇文章里说的很详细：Flutter Web 跨域问题解决方案，里面推荐了多种方法，我这边用了第三种，类似启动一个代理服务的方式，在Demo项目里的lib/server/cors.dart文件中配置目标服务器地址和代理地址及端口，然后通过终端运行该文件，启动一个代理服务。

dart xxx/xxx/xxx/cors.dart
复制代码

8、这里我配的代理服务是localhost:4040，现在打开localhost:4040/350×150，图片加载成功

9、然后把Demo项目里加载图片的地址改一下

// imageUrl: "http://via.placeholder.com/350x150",
imageUrl: "http://localhost:4040/350x150",
复制代码

10、可以看到，图片已经可以加载出来了

二、调试问题

接着上面，跨域问题解决后，我想在手机上通过浏览器测一下，目前项目启动在电脑上的地址是http://localhost:52754/#/，确认电脑和手机处于同一个网段后，我打开手机Safari浏览器，然后将地址的localhost修改为电脑的ip，发现居然无法打开

尝试了不同的启动方式，如

flutter run -d chrome
复制代码

也不起作用

在网上搜索的时候发现有人咨询过类似问题：flutter – 从真实的移动浏览器访问flutter localhost，里面的回答解释了为什么Flutter运行的Web项目不能充当服务器被访问，然后也给出了解决方法，大致意思就是让你先编译出来Web项目，然后在本地部署一下，就可以通过其他设备访问了。

这个方法虽然可以解决，但是不方便一边开发一边调试，于是再找解决方案，发现有人提供了这样一条命令

flutter run -d chrome --web-hostname xxx.xxx.xxx.xxx --web-port xxxx
复制代码

尝试了一下，通过终端将电脑的ip地址输进去，再加个端口号，运行起来后，发现可以通过外部设备访问了

接着我们修改一下代码内容，发现页面没有自动刷新，在控制台中看到如下提示，意思是改动过后，需要在终端输入命令r来刷新

PS：这样会有一个新问题，就是上面跨域问题的配置，需要将localhost换成相同的ip地址，这样才能在外部设备也访问到配置的外部服务器地址

暂时先写到这里，后面碰到新的问题再来更新。

未完待续…