IconButton ripple effect

[dsavke]

Bug with IconButton ripple effect.

When i set background color of Container and inside that Container as a child I put IconButton widget.
Then suddenly ripple effect goes behind that backgroun color.

I know for fix when I swap Container widget with Material but in this situation I really need my Container widget.

Is there any solution to have a ripple effect on IconButton widget and the parent of that widget stays to be a Container?

[yvesjordan06]

Take a look at this issue it has a workaround

@Hixie said

What's going on is that the Material spec says that the splashes are actually ink on the Material. So when we splash, what we do is we literally have the Material widget do the splash. If you have something on top of the Material, we splash under it, and you can't see it.

Try wrapping your IconButton in a Material Widget

Container(
    child:Material(
        color: Colors.transparent //To let the Container background be displayed
        child: IconButton(
            icon: Icon(Icons.heart),
            onPressed: (){}
        ),
    ),
)

Hope it helps you out

[VladyslavBondarenko]

Thanks @yvesjordan06 ,
@savke30 does it help or your use case is different?

[dsavke]

@yvesjordan06 that was helpful.

I think this issues is solved.

[BananaMasterz]

I tried this and it gives a rectangular ripple which is not pretty.

[gtu-myowin]

I tried this and it gives a rectangular ripple which is not pretty.

Then, you can use ClipOval. Like this

ClipOval(
  child: Material(
    color: Colors
        .transparent, //To let the Container background be displayed
    child: IconButton(
        icon: Icon(
          Icons.play_arrow,
          color: Colors.white,
        ),
        onPressed: () {}),
  ),
),

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.