Inkwell not showing ripple when used with Container decoration

Question

I want to add a ripple on an item, it is working fine until I add a gradient on the item using BoxDecoration.

Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        shadowColor: Colors.grey[50],
        child: InkWell(
          onTap: () {},
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: AlignmentDirectional.bottomStart,
                end: AlignmentDirectional.topEnd,
                colors: [
                  Colors.yellow[800],
                  Colors.yellow[700],
                ],
              ),
            ),
            padding: EdgeInsets.all(16.0),
            child: Text(
              widget.title,
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

Does this answer your question? [InkWell not showing ripple effect](https://stackoverflow.com/questions/45424621/inkwell-not-showing-ripple-effect) — iDecode, Jan 06 '21 at 15:38

score 110 · Answer 1 · edited Nov 16 '19 at 05:26

110

Update in 2019:

You should use Ink widget inside Material, instead of Container. It takes decoration parameter as well:

Material(
      child: Ink(
        decoration: BoxDecoration(
          // ...
        ),
        child: InkWell(
          onTap: () {},
          child: child, // other widget
        ),
      ),
);

edited Nov 16 '19 at 05:26

cokeman19

2,405
1
25
40

answered Sep 10 '19 at 08:31

Crizant

1,571
2
10
14

That one helped me that the ripple effect is not behind the outer element. Now the ripple is visible overall in the clicked element! – Pascal Jan 18 '20 at 11:04
1

Thank you. It works, but, despite being a "border-radius", when it clicked it pretends it's not there. Is this normal ? – Fatih Mert Doğancan Feb 27 '20 at 08:12
This is the best answer, it's shorter. In fact it worked for me without the external Material widget. – olavidps Apr 01 '20 at 19:06
1

@FatihMertDoğancan https://stackoverflow.com/questions/64410618/add-border-radius-in-the-inkwell-widget-in-flutter InkWell widget has the customBorder property. – Saw Thinkar Nay Htoo Jan 06 '21 at 17:10
There is no alignment property in `Ink`, so it cannot be a replacement for `Container` – Sharp Edge Mar 16 '22 at 13:04
This answer is very good. – Gabriel Costa Jul 08 '23 at 07:57

score 35 · Accepted Answer · answered Jul 22 '18 at 10:27

I found the solution:

I need one Material for Inkwell, and one Material for elevation and rounded borders. The inner Material has a type of MaterialType.transparency so that it doesn't draw anything over the box decoration of its parent and still preserve the ink effect. The shadow and borders are controlled by outer Material.

Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(  // <----------------------------- Outer Material
        shadowColor: Colors.grey[50],
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: AlignmentDirectional.bottomStart,
              end: AlignmentDirectional.topEnd,
              colors: [
                AppColors.pinkDark,
                AppColors.pink,
              ],
            ),
          ),
          child: Material(  // <------------------------- Inner Material
            type: MaterialType.transparency,
            elevation: 6.0,
            color: Colors.transparent,
            shadowColor: Colors.grey[50],
            child: InkWell(  //<------------------------- InkWell
              splashColor: Colors.white30,
              onTap: () {},
              child: Container(
                padding: EdgeInsets.all(16.0),
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.work,
                      size: 40.0,
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      children: <Widget>[
                        Text(
                          widget.title,
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

This, works buddy, one of the best solutions so far, Thankyou :) — SARAN SURYA, Dec 20 '20 at 14:37
This solution is not viable, many unnecessary widgets leading to poor performance. — Gabriel Costa, Jul 08 '23 at 07:58

score 12 · Answer 3 · answered Jun 01 '19 at 22:03

Simple splash effect widget I created that works perfect.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashEffect extends StatelessWidget {
  final Widget child;
  final Function onTap;

  const SplashEffect({Key key, this.child, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(16)),
        child: child,
        onTap: onTap,
      ),
    );
  }
}

score 5 · Answer 4 · edited Jun 14 '19 at 16:19

Splash color is overlap by container BoxDecoration

Try this

  Widget build(BuildContext context) {
   return new Container(
      decoration: BoxDecoration(
      borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
      gradient: LinearGradient(
        begin: AlignmentDirectional.bottomStart,
        end: AlignmentDirectional.topEnd,
        tileMode: TileMode.repeated,
        colors: [
          Colors.yellow[800],
          Colors.yellow[700],
        ],
      ),
      boxShadow: <BoxShadow>[
        new BoxShadow(
            color: Colors.grey[50],
            //blurRadius: 0.3,
            blurRadius: 6.0,
            offset: new Offset(0.0, 4.0)
        )
      ]
  ),
  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
  child: Material(
    color: Colors.transparent,
    //shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    //elevation: 6.0,
    //shadowColor: Colors.grey[50],
    child: InkWell(
      splashColor: const Color(0x8034b0fc),
      onTap: () {},
      child: Container(
        //decoration: ,
        padding: EdgeInsets.all(16.0),
        child: Text(
          'Click',
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
 );
}

No, the result is bad, there is a greyish colour appearing on top of the item. I have already tried this approach. — Gurleen Sethi, Jul 22 '18 at 10:21
You don't have to use nested material widget. I updated my solution. I think this will work. Material elevation was causing this problem. FYI: If any one solution does not work it, you shouldn't down vote directly . First you have to let them know what problem you are facing. Then decide. Peace. — Rafiqul Hasan, Jul 22 '18 at 10:44
Yes the solution you gave is working, but I wanted shadow and radius from the `Material` itself, that was the thing I couldn't understand. Shadow was possible with BoxDecoration I knew, but wanted with `Material`. Sorry for the down vote though! — Gurleen Sethi, Jul 22 '18 at 11:48

JupiterT · Answer 5 · 2020-10-06T10:57:12.143

If anyone came here looking to do use an inkwell with a circle decoration (like I did), I used the accepted answer to come up with this.

Material(
  child: Ink(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.grey[350],
        border: Border.all(
          color: Colors.red,
          width: 4.0,
        ),
      ),
      child: InkWell(
        customBorder: const CircleBorder(),
        onTap: onTap,
        child: const Icon(Icons.add, size: 48, color: Colors.white),
      ),
    ));

Inkwell not showing ripple when used with Container decoration

5 Answers5

Linked