When using Flutter Container, everything ok but no ripple effect - but Ink draws beyond its parent

Question

I want to provide a few buttons inside a singlechildscrollview

Column(
    children: < Widget > [
      SizedBox(height: constraints.maxHeight / 8.0),
      AnimationConfiguration.staggeredList(
        position: 1,
        duration: const Duration(milliseconds: 2000),
          child: SlideAnimation(
            verticalOffset: constraints.maxHeight / 10,
            child: FadeInAnimation(
              child: Image.asset('images/mylive.png'),
            ),
          ),
      ),
      Flexible(
        child: Padding(
          padding: EdgeInsets.fromLTRB(
            50, 20, 50, constraints.maxHeight / 7),
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10),
                child: Wrap(
                  spacing: 25,
                  runSpacing: 25,
                  children: const < Widget > [
                    ButtonCard(
                      name: "My News",
                      imgpath: "open-email.png",
                      count: 0),

and this is the build method for the ButtonCard:

 Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    final double height = MediaQuery.of(context).size.height;
    return InkWell(
      onTap: () {},
      child: Container(    <<--->>     Ink(
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.white,
          boxShadow: const [
            BoxShadow(
              color: Colors.black38,
              offset: Offset(0, 2),
              blurRadius: 7,
            ),
          ],
        ),
        child: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  "assets/images/$imgpath",
                  width: 60,
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(
                name,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

When I use the container in ButtonCard, then everything is okay, but the InkWell does not show the ripple effect (because of the BoxDecation color set)

This results in the following, correct scroll view:

But when I change the Container to Ink - I get the beautiful ripple effect, which I want to have. But then the following error occurs during scolling:

As you can see, the Ink with its boxdecoration paints over the parents border. Is this a bug in Ink or does anyone know what the problem is here? Thanks!

Keep the Container and wrap your ```InkWell``` by ```Material``` ? — ikerfah, Oct 20 '21 at 11:52
DO you have this tree `Container` -> `Material` -> `InkWell` ? — ikerfah, Oct 20 '21 at 12:13

score 9 · Answer 1 · answered Nov 17 '21 at 03:22

In General cases:

Wrap the Container with Inkwell
Wrap the Inkwell with Material
Show needed color with Material
Set color to the Container as transparent

With the above settings, you can have a ripple effect with Inkwell. But very difficult to achieve when you're having gradient colors.

Ref: https://flutteragency.com/inkwell-not-showing-ripple-effect-in-flutter/

score 1 · Answer 2 · answered Jul 29 '22 at 05:56

1

You must have Material -> Inkwell -> Ink

answered Jul 29 '22 at 05:56

Julien Joseph Thomas

142
1
4

When using Flutter Container, everything ok but no ripple effect - but Ink draws beyond its parent

2 Answers2

Linked