How to disable default Widget splash effect in Flutter?
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,);
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.