US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No. 501, Shree Ugati Corporate Park, Gandhinagar - 382421, Gujarat, India

[email protected]

How to disable the default Widget splash effect in Flutter?

disable the default Widget splash effect in Flutter

How to disable the default Widget splash effect in Flutter?

Sometimes, the splash effect is unwanted and it is a default effect. So Learn how to disable the Splash or ink effect on the widget. Also, check this article for Passing messages from Flutter to native.

How to disable the default Widget splash effect in Flutter?

splash effect

Splash effect

Replace the Theme’s splashFactory with one that doesn’t paint anything:

class NoSplashFactory extends InteractiveInkFeatureFactory {
  const NoSplashFactory();

  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 {
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
  })  : assert(controller != null),
        assert(referenceBox != null),
          controller: controller,
          referenceBox: referenceBox,

  void paintFeature(Canvas canvas, Matrix4 transform) {}

Then wrap your widget with it :

child: new Theme(
  data: new ThemeData(splashFactory: const NoSplashFactory()),
  child: new TextField(...),

You can only set hoverColor:Colors.transparent

By setting both highlightColor and splashColor in your theme to Colors.transparent removed the ripple.
You can hold some concerns that setting highlightColor might have some knock-on effects.

This is modified Camilo’s approach just to be sure you don’t override other properties of the parent theme:

var color = Colors.transparent;
  data: Theme.of(context).copyWith(
    highlightColor: color,
    splashColor: color,
    hoverColor: color,
  child: YourWidget(),

Before Hover

After Hover


In this article, We have Learned How to disable the default Widget splash effect in Flutter?

Keep Learning !!! Keep Fluttering !!!

You can also learn about getting the path of flutter SDK.

Still, need Support for Flutter Development? You know where to find us. is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Post a Comment