Flutter Custom Refresh Indicator


This package provides CustomRefreshIndicator widget that make it easy to implement your own custom refresh indicator. It listens for scroll events from scroll widget passed to child argument and parsing it to data easy for custom refresh indicator implementation. Indicator data is provided by IndicatorController (third argument of builder method). Long story short... thats it!

If there is something that can be improved, fixed or you just have some great idea feel free to open github issue HERE or open a pull request HERE.

If you implemented your own custom refresh indicator with this library and you want it to be mentioned here or provided as an example to the eample app, just open a pull request HERE.

Table of Contents


  /// 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>[
            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)
  /// 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,


Almost all of these examples are available in the example application.

Plane indicator [SOURCE CODE]Ice cream indicator [SOURCE CODE]
Warp indicator [SOURCE CODE]Envelope indicator
Indicator with complete state [SOURCE CODE]Your indicator
indicator_with_complete_stateHave you created a fancy refresh indicator? This place is for you. Open PR.


CustomRefreshIndicator widget

CustomRefreshIndicator widget provides an absolute minimum functionality that allows you to create and set your own custom indicators.


Controller state and value changes.

The best way to understand how the "CustomRefreshIndicator" widget changes its controller data is to see the example 😉. An example is available in the example application.


statevaluevalue descriptionDescription
idle==0.0Value eqals 0.0.No user action.
dragging=<0.0Value is eqal 0.0 or larger but lower than 1.0.User is dragging the indicator.
armed>=1.0Value 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.0Value 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.0Value 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.0Value 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.


With the IndicatorStateHelper class, you can easily track indicator's state changes. Example usage can be found HERE.

All you need to do is to update it's value on every controller update.

  onRefresh: onRefresh,
  child: widget.child,
  builder: (
    BuildContext context,
    Widget child,
    IndicatorController controller,
  ) => AnimatedBuilder(
    animation: controller,
    builder: (BuildContext context, Widget? _) {
      /// Now every state change will be tracked by the helper class.
    // ...

Then you can simply track state changes:

/// When the state changes to [idle]
if(_helper.didStateChange(to: IndicatorState.idle)) {
  // Code...

/// When the state changes from [idle] to [dragging]
if (_helper.didStateChange(
  from: IndicatorState.idle,
  to: IndicatorState.dragging,
)) {
  // Code...

/// When the state changes from [idle] to another.
if (_helper.didStateChange(
  from: IndicatorState.idle,
)) {
  // Code...

/// When the state changes.
if (_helper.didStateChange()) {
  // Code...