'How to set boundaries for a button splash effect in Flutter?

When I press an IconButton inside a container, the splash effect is drawn outside the container so it kind of "overflows". How can I set boundaries to limit the area where the splash effect is drawn?

My hierarchy looks like this and I want to limit the splash effect inside the container widget.

- Expanded
-- Listview

- Container
-- Row
--- IconButton[]

enter image description here



Solution 1:[1]

I stumbled upon the solution while writing this question so I'll just leave the answer here in case someone else runs in to the same problem.

I had to wrap the container into a ClipPath widget to limit the area of the splash effect.

- Expanded
-- Listview

- ClipPath (add this)
-- Container
--- Row
---- IconButton[]

enter image description here

Solution 2:[2]

I think it is better to use an InkWell widget with an Icon as the child. As Flutter docs states

Clipping to a path is expensive

You can use onTap() property to put your function and you can use borderRadius property to give your splash a circle shape.

Circle splash InkWell

Container(
          height: 30,
          width: 30,
          child: InkWell(
            borderRadius: BorderRadius.circular(30),
            onTap: () {},
            child: Icon(Icons.timer),
          ),
        ),

enter image description here

Or you can use the default shape without borderRadius which is also cool :}

Container(
          height: 30,
          width: 30,
          child: InkWell(
            onTap: () {},
            child: Icon(Icons.timer),
          ),
        ),

enter image description here

Solution 3:[3]

You can just change splashRadius on IconButton property. Ex.

IconButton(
      onPressed: () {},
      icon: Icon(Icons.timer),
      splashRadius: 24.0,
    ),

From doc: If null, default splash radius of [Material.defaultSplashRadius] is used. which is 35

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 buxik