Custom Refresh Indicator
A flutter package that allows you to easily create a custom refresh indicator widget.
TLDR; ONLINE DEMO!
QUICK START
CustomRefreshIndicator(
/// Scrollable widget
child: ListView.separated(
itemBuilder: (BuildContext context, int index) => const SizedBox(
height: 100,
),
separatorBuilder: (BuildContext context, int index) =>
const SizedBox(height: 20),
),
/// Custom indicator builder function
builder: (
BuildContext context,
Widget child,
IndicatorController controller,
) {
/// TODO: Implement your own refresh indicator
return Stack(
children: <Widget>[
AnimatedBuilder(
animation: controller,
builder: (BuildContext context, _) {
/// This part will be rebuild on every controller change
return MyIndicator();
},
),
/// Scrollable widget that was provided as [child] argument
///
/// TIP:
/// You can also wrap [child] with [Transform] widget to also a animate list transform (see example app)
child,
],
);
}
/// A function that's called when the user has dragged the refresh indicator
/// far enough to demonstrate that they want the app to refresh.
/// Should return [Future].
onRefresh: myAsyncRefreshMethod,
)
Examples
Almost all of these examples are available in the example application.
| Plane indicator [SOURCE][DEMO] | Ice cream [SOURCE][DEMO] | Warp [SOURCE][DEMO] |
|---|---|---|
 |
 |
 |
| With complete state [SOURCE][DEMO] | Pull to fetch more [SOURCE][DEMO] | Envelope [SOURCE][DEMO] |
|---|---|---|
 |
 |
 |
| Programmatically controlled [SOURCE][DEMO] | Your indicator | Your indicator |
|---|---|---|
 |
Have you created a fancy refresh indicator? This place is for you. Open PR. | Have you created a fancy refresh indicator? This place is for you. Open PR. |
Documentation
CustomRefreshIndicator widget
The CustomRefreshIndicator widget provides an absolute minimum functionality that allows you to create and set your own custom indicators.
onStateChanged
The onStateChanged callback is called everytime IndicatorState has been changed.
This is a convenient place for tracking indicator state changes. For a reference take a look at the example check mark indicator widget.
Example usage:
CustomRefreshIndicator(
onRefresh: onRefresh,
// You can track state changes here.
onStateChanged: (IndicatorStateChange change) {
if (change.didChange(from: IndicatorState.dragging, to: IndicatorState.armed)) {
// Do something...
} else if(change.didChange(to: IndicatorState.idle)) {
// Do something...
}
// And so on...
}
// ...
)
IndicatorController
Controller state and value changes.
The best way to understand how the CustomRefreshIndicator widget changes its controller data is to see the example
| state | value | value description | Description |
|---|---|---|---|
| idle | ==0.0 |
Value eqals 0.0. |
No user action. |
| dragging | =<0.0 |
Value is eqal 0.0 or larger but lower than 1.0. |
User is dragging the indicator. |
| armed | >=1.0 |
Value is larger than 1.0. |
User dragged the indicator further than the distance declared by extentPercentageToArmed or offsetToArmed. User still keeps the finger on the screen. |
| loading | >=1.0 |
Value decreses from last armed state value in duration of armedToLoadingDuration argument to 1.0. |
User finished dragging (took his finger off the screen), when state was equal to armed. onRefresh function is called. |
| hiding | <=1.0 |
Value decreses in duration of draggingToIdleDuration or loadingToIdleDuration arguments to 0.0. |
Indicator is hiding after: - User ended dragging when indicator was in dragging state.- Future returned from onRefresh function is resolved.- Complete state ended. - User started scrolling through the list. |
| complete | ==1.0 |
Value equals 1.0 for duration of completeStateDuration argument. |
This state is OPTIONAL, provide completeStateDuration argument with non null value to enable it.Loading is completed. |
Support
If you like this package, you have learned something from it, or you just don't know what to do with your money
Have a nice day!
![[feature_request] add IndicatorState.completed](https://avatars.githubusercontent.com/u/33162310?v=4)
![often stop unexpectedly [PlaneIndicator + NestedScrollView]](https://avatars.githubusercontent.com/u/11645762?v=4)
![[question]Is there a way to listen for the drag from bottom?](https://avatars.githubusercontent.com/u/13610283?v=4)
![[feature_request] Parameter to disable snapping back to 1.0 when armed](https://avatars.githubusercontent.com/u/58644726?v=4)
6 Dec 7, 2022
15 Sep 13, 2022
89 Dec 8, 2022
3.5k Jan 4, 2023
18 Sep 27, 2022
27 Oct 7, 2022
12 Apr 10, 2022
3 Sep 12, 2022
28 Oct 7, 2022
3 Oct 31, 2022
49 Oct 18, 2022
5 Sep 16, 2022
50 Jan 6, 2022
138 Dec 15, 2022
0 Dec 22, 2021
94 Dec 7, 2022
3 May 20, 2022
0 Nov 29, 2021
3 Feb 21, 2022