How can I disable the default splash/ripple/ink effect on a Widget? Sometimes the effect is unwanted, such as in the following TextField case:
11 Answers
Per @hunter's suggestion above, I found that by setting both highlightColor
and splashColor
in my theme to Colors.transparent
removed the ripple.
I do hold some concerns that setting highlightColor
might have some knock-on effects, but I haven't noticed any yet.
Edit: While my original answer has loads of up-votes, the more I learn, the more I've realised that it really isn't the right way to do it. As several people have pointed out below, a better solution is to use the splashFactory
. For example, the code below shows it being set directly via the style, or you can set it in your theme too:
ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
),
child: child,
);
-
1This also removes the ripple effect from widgets such as InkWell and InkResponse Jul 3, 2019 at 18:50
-
1Setting
highlightColor
to transparent makes usingTheme.of(context).highlightColor
pointless Sep 19, 2019 at 5:17 -
Doesn't work for TextButton.
TextButton.styleFrom(splashFactory: NoSplash.splashFactory);
I can't see why.– 44yu5hSep 6 at 14:30
You can wrap the component into Theme
and set the properties splashColor
and highlightColor
to transparent on ThemeData
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: YourWidget(),
);
-
4Best answer here, not changing whole-app theme! You can even use
Theme.of(context).copyWith
instead ofThemeData
as it will keep already defined theme data instead of having flutter's default ones :)– Hugo HOct 8, 2020 at 12:16
Use NoSplash.splashFactory
Set to a theme
final yourTheme = ThemeData.light();
...
Theme(
data: yourTheme.copyWith(
splashFactory: NoSplash.splashFactory,
),
...
)
Set to a material widget
ElevatedButton(
style: ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
),
onPressed: () { },
child: Text('No Splash'),
)
You can replace the Theme's splashFactory
with one that doesn't paint anything:
class NoSplashFactory extends InteractiveInkFeatureFactory {
const NoSplashFactory();
@override
InteractiveInkFeature create({
MaterialInkController controller,
RenderBox referenceBox,
Offset position,
Color color,
TextDirection textDirection,
bool containedInkWell = false,
Rect Function() rectCallback,
BorderRadius borderRadius,
ShapeBorder customBorder,
double radius,
VoidCallback onRemoved,
}) {
return NoSplash(
controller: controller,
referenceBox: referenceBox,
);
}
}
class NoSplash extends InteractiveInkFeature {
NoSplash({
@required MaterialInkController controller,
@required RenderBox referenceBox,
}) : assert(controller != null),
assert(referenceBox != null),
super(
controller: controller,
referenceBox: referenceBox,
);
@override
void paintFeature(Canvas canvas, Matrix4 transform) {}
}
And wrap your widget with it:
child: new Theme(
data: new ThemeData(splashFactory: const NoSplashFactory()),
child: new TextField(...),
),
Originally answered by HansMuller on a GitHub PR.
I'll modify Camilo's approach just to be sure we don't override other properties of the parent theme.
var color = Colors.transparent;
Theme(
data: Theme.of(context).copyWith(
highlightColor: color,
splashColor: color,
hoverColor: color,
),
child: YourWidget(),
)
I have tried the above answer without success(splashColor: Colors.transparent, highlightColor: Colors.transparent,
).
My solution was to only set hoverColor:Colors.transparent
-
1actually in order to remove every highlight, hover, splashing effect on an InkWell, I had to set both splashColor, highlightColor and hoverColor as well, but it worked by setting on the inkwell itself, I did not need to use the Theme wrapper Sep 12, 2020 at 18:57
Set highlightColor
,splashColor
to transparent and splashFactory
to NoSplash as shown below in your material apptheme.
MaterialApp(
theme: ThemeData(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,,
)
)
As I was looking for a way to remove the slash from list overscroll, none of the ThemeData related solutions worked for me. I thought that this question was the same as the one I had, so for any users facing the same misunderstanding, the following solution proved to work, and is pretty neat when put into a stateless widget as you can see below:
class NoSplash extends StatelessWidget {
NoSplash({this.child});
final Widget child;
@override
Widget build(BuildContext context) {
return NotificationListener<OverscrollIndicatorNotification>(
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
return true;
},
child: child);
}
}
The way to use this is to simply wrap your widget with NoSplash(child: )
Hope someone finds this useful!
-
That looks neat. This question is generally about tap effects though, so I feel like it might be a good idea if you ask a new question like "How to disable scroll glow effect in Flutter" and answer it yourself. Will likely make it easier to find for people searching for that.– xipSep 30, 2020 at 5:13
-
1Yes it took me some time to realize, and then I found part of this elsewhere on SO, so this is why I'm posting it here. In case someone has misunderstood their own needs like me I mean :) Sep 30, 2020 at 7:38
I found this question while looking for a solution to disable splash on ElevatedButton
. all solutions presented here did not work for my problem, even though Theme(data: ThemeData(... NoSplash..))
was working but for some reason did not work. I set overlayColor:..
in ButtonStyle()
to transparent like this: overlayColor: MaterialStateProperty.all(Colors.transparent),
and worked. hope this will help someone
for ElevatedButton. (Flutter 2.20+)
class NoSplashState extends MaterialStatesController{
@override
void update(MaterialState state, bool add) {
}
}
ElevatedButton(
statesController: NoSplashState(),
...
)
@override
Widget build(BuildContext context){
// You can use your custom theme like AppTheme.of(context).materialThemeData
final yourTheme = Theme.of(context) ;
return Theme(
data: yourTheme.copyWith(
// removes splash effect
spalshFactory : NoSplash.splashFactory,
// removes color when holding the button
highlightColor: Colors.transparent,
),
child: yourChild
);
}