Web问题汇总.md

Web 问题汇总（flutter 2.2.0）

service worker

flutter 2.2中新的service worker加载机制目前发现兼容不够，部分浏览器无法正常工作。（web/index1.html）

CanvasKit渲染（默认PC浏览器）

中文文字、表情等加载延迟导致乱码现象

主要原因是完整的字体表情包太大，不能是一次加载完成，按需加载过程导致此类现象。

具体问题跟进可以关注：

• [web] Emojis take a few seconds to render on canvaskit

• [Web] [CanvasKit][Feature Request]: Load fonts as soon as detecting browser locale

HTML渲染（默认手机浏览器）

使用TextOverflow.ellipsis属性。

现象如下：

• 文字没有超出，后面出现红色省略号。

• 文字超出，未出现省略号。

其他相关问题：

• [canvaskit] font renders missing glyph when text overflow is ellipsis

指定渲染引擎

flutter run -d chrome --release --web-renderer html
// 或
flutter run -d chrome --release --web-renderer canvaskit

总结：HTML渲染相较于CanvasKit渲染，UI还原度差一些，但综合性能相对较好。

已解决问题

使用Transform。

在变换Widget时，添加的LinearGradient没有渐变效果。。。（例子见lib/account/widgets/withdrawal_account_item.dart）

目前处理方法是添加RepaintBoundary。

按钮的大小在移动端与Web端不同

可以ThemeData中全局指定visualDensity属性为VisualDensity.standard。

详情见Buttons not respecting default dimensions

已修复问题

使用DecorationImage的colorFilter属性。

ColorFilter.mode中的color为null时，Web报错NoSuchMethodError: invalid member on null: 'red' 。 2.2.0上ColorFilter.mode中的color以不能设为null。

其他相关问题：

[web] wrong image filter on web app built with HTML renderer

使用Locale报空安全错误

2.2.0已修复，详情见[Web]: App throws null safety errors on Locale using latest stable, but works on Master