CODEWITHSUNDEEP
flutterdartwidgetcontainersgesturedetector
Rohan
Rohan

Reputation: 232

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

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',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 6

Views: 5859

Answers (3)

Abdulazeez Oriaje
Abdulazeez Oriaje

Reputation: 129

In order for the ink well to work well with decoration. You'll need to convert container to an ink widget. For example:

InkWell(
        onTap: () {},
        child: Ink(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
              gradient: parseGradient(getEventColor(Random().nextInt(2))))

The example above uses Ink in replacement to Container.

Upvotes: 2

Rens
Rens

Reputation: 745

Just set the background color you want on the Material class:

Material(
  color: Colors.grey.shade200, // background color
  child: InkWell(
    onTap: () {},
    splashColor: Colors.grey.shade300, // splash color
    child: Container(
        // content
      ),
  ),
);

Upvotes: 2

Manuel
Manuel

Reputation: 382

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

Upvotes: 12

Related Questions