How to add ripple effect to a Container with decoration in Flutter?

Question

I want to add a ripple effect to a custom Container. I have used Inkwell and Material widgets to achieve this behavior, but it does not work. The code is as follows:

@override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: (){},
          child: Container(
            width: 150,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.circular(18),
              color: Colors.deepPurpleAccent,
            ),
            alignment: Alignment.center,
            child: Text(
              "A box container",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

The result is:

I also used a transparent color on Container and the purple color on Material as follows:

@override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.deepPurpleAccent,
        child: InkWell(
          onTap: () {},
          child: Container(
            width: 150,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.circular(18),
              color: Colors.transparent,
            ),
            alignment: Alignment.center,
            child: Text(
              "A box container",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

As a result, the ripple effect occurs, but the Container looks like this (not what I want):

I also swapped the Container and Material widgets with each other, applied clip on the Container as follows:

@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 150,
        height: 100,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red, width: 2),
          borderRadius: BorderRadius.circular(18),
          color: Colors.transparent,
        ),
        clipBehavior: Clip.hardEdge,
        child: Material(
          color: Colors.deepPurpleAccent,
          child: InkWell(
            onTap: () {},
            child: Center(
              child: Text(
                "A box container",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }

Again, the ripple effect occurs, but the Container does not look as I want to (you can spot the little difference between the following photo and the first photo, in the edges of the Container):

I want the Container to look exactly as in the first photo with a ripple effect.

Note: The behavior that I want, can be exactly achieved through using Ink and Inkwell widgets, but when used in a ListView, it causes item render problems.

score 3 · Accepted Answer · answered Jul 30 '22 at 11:45

You were very close. You needed to have borderRadius on Material and InkWell. Try it this way

child: Material(
  color: Colors.deepPurpleAccent,
  borderRadius: BorderRadius.circular(18),
  child: InkWell(
    borderRadius: BorderRadius.circular(18),
    onTap: () {},
    child: Container(
      width: 150,
      height: 100,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 2),
        borderRadius: BorderRadius.circular(18),
        color: Colors.transparent,
      ),
      alignment: Alignment.center,
      child: Text(
        "A box container",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),

How to add ripple effect to a Container with decoration in Flutter?

1 Answers1