Flutter Widgets

Pull Down to refresh, Pull Up to Load More Plugin in Flutter

Refresh a page content by pulling down, and load more content page by scrolling up

Here’s a plugin that would help you to build pull down to refresh an application and a pull-up loading in the simplest way you’ll find it to be.

Although unprecedented simplicity, but the effect is nice and amazing. It also supports configuration refresh and loading elements. The complete controller allows you to help you control the entire dynamic process.

Pull DownPull UpRefresh

Guide

Parameter & Interface

FRefresh param

PARAMTYPENECESSARYDEFAULTDESC
childWidgettruenullMain view content
headerWidgetfalsenullElements that will be displayed when you pull down and refresh
headerBuilderHeaderBuilderfalsenullConstruct a pull-down refresh element. [Header] configuration will be overwritten.
headerHeightdoublefalse50.0[header] The height of the area
headerTriggerdoublefalse0.0The distance to trigger pull-down refresh should be greater than [headerHeight]
onRefreshVoidCallbackfalsenullCallback when refresh is triggered
footerWidgetfalsenullElements that will be displayed when pulling up
footerBuilderFooterBuilderfalsenullBuild pull-up loading elements. Will override [footer] configuration.
footerHeightdoublefalse0.0[footer] The height of the area
footerTriggerdoublefalse0.0The distance to trigger the pull-up loading should be greater than [headerHeight]
shouldLoadboolfalsetrueWhether the pull-up load should be triggered. In some scenarios, when the loading is completed, the pull-up loading element will need to be turned into a footer
onLoadVoidCallbackfalsenullCallback when loading is triggered
controllerFRefreshControllerfalsenull[Refresh] controller. See [Refresh Controller] for details

FRefreshController

🔧 Param

PARAMTYPEDESC
refreshStateRefreshStateGet the pull-down refresh status. See [RefreshState] for details
loadStateLoadStateGet the pull-up loading status. See [LoadState] for details
positiondoubleCurrent scroll position
scrollMetricsScrollMetricsCurrent scroll information. See [ScrollMetrics] for details.
backOriginOnLoadFinishboolWhen loading is completed, whether to return to the original position. This parameter is useful when the GridView only adds one element.

Interface


  • void refresh({Duration duration = const Duration(milliseconds: 300)})

Actively trigger pull-down refresh.

[duration] The duration of the pull-down effect. Default 300ms


  • finishRefresh()

End pull-down refresh.


  • finishLoad()

End pull-up loading.


  • void setOnStateChangedCallback(OnStateChangedCallback callback)

Set up status listener. e.g .:

controller.setOnStateChangedCallback((state){
  if (state is RefreshState) {

  }
  if (state is LoadState) {

   }
})


  • void setOnScrollListener(OnScrollListener onScrollListener)

Set up scroll listener. Receive [ScrollMetrics].


  • void scrollTo(double position, {Duration duration = const Duration(milliseconds: 300)})

Scroll to the specified position.


  • void scrollBy(double offset, {Duration duration = const Duration(milliseconds: 300)})

Scroll the specified distance.


  • void jumpTo(double position)

Jump to the specified position.

RefreshState

VALUEDESC
PREPARING_REFRESHReach [headerTrigger], ready to enter refresh state
REFRESHINGRefreshing
FINISHINGRefresh ending
IDLEIdle state

LoadState

VALUEDESC
PREPARING_LOADReach [footerTrigger], ready to enter the loading state
LOADINGLoading
FINISHINGLoad ending
IDLEIdle state

Demo

Refresh Example

This is our most common pull-down refresh example in daily development . Believe me, if you want to build such an effect, it will be very difficult!

But if you use FRefresh, the situation is completely different.

Next, we only need a few lines of code to complete the construction of this effect.

1. Create FRefreshController

/// Create a controller
FRefreshController controller = FRefreshController()

Dart

2. Create FRefresh

FRefresh(

  /// Set up the controller
  controller: controller,

  /// create Header
  header: buildRefreshView(),

  /// Need to pass the size of the header area
  headerHeight: 75.0,

  /// Content area widget
  child: ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      ...
  ),

  /// This function will be called back after entering Refreshing
  onRefresh: () {

     /// End refresh via controller
     controller.finishRefresh();
  },
);

Dart

Done 🔨!

This is all you need to do to create a pull-down refresh.

FRefresh takes care of everything, developers only need to focus on the construction of the Header area and content area.

Attention, To use ListView, GridView in FRefresh, you need to configure their physics: NeverScrollableScrollPhysics (), shrinkWrap: true, otherwise, it will affect the scrolling and layout effects.

HeaderBuilder Demo

