Flutter：InkWell水波纹效果被带色Container子组件遮挡

问题现象 #

自定义图标+文本组合按钮点击时，InkWell的水波纹效果被带背景色的Container子组件遮挡，仅能在组件角落看到波纹痕迹：

问题原因 #

InkWell的水波纹是绘制在最近的Material组件的墨水层上，而Container的背景色是在墨水层之上的独立图层绘制的，会完全覆盖水波纹，只有未被Container完全覆盖的角落区域能透出波纹。

解决方案 #

方案1：用Ink替代Container设置背景（推荐）

Ink组件会将背景色绘制在墨水层上，水波纹可以直接显示在背景之上，符合Material设计的墨水层逻辑，代码更简洁：

class TransactionButton extends StatelessWidget {
  const TransactionButton({Key? key, required this.icon, required this.text, required this.onTap})
      : super(key: key);

  final void Function() onTap;
  final IconData icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(8), // 让水波纹匹配背景圆角
      child: Ink(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.primaryContainer,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Icon(icon, color: Theme.of(context).colorScheme.onPrimaryContainer),
            const SizedBox(width: 8),
            Text(
              text,
              style: Theme.of(context).textTheme.titleMedium?.copyWith(
                    color: Theme.of(context).colorScheme.onPrimaryContainer,
                  ),
            )
          ],
        ),
      ),
    );
  }
}

方案2：保留Container，用透明Material中转

如果必须使用Container，可以在InkWell和Container之间添加一个透明背景的Material组件，让水波纹能透过Material层显示：

class TransactionButton extends StatelessWidget {
  const TransactionButton({Key? key, required this.icon, required this.text, required this.onTap})
      : super(key: key);

  final void Function() onTap;
  final IconData icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(8), // 匹配背景圆角
      child: Material(
        color: Colors.transparent, // 透明背景允许水波纹透出
        borderRadius: BorderRadius.circular(8),
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.primaryContainer,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            children: [
              Icon(icon, color: Theme.of(context).colorScheme.onPrimaryContainer),
              const SizedBox(width: 8),
              Text(
                text,
                style: Theme.of(context).textTheme.titleMedium?.copyWith(
                    color: Theme.of(context).colorScheme.onPrimaryContainer),
              )
            ],
          ),
        ),
      ),
    );
  }
}

注意点 #

两种方案都需要给InkWell设置borderRadius，确保水波纹的圆角和组件背景的圆角一致，避免出现水波纹超出组件范围的情况。

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