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://i.sstatic.net/N2txv.jpg. 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',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

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,
                ),
              ),
            ),
          ),
        ),
        ...