Inkwell for dummies - animation

Question

(...and with dummies I mean myself)
what am I doing wrong here?
I don't see any animation,
I tried to change the order of container/inkwell
because I saw somewhere that it creates some issue,
but I'm stuck. Can anyone help?
class CardButton extends StatelessWidget {
final String input;
CardButton({this.input});
Widget build(BuildContext context) {
return Container(
color: Colors.grey[100],
width: 50.0,
height: 50.0,
alignment: Alignment.center,
child: Material(
child: InkWell(
splashColor: Colors.amber,
onTap: draw(),
child: Text(input),
),
),
);
}
}
draw() {
//todo
}
thanks in advance
[edit 25/10]
I tried out some of the solutions proposed,
but doing so the widget where this one is 'nested' throw me an error,
writing the widget where I use the "CardButton" below:
class CardGrid extends StatelessWidget {
final List<String> cardList = [
'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
#override
Widget build(BuildContext context) {
return Container(
width: 300.0,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CardButton(input: cardList[0]),
CardButton(input: cardList[1]),
CardButton(input: cardList[2])
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CardButton(input: cardList[3]),
CardButton(input: cardList[4]),
CardButton(input: cardList[5])
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CardButton(input: cardList[6]),
CardButton(input: cardList[7]),
CardButton(input: cardList[8])
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CardButton(input: cardList[9]),
CardButton(input: cardList[10]),
CardButton(input: cardList[11]),
CardButton(input: cardList[12])
],
),
],
),
);
}
}
I'm adding here the screenshot of the app, the first is with my original code,
the second (with the error) is with the "proposed" solution

Answer 1

You need to pass the onTap function without the braces:
child: InkWell(
splashColor: Colors.amber,
onTap: draw, // don't use braces here (except your function returns
// a reference to the actual onTap function.
child: Text(input),
),
Note that with the current layout only the inner Text element is animated. If you want the InkWell to cover the entire button area you'll have to reorder the widget tree to:
Material > InkWell > Container > Text
Widget build(BuildContext context) {
return Material(
color: Colors.grey[100],
child: InkWell(
splashColor: Colors.amber,
onTap: draw,
child: Container(
width: 100.0,
height: 100.0,
alignment: Alignment.center,
child: Text(input),
),
),
);
}