Flutter Web点击跳转文本出现滚动条黑边异常如何解决

问题场景 #

开发点击跳转外部网站的文本链接组件，初始实现代码如下：

InkWell(
        child: Padding(
          padding: constant.paddingAllLink,
          child: Row(
            children: <Widget>[
              if (icon != null) ui.getIcon(icon, constant.iconSmall, color: theme.textColor),
              if (icon != null) SizedBox(width: constant.i8),
              ui.getH9b(title),
              SizedBox(width: constant.i8),
            ],
          ),
        ),
        onTap: ()=>{ launch(url) },
      )

在Flutter Web环境运行时，组件旁会出现类似滚动条的黑线显示伪影，具体表现：

• 鼠标悬停在文本上时的效果：
  
• 无鼠标悬停时的效果：
  

问题原因 #

该黑线是Flutter Web端InkWell组件Material交互效果的已知渲染问题：当组件处于悬停、聚焦状态时，默认的高亮层绘制逻辑会在组件边缘错误渲染出1px宽的类似滚动条的黑线，尤其在Row组件默认占满父组件宽度、存在剩余绘制空间时，该伪影会稳定出现在组件右侧。

修复方案 #

可根据项目需求选择以下任意一种方案修复：

方案1：保留InkWell点击效果，关闭多余渲染（推荐） #

给InkWell添加透明反馈配置，同时约束Row宽度为子组件实际大小，从渲染层面避免伪影出现：

InkWell(
  // 新增以下配置，关闭多余的透明层渲染
  focusColor: Colors.transparent,
  hoverColor: Colors.transparent,
  highlightColor: Colors.transparent,
  splashColor: Colors.transparent, // 不需要水波纹效果可添加这行
  child: Padding(
    padding: constant.paddingAllLink,
    child: Row(
      mainAxisSize: MainAxisSize.min, // 关键：将Row宽度收缩为子组件总宽度，消除右侧多余绘制空间
      children: <Widget>[
        if (icon != null) ui.getIcon(icon, constant.iconSmall, color: theme.textColor),
        if (icon != null) SizedBox(width: constant.i8),
        ui.getH9b(title),
        SizedBox(width: constant.i8),
      ],
    ),
  ),
  // 修正原有箭头函数的多余大括号
  onTap: () => launch(url),
)

注意：原有代码中onTap的箭头函数多余包裹了一层大括号，属于语法冗余，直接写() => launch(url)即可。

方案2：替换为无Material渲染的点击组件 #

如果不需要InkWell自带的水波纹、悬停变色等Material风格交互，可以直接用GestureDetector替换InkWell，该组件没有额外的高亮层渲染逻辑，不会出现同类伪影：

GestureDetector(
  child: Padding(
    padding: constant.paddingAllLink,
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        if (icon != null) ui.getIcon(icon, constant.iconSmall, color: theme.textColor),
        if (icon != null) SizedBox(width: constant.i8),
        ui.getH9b(title),
        SizedBox(width: constant.i8),
      ],
    ),
  ),
  onTap: () => launch(url),
)

方案3：全局隐藏Web端默认滚动条 #

如果项目中多处出现同类滚动条样式伪影，可以在Web入口初始化时全局设置滚动条为隐藏状态：

// 引入html库
import 'dart:html' as html;

void main() {
  // 全局隐藏滚动条
  html.document.body?.style.setProperty('scrollbar-width', 'none');
  runApp(const MyApp());
}

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