How to show ripple effect on Container as IconButton child in Flutter?

Viewed 377

Standard IconButton doesn't show any ripple effect on child:

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

So I tried fix it with 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: () {
                  },
                ),
              ),
            )
          ],
        ),
      );
    }
  }

But this widget needs to have defined size of container, and when I define that size I can't show ripple effect outside of that container. I am open for suggestions.

1 Answers

Replace your Container with Ink widget.

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

Ink:

A convenience widget for drawing images and other decorations on Material widgets, so that InkWell and InkResponse splashes will render over them.

Related