flutter_web 记录

以下都是俺的好同事教俺的

flutter for web实现将移动demo打包web

配置web环境

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请求，如果发现接口无法请求，多半是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 Chrome可以将项目运行到Web Server上，当下会生成一个ip+端口号的地址，点击在浏览器打开即可访问，

flutter for web打包
没错当你调用flutter build web之后，已经在build文件夹下生成了web，只需要把build中的web文件夹下的都复制到服务器即可跑起来了，就是这么方便。

Canvaskit
https://blog.csdn.net/qq_35867494/article/details/118516893
 
判读是否是web。get里面也有判断的方法
const bool kIsWeb = identical(0, 0.0);

在模拟器运行web
1.打开终端，输入命令：sudo apachectl start   

2.输入mac的密码（此时将开启apache, mac自带apache）

3.浏览器中访问：http://127.0.0.1/    出现  it works 字样 ，说明本地服务已经开启

4.点击Finder， 快捷键Command  + Shift + G 前往文件夹 /Library/WebServer/Documents

5.将自己的web项目直接放进去(由于需要管理员权限，需要输入密码)

6.在浏览器中输入 http://127.0.0.1/项目文件名/   此时默认打开项目下的index.html文件

7.终端输入 ifconfig 查看自己电脑的 ip 地址 (我的ip是 192.168.2.1 )

8.此时与此电脑处于同一个局域网下的设备都可以通过这个ip地址访问 /Library/WebServer/Documents 目录下的所有资源

9.在手机浏览器地址中  http://192.168.2.1/项目文件名/  此时手机上默认打开项目下的index.html，然后就可以开始测试了

说明：

1. 重启命令 -- sudo apachectl restart   关闭命令 -- sudo apachectl stop  

2. 测试完成后，记得执行关闭命令

3. 只要电脑和手机连接同一个wifi，就是在一个局域网下