https://github.com/htsuruo/smooth_highlight
This package allows you to emphasize a specific widget by highlight animation when you want to emphasize something to your users.
https://github.com/htsuruo/smooth_highlight
dart flutter pubdev
Last synced: 4 months ago
JSON representation
This package allows you to emphasize a specific widget by highlight animation when you want to emphasize something to your users.
- Host: GitHub
- URL: https://github.com/htsuruo/smooth_highlight
- Owner: htsuruo
- License: mit
- Created: 2022-06-28T08:40:13.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-01T01:31:25.000Z (over 1 year ago)
- Last Synced: 2025-10-23T02:59:09.202Z (4 months ago)
- Topics: dart, flutter, pubdev
- Language: Dart
- Homepage: https://pub.dev/packages/smooth_highlight
- Size: 1.3 MB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```dart
SmoothHighlight(
// set your custom color
color: Colors.yellow,
child: Text('Highlight'),
);
```
and you can also define custom behavior.
```dart
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.
```dart
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.
```dart
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.
