Help you to build pull-down refresh and pull-up loading in the simplest way.

Related tags

Animation frefresh
Overview

frefresh

Help you to build pull-down refresh and pull-up loading in the simplest way.

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

Author:Newton([email protected])

English | 简体中文

Like it? Please cast your Star 🥰

Features

🛠 Guide

⚙️ Parameter & Interface

🔩 FRefresh param

Param Type Necessary Default desc
child Widget true null Main view content
header Widget false null Elements that will be displayed when you pull down and refresh
headerBuilder HeaderBuilder false null Construct a pull-down refresh element. [Header] configuration will be overwritten.
headerHeight double false 50.0 [header] The height of the area
headerTrigger double false 0.0 The distance to trigger pull-down refresh should be greater than [headerHeight]
onRefresh FRefreshCallback false null Callback when refresh is triggered. Any value returned can automatically end the refreshing, otherwise it will not actively end the refreshing
footer Widget false null Elements that will be displayed when pulling up
footerBuilder FooterBuilder false null Build pull-up loading elements. Will override [footer] configuration.
footerHeight double false 0.0 [footer] The height of the area
footerTrigger double false 0.0 The distance to trigger the pull-up loading should be greater than [headerHeight]
shouldLoad bool false true Whether 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
onLoad FRefreshCallback false null Callback when loading is triggered. Any value returned can automatically end the loading, otherwise it will not actively end the loading
controller FRefreshController false null [Refresh] controller. See [Refresh Controller] for details

⌨️ FRefreshController

🔧 Param

Param Type Desc
refreshState RefreshState Get the pull-down refresh status. See [RefreshState] for details
loadState LoadState Get the pull-up loading status. See [LoadState] for details
position double Current scroll position
scrollMetrics ScrollMetrics Current scroll information. See [ScrollMetrics] for details.
backOriginOnLoadFinish bool When 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

Value Desc
PREPARING_REFRESH Reach [headerTrigger], ready to enter refresh state
REFRESHING Refreshing
FINISHING Refresh ending
IDLE Idle state

🃏 LoadState

Value Desc
PREPARING_LOAD Reach [footerTrigger], ready to enter the loading state
LOADING Loading
FINISHING Load ending
IDLE Idle 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()

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();
  },
);

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();
  }
)

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()

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();
  },
)

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();
  },
)

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

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) {
  }
});

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
});

FRefreshController It is really convenient to add sliding monitor. The parameters received is [ScrollMetrics],it can get very comprehensive information such as current scroll distance, maximum scroll distance, whether 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));

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);

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>

⚠️ Attention,please go to [pub] (https://pub.dev/packages/frefresh) to get the latest version number of FRefresh

🖥 Git dependency

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

⚠️ Attention,please refer to [FRefresh] (https://github.com/Fliggy-Mobile/frefresh) official project for branch number or tag.

💡 License

Copyright 2020-present Fliggy Android Team <[email protected]>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Like it? Please cast your Star 🥰


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
You might also like...

A collection of loading indicators animated with CSS

SpinKit Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily cust

Dec 26, 2022

A collection of awesome loading animations

A collection of awesome loading animations

NVActivityIndicatorView ⚠️ Check out LoaderUI (ready to use with Swift Package Mananger supported) for SwiftUI implementation of this. 🎉 Introduction

Jan 3, 2023

Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Jan 2, 2023

A simple custom loading indicator package.

A simple custom loading indicator package.

custom_loading_indicator A Flutter package to customise the loading indicators with your organisation's logo. Let's say you're a dentist and your app

Aug 10, 2020

Loading times are unavoidable in application development. From a user experience (UX) perspective

loading A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Feb 12, 2022

A collection of awesome flutter loading animation

A collection of awesome flutter loading animation

loading_indicator_view A collection of awesome flutter loading animation Demo Usage loading_indicator_view: ^1.1.0 Animation types Type Type Type Typ

Dec 6, 2022

A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓 🤓

Dec 23, 2022

In this repo you can expertise how to build various User Interface in Flutter

In this repo you can expertise how to build various User Interface in Flutter

🎫 Flutter UI 📝 Introduction The language used here is Dart, which is a object oriented programming language with the sdk called Flutter,It's a googl

Nov 5, 2022

An easy way to use AnimationController with Curve.

An easy way to use AnimationController with Curve.

CurvedAnimationController An easy way to use AnimationController with Curve. Getting Started Add dependency in your flutter project. $ flutter pub add

Nov 23, 2021
Comments
  • 稍微长一点的列表掉帧卡顿

    稍微长一点的列表掉帧卡顿

    直接渲染和FutureBuilder渲染长列表数据都是一样的掉帧

    换成 flutter_easyrefresh就不卡了,一样的数据和逻辑 dbjSld.jpg

    dbji0P.jpg

    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel master, 1.21.0-5.0.pre, on Mac OS X 10.15.4 19E287, locale zh-Hans)
    [!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
        ✗ Android license status unknown.
          Try re-installing or updating your Android SDK Manager.
          See https://developer.android.com/studio/#downloads or visit
          https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.
     
    [✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
    [✓] Android Studio (version 3.5)
    [✓] VS Code (version 1.48.0)
    [✓] Connected device (1 available)
    
    ❯ dart --version
    Dart SDK version: 2.9.0-21.0.dev.flutter-9dca49e71e (be) (Fri Jul 17 13:26:08 2020 +0000) on "macos_x64"
    
    frefresh: ^1.1.0
    

    补充一点 真机上卡顿一样的存在和明显,而真机flutter_easyrefresh已经变成一条直线了,流畅丝滑

    opened by jcleng 0
  • 设备切换方向报错

    设备切换方向报错

    设备从竖屏切换至横屏报错

    Another exception was thrown: RenderBox.size accessed beyond the scope of resize, layout, or permitted parent access. RenderBox can always access its own size, otherwise, the only object that is allowed to read RenderBox.size is its parent, if they have said they will. It you hit this assert trying to access a child's size, pass "parentUsesSize: true" to that child's layout().
    
    ════════ Exception caught by rendering library ═════════════════════════════════
    RenderBox.size accessed beyond the scope of resize, layout, or permitted parent access. RenderBox can always access its own size, otherwise, the only object that is allowed to read RenderBox.size is its parent, if they have said they will. It you hit this assert trying to access a child's size, pass "parentUsesSize: true" to that child's layout().
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1709 pos 13: 'debugDoingThisResize || debugDoingThisLayout ||
                  (RenderObject.debugActiveLayout == parent && _size._canBeUsedByParent)'
    The relevant error-causing widget was
        FRefresh 
    
    opened by chentianxin 0
Owner
Fliggy Mobile
We create legends
Fliggy Mobile
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
Shimmer loading - A Flutter project to show how to add shimmer loading animation

shimmer_loading A Flutter project to show how to add shimmer loading animation.

null 0 Feb 6, 2022
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview ?? https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

nslog11 1k Jan 9, 2023
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

null 3 Dec 8, 2021
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
Loading Animation With Flutter

Flutter Loading Animation loading.ista.mp4 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few re

Join Flutter 17 Oct 13, 2022
Lazy Loading Flutter Plugin

flutter_placeholder_textlines A simple plugin to generate placeholder lines that emulates text in a UI, useful for displaying placeholder content whil

Victor HG 21 Apr 12, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Andre Cytryn 171 Sep 23, 2022
A Flutter library for loading skeletons

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Daniel 0 Jan 6, 2022
Android loading animations

Android-SpinKit Android loading animations(I wrote a android edition according SpinKit) Demo Apk Preview Gradle Dependency dependencies { implement

ybq 8.4k Dec 30, 2022