FRefresh(
  controller: controller,

  /// Build the header area with headerBuilder
  headerBuilder: (setter, constraints) {
    return FSuper(

       /// Get the available space in the current header area
       width: constraints.maxWidth,
       height: constraints.maxHeight,
       ...
       onClick:{
          setter((){
             /// Refresh the header area
          })
       },
    );
  },
  headerHeight: 100.0,

  /// Build content area
  child: GridView.builder(),

  /// This function will be called back after entering the refreshing state
  onRefresh: () {

    /// finish refresh
    controller.finishRefresh();
  }
)

Dart

FRefresh provides a very flexible Header area construction method, which is to complete the construction through the HeaderBuilder function.

In the HeaderBuilder function, the developer can get the refresh function StateSetter for the partial refresh Header area and the real-time size of the Header area through the parameters.

This way, the Header area is given more open creativity.

Load Example

Corresponding to the pull-down refresh, the construction of the pull-up loading effect is also very simple.

1. Create FRefreshController

/// Create a controller
FRefreshController controller = FRefreshController()


Dart

2. Create FRefresh

FRefresh(

  /// Setup the controller
  controller: controller,

  /// create Footer area
  footer: LinearProgressIndicator(),

  /// need to setup Footer area height
  footerHeight: 20.0,

  /// create content area
  child: builderContent(),

  /// This function will be called back after entering the Loading state
  onLoad: () {
    
    /// End loading state
    controller.finishLoad();
  },
)

Dart

Building pull-ups is equally simple enough. Developers only need to pay attention to the construction of Footer area and content area, and the state changes and visual effects control during the pull-up loading process can be safely handed over to FRefresh.

FooterBuilder Demo

FRefresh(
  controller: controller,

  /// Build Footer Area Widget by FooterBuilder
  footerBuilder: (setter) {

    /// Get refresh status, partially update the content of Footer area
    controller.setOnStateChangedCallback((state) {
      setter(() {
        ...
      });
    });
    return buildFooter();
  },
  footerHeight: 38.0,
  child: buildContent(),
  onLoad: () {
    controller.finishLoad();
  },
)

Dart

FRefresh also provides a builder function FooterBuilder for building the Footer area. Through this function, you can get the refresh function StateSetter which refreshes only the Footer area.

In this way, the developer can easily change the view of the footer area according to the status or some other conditions. Very intimate 🥰.

FRefreshController

FRefresh provides developers with intimate controllers FRefreshController, which supports many convenient capabilities.

1. Add controller to FRefresh

/// Create Controller
FRefreshController controller = FRefreshController()

/// Configure controller for FRefresh
FRefresh(
  controller: controller,
)

Dart

When the developer creates a controller and then sets it into a FRefresh, the controller can start to monitor the status of this FRefresh and control it.

2. Stop refreshing or loading

When the refresh state or loading state is triggered, data processing tasks such as network requests are usually performed. After these tasks are completed, we need to stop the refresh state or loading state. How to do it?

  • controller.finishRefresh() Can stop refreshing
  • controller.finishLoad() Can stop loading

3. State Change Listen

controller5.setOnStateChangedCallback((state) {
  /// Refresh status
  if (state is RefreshState) {
  }
  /// Loading state
  if (state is LoadState) {
  }
});

Dart

Through the above simple code, you can monitor the status change of FRefresh, whether it is pull-down refresh or pull-up loading.

4. Scroll Listen

controller.setOnScrollListener((metrics) {
  /// Get scroll information
});

Dart

FRefreshController It is really convenient to add sliding monitor. The parameters received is [ScrollMetrics],it can get very comprehensive information such as current scroll distancemaximum scroll distancewhether it exceeds the scroll range, etc..

5. Actively trigger refresh

Through FRefreshController, developers can also actively trigger a refresh, and can specify the length of time to slide to the refresh position.

controller.refresh(duration: Duration(milliseconds: 2000));


Dart

This feature is very useful in many scenarios.

6. Scroll control

FRefreshController provides a variety of intimate and delicate sliding controls for developers to choose.

/// Scroll to the specified position
controller.scrollTo(100.0, duration:Duration(milliseconds: 2000));

/// Scroll the specified distance
controller.scrollBy(20.0, duration:Duration(milliseconds: 800));

/// Jump to the specified position
controller.jumpTo(100.0);

Dart

This makes many beautiful interactions easier to build.

How to use

Add dependencies in the project pubspec.yaml file:

pub dependency

dependencies:
  frefresh: ^<version number>

Git dependency

dependencies:
  frefresh:
    git:
      url: '[email protected]:Fliggy-Mobile/frefresh.git'
      ref: '<Branch number or tag number>'

How to run Demo project?

  1. clone project to local
  2. Enter the project example directory and run the following command
flutter create .

  1. Run the demo in example

GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.