WaterDropHeader
WaterDropHeader renders a playful water-droplet that stretches downward as you pull and snaps back with a ripple when released. It is one of the most visually distinctive headers bundled with smart_refresher.
Basic Usage
Section titled “Basic Usage”SmartRefresher( controller: _controller, header: const WaterDropHeader(), onRefresh: _onRefresh, child: ListView.builder(...),)Properties
Section titled “Properties”| Property | Type | Default | Description |
|---|---|---|---|
color |
Color |
Colors.white |
Fill color of the water drop. |
inertiaDistance |
double |
0.0 |
Extra inertia stretch distance beyond the trigger threshold. |
completeIcon |
Widget? |
Icon(Icons.done, color: Colors.grey) |
Widget shown on successful refresh completion. |
failedIcon |
Widget? |
Icon(Icons.close, color: Colors.grey) |
Widget shown on failed refresh. |
completeDuration |
Duration |
600ms |
Time the complete/failed state is visible before dismissal. |
waterDropColor |
Color |
const Color(0xFF00BFFF) |
Color of the animated drop itself. |
idleIcon |
Widget? |
null |
Optional icon overlaid in the idle drop. |
height |
double |
60.0 |
Height reserved for the header. |
Customisation
Section titled “Customisation”Custom Drop Color
Section titled “Custom Drop Color”WaterDropHeader( waterDropColor: Colors.indigo, color: Colors.white,)Custom Completion Icons
Section titled “Custom Completion Icons”WaterDropHeader( completeIcon: const Icon(Icons.cloud_done, color: Colors.green), failedIcon: const Icon(Icons.cloud_off, color: Colors.red), completeDuration: const Duration(milliseconds: 800),)How It Animates
Section titled “How It Animates”The header uses a Bezier-curve path to simulate the elastic water surface:
- Idle → Drag: The drop elongates vertically proportional to the pull offset.
- Threshold crossed: The neck of the drop narrows, simulating surface tension.
- Release: The drop detaches with a elastic snap and a circular ripple appears.
- Refreshing → Complete: A spinner plays, then the completion icon fades in.
WaterDropMaterialHeader
Section titled “WaterDropMaterialHeader”A material-flavored variant is also available:
SmartRefresher( header: WaterDropMaterialHeader( backgroundColor: Theme.of(context).colorScheme.primary, color: Theme.of(context).colorScheme.onPrimary, ), ...)WaterDropMaterialHeader wraps a CircularProgressIndicator inside the drop and matches the Material Design elevation and color system.
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor |
Color |
Theme primary |
Drop background / container fill. |
color |
Color |
Colors.white |
Progress indicator color. |
distance |
double |
50.0 |
Vertical travel distance of the drop before snapping. |
offset |
double |
0.0 |
Horizontal offset of the drop from center. |