Flutter: Inkwell does not work with Card
I am trying to implement and inkWell wrap on a card widget, but it does not work at all. I am leaving on tap as null because this class takes 3 arguments that I populate later on to generate multiple cards. I cannot see what is going on that is preventing InkWell from rippling, so any help would be appreciated.
class FeedBackCardsImage extends StatelessWidget {
final String imagePath;
final String cardTitle;
final String cardTag;
FeedBackCardsImage({
this.imagePath,
this.cardTitle,
this.cardTag,
});
@override
Widget build(BuildContext context) {
return InkWell(
child: new Container(
child: new Card(
child: new Padding(
padding: new EdgeInsets.all(15.0),
child: new Column(
children: <Widget>[
new SizedBox(
height: 184.0,
child: new Stack(
children: <Widget>[
new Positioned.fill(
child: new Image.asset(
imagePath,
//package: destination.assetPackage,
fit: BoxFit.contain,
),
),
],
),
),
new Padding(
padding: new EdgeInsets.all(
7.0,
),
child: new Text(
cardTitle,
style: new TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Colors.black87),
),
),
new Padding(
padding: new EdgeInsets.all(
0.0,
),
child: new Text(
cardTag,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Colors.black54),
),
),
],
),
),
),
),
onTap: null,
);
}
Solution 1:
Explanation :
"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."
Workaround :
return Stack(children: <Widget>[
new Card(
child: new Padding(
padding: new EdgeInsets.all(15.0),
child: new Column(
children: <Widget>[
new SizedBox(
height: 184.0,
child: new Stack(
children: <Widget>[
new Positioned.fill(
child: new Image.asset(
imagePath,
//package: destination.assetPackage,
fit: BoxFit.contain,
),
),
],
),
),
new Padding(
padding: new EdgeInsets.all(
7.0,
),
child: new Text(
cardTitle,
style: new TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Colors.black87),
),
),
new Padding(
padding: new EdgeInsets.all(
0.0,
),
child: new Text(
cardTag,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Colors.black54),
),
),
],
),
),
),
new Positioned.fill(
child: new Material(
color: Colors.transparent,
child: new InkWell(
onTap: () => null,
)))
]);
Solution 2:
I finally got this to work by specifying the same border radius in both the parent card widget and the child inkwell widget. The other solutions don't correctly render rounded corners for the ink well animation. The below worked perfectly for me:
Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: InkWell(
borderRadius: BorderRadius.circular(8),
onTap: (){},
child: Container(
height: 58,
),
),
);
Solution 3:
Okay so how I did it was I just put my Inkwell inside the card. Before the tree was like
Inkwell -> Card -> Container.
Inkwell Ripple effect didn't work on the above one, so I did was
Card -> Material -> Inkwell -> Container
Let me show in code
Before
Card(
margin: EdgeInsets.all(10.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
// My design code here
)
)
After
Card(
margin: EdgeInsets.all(10.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
child: InkWell(
splashColor: Colors.orange,
onTap: (){
print('Tapped!');
},
child: Container(
// My design code here
)
),
),
),
I hope this helps! :) Let me know if any questions!
Solution 4:
The simplest solution is to have an Inkwell widget with a child Container that contains your widget.
The important part here is that your onTap property on the InkWell widget cannot be null!
Example:
Card(
child: InkWell(
onTap: () {},
child: Container(
width: double.infinity,
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
icon,
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text('I'm a card Widget'),
),
],
),
),
),