Flutter中实现Image.asset组件点击波纹效果的问题

InkWell的水波纹效果依赖Material组件上下文，而且默认的Image.asset会绘制在组件上层，直接遮挡住波纹，导致看不到效果。下面是几种可行的解决方式：

方式一：使用Ink.image替代Image.asset #

Ink.image是Flutter ink系统的一部分，能和InkWell的波纹效果完美配合，需要用Material作为父容器：

Material(
  child: InkWell(
    splashColor: Colors.black87,
    onTap: () {
      Navigator.pop(context);
    },
    child: Ink.image(
      image: AssetImage('images/ic_close.png'),
      fit: BoxFit.contain, // 根据你的布局需求调整适配模式
    ),
  ),
)

方式二：给Image.asset设置透明底色 #

通过color和colorBlendMode让图片保持原有显示效果的同时，底色变为透明，这样波纹就能透出来，同样需要Material包裹：

Material(
  child: InkWell(
    splashColor: Colors.black87,
    onTap: () {
      Navigator.pop(context);
    },
    child: Image.asset(
      'images/ic_close.png',
      color: Colors.transparent,
      colorBlendMode: BlendMode.dstIn,
    ),
  ),
)

方式三：用Stack让InkWell覆盖在图片上层 #

把InkWell放在Stack的顶层，这样波纹会显示在图片上方：

Material(
  child: Stack(
    children: [
      Image.asset('images/ic_close.png'),
      Positioned.fill(
        child: InkWell(
          splashColor: Colors.black87,
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ),
    ],
  ),
)

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