Flutter使用Container时InkWell无涟漪，替换为Ink后绘制超出父边界如何解决

这个现象不是Ink的bug，属于Ink组件的固有特性：Ink及其子类（包括InkWell的涟漪效果）的所有绘制内容，都会直接渲染到最近的祖先Material组件上，而非限制在自身组件的边界内。当你在可滚动容器中使用Ink时，滚动过程中Ink的位置发生变化，但它的绘制目标还是上层的全局Material组件，就会出现装饰（阴影、圆角背景）超出预期组件边界的问题。

方案1（推荐，改动最小） #

给Ink组件外层包裹一个Material组件，设置为透明类型，同时匹配圆角做裁剪即可。既能保留Ink的涟漪效果，也不会改变原有布局样式，滚动时也不会出现溢出问题。
修改后的代码如下：

Widget build(BuildContext context) {
  final double width = MediaQuery.of(context).size.width;
  final double height = MediaQuery.of(context).size.height;
  return InkWell(
    onTap: () {},
    // 新增外层透明Material
    child: Material(
      type: MaterialType.transparency,
      borderRadius: BorderRadius.circular(20), // 和Ink的装饰圆角保持一致
      child: Ink(
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.white,
          boxShadow: const [
            BoxShadow(
              color: Colors.black38,
              offset: Offset(0, 2),
              blurRadius: 7,
            ),
          ],
        ),
        child: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  "assets/images/$imgpath",
                  width: 60,
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(
                name,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

方案2（保留原有Container实现） #

如果不想替换原有的Container组件，也可以通过给Container外层套透明Material的方式解决涟漪被遮挡的问题，无需使用Ink组件：

Widget build(BuildContext context) {
  final double width = MediaQuery.of(context).size.width;
  final double height = MediaQuery.of(context).size.height;
  // 外层套透明Material
  return Material(
    type: MaterialType.transparency,
    borderRadius: BorderRadius.circular(20),
    child: InkWell(
      borderRadius: BorderRadius.circular(20), // 涟漪圆角匹配容器圆角
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.white,
          boxShadow: const [
            BoxShadow(
              color: Colors.black38,
              offset: Offset(0, 2),
              blurRadius: 7,
            ),
          ],
        ),
        child: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  "assets/images/$imgpath",
                  width: 60,
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(
                name,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

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