如何在 Flutter 中將 Container 上的漣漪效果顯示為 IconButton 子項？

Question

標准 IconButton 不會對孩子產生任何連鎖反應：

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: () {
                  },
                ),
              ),
            )
          ],
        ),
      );
    }
  }

但是這個小部件需要定義容器的大小，當我定義該大小時，我無法在該容器之外顯示漣漪效應。 我願意接受建議。

Answer 1

用Ink小部件替換您的Container 。

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

墨水：

用於在 Material 小部件上繪制圖像和其他裝飾的便捷小部件，以便 InkWell 和 InkResponse 飛濺將呈現在它們之上。