material design - Flutter: InkWell completely non-functional in Card

Question

Pasted below is the build method for a widget based on Card that serves as a list element in a ListWheelScrollView. The TweenAnimationBuilder is simply to animate a background color change in the Card widget whenever it's the currently selected list item.

Widget build(BuildContext context) {
Color primary = Theme
    .of(context)
    .primaryColor;
Color secondary = Colors.white;

return new TweenAnimationBuilder(
    tween: new ColorTween(
        begin: secondary, end: selected ? primary : secondary),
    duration: new Duration(milliseconds: 300),
    builder: (BuildContext context, Color color, Widget child) {
      return new Card(
          color: color,
          child: new InkWell(
              splashColor: Colors.blue,
              child: new Container(
                  height: 75,
                  width: 400,
                  child: new Center(
                      child: new Text(quiz.title)
                  )
              ),
              onTap: () => print("Does nothing")
          )
      );
    }
);}

No matter what I do, there are no visual splashes on the Card nor does the onTap handler ever execute. I've tried every solution I've seen here on SO. Really confused on this one.

question from:https://stackoverflow.com/questions/65924060/flutter-inkwell-completely-non-functional-in-card

Answer 1

I don't know how you're doing it, try this code:

Widget build(BuildContext context) {
  var primary = Theme.of(context).primaryColor;
  var secondary = Colors.white;
  var selected = true;
  return Scaffold(
    body: TweenAnimationBuilder(
      tween: ColorTween(begin: secondary, end: selected ? primary : secondary),
      duration: Duration(milliseconds: 300),
      builder: (BuildContext context, Color color, Widget child) {
        return Card(
          color: color,
          child: InkWell(
            splashColor: Colors.blue,
            onTap: () => print('Does nothing'),
            child: Container(
              height: 75,
              width: 400,
              child: Center(child: Text('Title')),
            ),
          ),
        );
      },
    ),
  );
}