Why Flutter IconButton Animation Shows Under the Row
The ripple is part of the Material
effect. Wrap your IconButton
with Material
:
Material(
color: _bgColor,
child: IconButton(
padding: EdgeInsets.only(right: 16),
icon: Icon(Icons.play_arrow, color: Colors.white, size: 48),
tooltip: 'Start ${issue.issueName}',
onPressed: () {},
),
),
UPDATE
To be more specific to your goal, you can replace your Container
with Material
.
return Material(
color: _bgColor,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Container(
margin: EdgeInsets.only(top: 12, left: 18, right: 18),
padding: EdgeInsets.only(top: 8, bottom: 8),
backgroundBlendMode: BlendMode.multiply,
child: Row(
...
),
);
It looks like a bug in the Flutter Framework. This occurs only with IconButton, no problem with FlatButton.
Possible workaround is to set BlendMode to multiply BlendMode.multiply.
try this:
Container(
decoration: BoxDecoration(
color: Colors.greenAccent[400],
backgroundBlendMode: BlendMode.multiply),
child: ListTile(
leading: IconButton(icon: Icon(Icons.play_arrow), onPressed: () {}),
title: Text("issue title"),
subtitle: Text("description"),
),
),
Update
issue on github