I have a Container
widget and an IconButton
. When I press on the IconButton
, ripple effect shows behind the Container
. Is there a way to fix this?
Here is the full class as Github Gist.
Container(
height: height,
decoration: _cardBoxDecoration(Colors.white),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
FontAwesomeIcons.checkCircle,
color: _checkGrey,
size: 20,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.more_horiz,
color: _grey,
size: 20,
),
onPressed: () {},
)
],
),
]
)
);
Flutter provides the InkWell widget to perform this effect. Create a ripple effect using the following steps: Create a widget that supports tap. Wrap it in an InkWell widget to manage tap callbacks and ripple animations.
To do so, open the Flutter app's Xcode project by typing open ios/Runner. xcworkspace from the root of your app directory. Then select Runner/Assets. xcassets from the Project Navigator and drop in the desired images to the LaunchImage image set.
You can use the Material
widget to get the output you want. Replace the Container
Widget with Material
Widget.
class _AppointmentsCart extends StatelessWidget {
final double height;
_AppointmentsCart({this.height});
@override
Widget build(BuildContext context) {
return Material( // replace container widget
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
FontAwesomeIcons.checkCircle,
color: _grey,
size: 20,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.more_horiz,
color: Colors.grey,
size: 20,
),
onPressed: () {},
)
],
),
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Today',
style: TextStyle(fontSize: 18),
),
),
Padding(
padding: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'5',
style: TextStyle(fontSize: 24, color: _titleGrey),
),
Text(
'Appoinemts',
style: TextStyle(fontSize: 12, color: _subtitleGrey),
)
],
),
)
],
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With