Flutter中Container背景与InkWell的BoxDecoration重叠问题求助

我用以下代码实现了一个可点击的圆形按钮：

InkWell(
  customBorder: const CircleBorder(),
  onTap: ()=>{},
  child: Ink(
    width: 80,
    height: 80,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        fit: BoxFit.fitWidth,
        image: NetworkImage("https://i.imgur.com/TpQD6PA_d.webp")
      )
    ),
  ),
)

按钮显示正常：

但当用带背景的Container包裹InkWell后，Container的背景出现重叠问题：

Container( // ⬅ 添加的容器及背景
  decoration: const BoxDecoration(color: Colors.greenAccent),
  child: InkWell(
    customBorder: const CircleBorder(),
    onTap: ()=>{},
    child: Ink(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          fit: BoxFit.fitWidth, 
          image: NetworkImage("https://i.imgur.com/TpQD6PA_d.webp")
        )
      ),
    ),
  ),
);

效果如下：

实际项目中该背景是通用列表项背景，无法移入InkWell，求解决方法。

出现这个问题的核心原因是Ink组件需要依托Material组件的底层画布来绘制，而Container的decoration会在Ink的绘制层上方渲染，导致背景重叠。可以通过以下两种方式解决：

方法1：用Container的color属性替代decoration设置背景 #

如果背景只是单一颜色，直接给Container设置color属性，而非通过BoxDecoration：

Container(
  color: Colors.greenAccent, // 替换decoration为color属性
  child: InkWell(
    customBorder: const CircleBorder(),
    onTap: ()=>{},
    child: Ink(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          fit: BoxFit.fitWidth, 
          image: NetworkImage("https://i.imgur.com/TpQD6PA_d.webp")
        )
      ),
    ),
  ),
);

这种方式下，Container的color会作为Material的底层颜色，Ink的绘制能正常显示而不被遮挡。

方法2：在InkWell外层添加透明Material组件 #

如果必须使用decoration实现背景（比如有渐变、圆角等复杂样式），可以在InkWell和Container之间嵌套一个Material组件，并设置type: MaterialType.transparency，让Ink能正确依托Material画布：

Container(
  decoration: const BoxDecoration(color: Colors.greenAccent),
  child: Material(
    type: MaterialType.transparency,
    child: InkWell(
      customBorder: const CircleBorder(),
      onTap: ()=>{},
      child: Ink(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            fit: BoxFit.fitWidth, 
            image: NetworkImage("https://i.imgur.com/TpQD6PA_d.webp")
          )
        ),
      ),
    ),
  ),
);

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