Flutter web 乱码&移动端pc端显示不一致问题

1.移动端浏览器与pc端浏览器浏览显示效果样式不一致

出现显示不一致的情况，是渲染器选择auto或者指定html的问题，需要指定为canvaskit渲染器，保证一致性。

首先默认打包web正式版本的命令是:flutter build web --release

其中隐藏了一个一个参数，如下：

--web-renderer 可选参数值为 auto、html 或 canvaskit。

• auto（默认）- 自动选择渲染器。移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。

• html - 强制使用 HTML 渲染器。

• canvaskit - 强制使用 CanvasKit 渲染器。

可以通过参数指定web打包后的渲染器选择，分别如下：

自动选择渲染器：flutter build web --release

指定html渲染器(可能出现手机浏览器端与pc浏览器端显示效果不一致，体积小)：flutter build web --web-renderer html --release

指定canvaskit渲染器(显示效果一致，但是体积变大)：flutter build web --web-renderer canvaskit --release

2.指定canvaskit出现中文乱码

如果出现莫名问题，一定要去GitHub上找issuse。出现问题的原因请参考pr，解决问题的方式很简单，升级flutter版本即可，输入如下命令：

flutter channel master
flutter upgrade -f

参考pr:

https://github.com/flutter/flutter/issues/74785

https://github.com/flutter/flutter/issues/73628

升级前的效果：

如下两个不同渲染，显示效果在移动端浏览器有差异，在代码一致的情况下。

auto 默认渲染：https://oy-paddy.github.io/flutter_web/web/index.html
指定canvaskit渲染(flutter版本2.0.1)：https://oy-paddy.github.io/flutter_web/web2/index.html 

 

升级后的效果:

指定canvaskit渲染(flutter版本2.0.3)：https://oy-paddy.github.io/flutter_web/web5/index.html

 

3.发布

打包成功后，如果你想放在springboot的static目录下访问，或者其他静态文件夹下，请修改build/web/index.html 文件的base地址，参考如下：