How do you remove RIPPLE EFFECT from a CLICKABLE TRANSPARENT CONTAINER?

Question

I want to remove the ripple effect from a transparent clickable container but no matter what I do the effect just doesn't go away, please help!

Code:

InkWell(
 onTap: (){print('Tapped');},
   child: Container(
     height: 200, width: 200,),)

The main purpose of choosing `InkWell` is to enjoy its "ripple effect". If you don't want it, use `GestureDetector` instead. — WSBT, Oct 15 '21 at 06:22

score 2 · Accepted Answer · edited Oct 15 '21 at 06:23

2

use GestureDetector instead:

GestureDetector(
 onTap: () {print('Tapped');},
   child: Container(
     height: 200, width: 200,
   ),
 )

edited Oct 15 '21 at 06:23

WSBT

33,033
18
128
133

answered Oct 15 '21 at 05:43

Jim

6,928
1
7
18

score 2 · Answer 2 · answered Oct 15 '21 at 05:57

Put Following Line in Your Material App Widget ThemeData

highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
splashColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,

Like

theme: ThemeData(
      highlightColor: Colors.transparent,
      hoverColor: Colors.transparent,
      splashColor: Colors.transparent,
      splashFactory: NoSplash.splashFactory,
)

score 1 · Answer 3 · answered Mar 14 '23 at 07:20

I use it like this:

InkWell(
  excludeFromSemantics: true,
  canRequestFocus: false,
  enableFeedback: false,
  splashFactory: NoSplash.splashFactory,
  splashColor: Colors.transparent,
  highlightColor: Colors.transparent,
  focusColor: Colors.transparent,
  hoverColor: Colors.transparent,
  overlayColor: MaterialStateProperty.all(Colors.transparent),
  onTap: widget.onPressed,
  child: child,
);

score 1 · Answer 4 · answered Mar 14 '23 at 07:25

1

Use GestureDetector instead of InkWell because Inkwell provide by default ripple effect, So you can use GestureDetector.

answered Mar 14 '23 at 07:25

Shashank Adhatrao

47
5

How do you remove RIPPLE EFFECT from a CLICKABLE TRANSPARENT CONTAINER?

4 Answers4