Flutter InkWell widget not showing through a container's gradient and color

Question

EDIT: I've tried wrapping the Container in a Material widget and moving the color property to the Material widget, but I'm placing a bunch of ResourceCards in a horizontal ListView, so the color from the Material widget seems to only fill the space around the ResourceCard.

I've created my own widget ResourceCard in Flutter. I wrapped it with a GestureDetector to detect taps, but I want to show some sort of feedback or effect to notify the user that it was tapped. I decided to replace the GestureDetector with an InkWell widget, but I don't see the splash effect through the container's linear-gradient and colour, so I just reverted it back to a GestureDetector. I've seen other posts with potential workarounds, but none of them work with a linear gradient and color. Here's what one of the ResourceCard widgets look like: https://imgur.com/dg3fu9e. Here's the widget's code:

class ResourceCard extends StatelessWidget {
  ResourceCard({
    @required this.colour,
    @required this.margin,
    @required this.cardText,
    this.onPress,
    @required this.cardCaption,
    @required this.paddingText,
  });

  final Color colour;
  final String cardText;
  final Function onPress;
  final EdgeInsets margin;
  final String cardCaption;
  final EdgeInsets paddingText;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Column(
        children: <Widget>[
          Container(
            width: 75.0,
            height: 75.0,
            child: Center(
              child: Text(
                cardText,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Circular STD',
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0,
                ),
              ),
            ),
            margin: margin,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [colour, Colors.blue],
              ),
              color: colour,
              borderRadius: BorderRadius.circular(15.0),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, 0.5),
                  blurRadius: 10.0,
                  spreadRadius: 1.0,
                )
              ],
            ),
          ),
          Padding(
            padding: paddingText,
            child: Text(
              cardCaption,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white70,
                fontWeight: FontWeight.w300,
                fontSize: 10.0,
                fontFamily: 'Circular STD',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Solution

The easiest solution is to use a Material widget as parent of the InkWell and set its color to transparent. The InkWell must be set on the card only (in your example the GestureDetector is set on the whole column). To fit the exact shape, the InkWell gets the same borderRadius as your Card (Container)

Here is a solution of your build method. I placed the InkWell and Materal widget as parent of the Center widget

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        width: 75.0,
        height: 75.0,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onPress,
            borderRadius: BorderRadius.circular(15.0),
            splashColor: Colors.grey[500],
            child: Center(
              child: Text(
                cardText,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Circular STD',
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
        ...

Comments

[Manuel]

Just to make sure: You want the splash effect from the InkWell over the hole card, not only the rounded container with the gradient?

[pskink]

see api.flutter.dev/flutter/material/InkWell-class.html and check Troubleshooting section

[Rohan]

@Manuel I wanted the InkWell splash to only show up on the card (the rounded container with a couple letters inside of it), not the text underneath. Essentially, I want it to act like a FlatButton.

[Moralde-Sama]

does not work on me if I include decoration on container

[Ittai Barkai]

@Moralde-Sama wrap InkWell with an Ink widget, which has a decoration parameter