Water wave effect when clicking material design disabled by Flutter

If you are familiar with material design, you will find that there are many cool effects, including the effect of water wave spreading outward from the click of fingers when you click the control.

Flutter also provides a view of material design for our APP development by default, but some problems will be found in the display of water waves, especially when the text input box TextField is used.

Here is a screenshot of the problem I encountered:


-w370

When switching back and forth between two input boxes, it is found that sometimes the water wave behind the input box does not disappear after diffusion, resulting in abnormal display as shown in the figure.

This is a Bug of Flutter at present. If you also encounter this situation, one solution is to disable the water wave effect on this input box.

Let's show you how to disable the water wave effect of the control:

Create two classes to customize theme:

import 'package:flutter/material.dart';

class NoSplashFactory extends InteractiveInkFeatureFactory {
  const NoSplashFactory();

  @override
  InteractiveInkFeature create(
      {MaterialInkController controller,
      RenderBox referenceBox,
      Offset position,
      Color color,
      TextDirection textDirection,
      bool containedInkWell = false,
      rectCallback,
      BorderRadius borderRadius,
      ShapeBorder customBorder,
      double radius,
      onRemoved}) {
    return new 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) {}
}

Use on controls that need to turn off the water wave effect:

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

This may only be a Bug of the current version (1.2.1) of Flutter, and the Flutter team may fix this problem in the future. But this article also provides a way for us to customize the Theme.
Welcome to leave a message for discussion~

Posted on Fri, 29 Nov 2019 09:55:26 -0800 by cjkeane