How to disable default Widget splash effect in Flutter? How to disable default Widget splash effect in Flutter? flutter flutter

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 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(),);


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.