Flutter Web安卓Chrome端ActionChip标签出现意外灰色下划线问题

问题描述 #

我的其中一个ActionChip的标签上出现了意外的灰色下划线。该问题出现于Flutter Web场景，仅在安卓端Chrome浏览器可复现，iOS Safari、桌面端Chrome均未出现该问题。

该ActionChip用作筛选按钮，点击后可选择不同取值，仅部分取值会触发该下划线显示。我了解Flutter常见的黄色下划线报错，但这类灰色下划线我是首次遇到。

相关代码 #

ActionChip(
    label: Text(_label(),
        style: Theme.of(context).textTheme.bodyText2.copyWith(
            color: (_hasSelectedFilters())
                ? AppTheme.filterText
                : AppTheme.highEmphasis)),
    backgroundColor: Colors.transparent,
    side: BorderSide(
        color: (_hasSelectedFilters())
            ? AppTheme.highEmphasis
            : AppTheme.mediumEmphasis,
        width: 1.0),
    labelPadding: EdgeInsets.only(left: 8.0, right: 8.0),
    onPressed: _showFilters,
)

String _label() {
  if (!_hasSelectedFilters()) {
    return "Material type";
  } else if (widget.controller.selectedFilters.length == 1) {
    return _filters
      .firstWhere((element) =>
          element.value.code == widget.controller.selectedFilters.first)
      .label;
  } else {
    return "${widget.controller.selectedFilters.length} materials";
  }
}

已尝试的临时方案 #

我已经通过将Text组件替换为RichText组件解决了该问题，但这一解决方式非常奇怪，因为Text组件本身就是RichText的封装组件。

根本原因 #

这个灰色下划线是安卓端Chrome浏览器的原生拼写检查功能触发的样式，并非Flutter框架本身的报错提示，和常见的黄色溢出下划线、Debug模式黄色下划线不属于同一类问题。
触发逻辑完全匹配对应场景：

• 仅安卓Chrome生效：桌面端Chrome、iOS Safari默认不会对页面内非输入框的文本开启拼写检查
• 仅部分文本触发：只有拼写检查判定为拼写错误的英文单词才会被加上下划线，拼写正确的单词、非英文内容不会出现
• Text组件触发而RichText不触发：Flutter的Text组件默认会继承全局拼写检查配置，而RichText默认关闭拼写检查，因此替换后问题消失。

更优解决方案 #

不需要额外替换为RichText，直接针对性关闭拼写检查即可：

1. 仅针对当前Text组件关闭：
   给Text组件添加spellCheckConfiguration参数禁用拼写检查

Text(
  _label(),
  spellCheckConfiguration: const SpellCheckConfiguration.disabled(),
  // 保留原有style等其他参数
)

2. 全局关闭所有Text的拼写检查：
   如果Flutter Web应用全场景都不需要拼写检查功能，可以在MaterialApp的主题配置中全局关闭：

MaterialApp(
  theme: ThemeData(
    textTheme: Theme.of(context).textTheme.apply(
      spellCheck: false,
    ),
    // 保留原有其他主题配置
  ),
)

内容的提问来源于stack exchange，提问作者Matthew Patience