smooth_highlight

Smooth Highlight

You can emphasize a specific widget by highlight animation when you want to emphasize something to your users. As you can see from the following samples, you can use smooth_highlight in any widget.

And also, you can use ValueChangeHighlight that is useful when you simply want to highlight only the text changes(refer to Sample2). It is inspired by the Cloud Firestore value change animation in the Firebase console.

Sample1	Sample2	Sample3

Usage

You just wrap SmoothHighlight in your widget.

SmoothHighlight(
  // set your custom color
  color: Colors.yellow,
  child: Text('Highlight'),
);

and you can also define custom behavior.

SmoothHighlight(
  // highlight in initState phase.
  useInitialHighLight: true,

  // Set custom duration.
  duration: const Duration(seconds: 1),

  // highlight whenever count is even.
  enabled: count % 2 ==0,
);

ValueChangeHighlight

If you want to highlight the widget only the value changed, ValueChangeHighlight is useful. It requires highlight trigger value.

ValueChangeHighlight(
  // highlight if count changes
  value: count,
  color: Colors.yellow,
  child: Text('count: $count'),
);

if you don't want to highlight a specific values, disableFromValues property prevents it.

ValueChangeHighlight(
  value: count,

  // disable highlight if count changes from `null` or `2` to some value.
  // In this counter example, `0`, `3`, won't be highlighted.
  disableFromValues: const [null, 2],
);

UseCase

Following gif is Firestore GUI in Firebase Console. Firestore realtime listener is powerful, but it is hard for your user to see what value changed. You can make the user notice by highlighting the changed value. It's probably a user-friendly consideration, I think.