如何在 Flutter 中将 Container 上的涟漪效果显示为 IconButton 子项？答案

【问题标题】：How to show ripple effect on Container as IconButton child in Flutter?如何在 Flutter 中将 Container 上的涟漪效果显示为 IconButton 子项？
【发布时间】：2021-01-24 19:29:11
【问题描述】：

标准图标按钮不会对孩子产生任何连锁反应：

IconButton(
 icon: Container(color: Colors.red,),
 onPressed: () {},
)

所以我尝试用 Stack 修复它：

class MyIconButton extends StatelessWidget {
  const MyIconButton({Key key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return Container(
        height: 100,
        width: 100,
        child: Stack(
          fit: StackFit.loose,
          children: [
            Positioned.fill(
              child: Container(
                width: 40,
                height: 40,
                color: Colors.deepPurple, 
              ),
            ),
            Positioned.fill(
              child: Material(
                type: MaterialType.transparency,
                shape: const CircleBorder(),
                child: IconButton(
                  splashRadius: 50,
                  icon: Container(), 
                  onPressed: () {
                  },
                ),
              ),
            )
          ],
        ),
      );
    }
  }

但是这个小部件需要定义容器的大小，并且当我定义该大小时，我无法在该容器之外显示涟漪效应。我愿意接受建议。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

将您的 Container 替换为 Ink 小部件。

IconButton(
  onPressed: () {},
  icon: Ink(color: Colors.red),
)

Ink:

用于在 Material 小部件上绘制图像和其他装饰的便捷小部件，以便 InkWell 和 InkResponse 飞溅将呈现在它们之上。

【讨论】：

简短解释？