FWidget takes care to provide elegant components to help you build beautiful applications.

Now, developers, pay attention 🤭.

Think 🤔, how can you build the visual effects shown below?


After some rapid brain spin 🧠, maybe we’ll finally find out there’s a catch 😧! Well, it’s not an easy thing to do.

In the pull-down process, as the sliding distance changes, we need to deal with several different stages in succession:

  1. The pull-down process before the critical distance

  2. Reach critical distance

  3. A pull-down process beyond a critical distance

  4. Freely bounce back to the refresh position

  5. Keep it refreshed

  6. Refresh finished, free to bounce back to 0

  7. Rebound to 0 before reaching the critical distance

    .

Each process requires a lot of calculation and logical judgment. If you want to adjust the head Widget as you slide, things get really complicated.

Anxious?

Developers, don’t!

Because FRefresh is here!

FRefresh is one of the FWidget series components developed and maintained by [Alibaba-Fliggy Mobile Technology team].

Over the past few days, we’ve made five useful and elegant widgets (FSuper, FButton, FSwitch, FRadio, FFloat) available to the community to make it easier for developers to build beautiful apps.

We are very happy with the recognition and support we have received from developers, so far we have received 440 stars from developers.

Today FRefresh is the sixth member of the FWidget family.

✨ features

Take a look at what FRefresh has in store for developers:

  • Provides super simple pull-down refresh and pull-up load builds

  • Support local update refresh region and load region view

  • Sufficient comprehensive state machine support

  • Practical controller

  • Active trigger refresh is supported


🛸 transfer zone

🛸 [Portal: FRefresh Github home page – Thank you for your Star 🌟]

📖 [Portal: FRefresh documentation]

💫 Basic edition drop-down refresh

It’s much simpler.


This is our most common drop-down refresh example in daily development 🌰. Trust me, if you wanted to build an effect like this, it would be hard!

But with FRefresh, it’s a different story.

Then, with a few simple lines of code, we can build this effect.


FRefresh(
  /// Build the refresh Header
  header: buildRefreshView(),

 /// The size of the Header area needs to be passed in  headerHeight: 75.0.  /// Content area Widget  child: ListView.builder(  physics: NeverScrollableScrollPhysics(),  shrinkWrap: true.. ),   /// This function will be called after entering Refreshing  onRefresh: () {}, ); Copy the code

Completed 🔨!

That’s all you need to do to create a drop-down refresh.

FRefresh takes care of that, and developers just need to focus on building the Header area and content area.

🚀 advanced edition drop down refresh

Simple enough, efficient enough



FRefresh(

  // build the Header area with headerBuilder
  headerBuilder: (setter, constraints) {
 return FSuper(   // get the size of the available space in the Header area  width: constraints.maxWidth,  height: constraints.maxHeight, . onClick:{  setter((){  // refresh the Header area  })  },  );  },  headerHeight: 100.0.  /// Build the content area  child: GridView.builder(),   /// This function is called back after it enters the Refreshing state  onRefresh: () {} ) Copy the code

FRefresh provides a very flexible way to build the Header area through the HeaderBuilder function.

In the HeaderBuilder function, the developer can get the update function StateSetter, which is used to locally refresh the Header area, as well as the real-time size of the Header area.

In this way, the Header area is more open to creativity.

💫 basic version on the pull load

Two modes, one style


As opposed to the pull-down refresh, the pull-up load effect is also remarkably simple to build.

FRefresh(

  /// Build the Footer area
  footer: LinearProgressIndicator(),

 /// The Footer height needs to be set  footerHeight: 20.0.  /// Build the content area  child: builderContent(),   /// This function will be called back after Loading  onLoad: () { }, ) Copy the code

Build pull-up loading is just as simple. Developers only need to focus on building the Footer area and the content area, leaving state changes and visual controls during pull-up loading to FRefresh.

🚀 advanced version pull-up loading

Never stop pursuing beauty



FRefresh(

  // build the Footer area Widget with FooterBuilder
  footerBuilder: (setter) {
  /// Get the refresh status to partially update the Footer area content  controller.setOnStateChangedCallback((state) {  setter(() { . });  });  return buildFooter();  },  footerHeight: 38.0. child: buildContent(),  onLoad: () {  controller.finishLoad();  }, ) Copy the code

FRefresh also provides a builder function called FooterBuilder for building Footer areas. This function gets the refresh function StateSetter, which only partially refreshes the Footer area.

This makes it easy for developers to change the view of the Footer area based on state or other conditions.

Very intimate of 🥰.

⚙ ️ FRefreshController

It puts you in control


FRefresh provides developers with a thoughtful controller, FRefreshController, that supports many convenient capabilities.

1. Add controllers to FRefresh


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

/// Configure the controller for FRefresh
FRefresh(  controller: controller, ) Copy the code

When a developer creates a controller and sets it into a FRefresh, the controller can start listening to the state of that FRefresh and controlling it.

2. Stop refreshing or loading

When the refresh state or load state is triggered, data processing tasks such as network requests usually occur, after which we need to stop the refresh state or load state. What to do?

  • Controller.finishrefresh () can stop the refresh

  • Controller.finishload () can stop loading

3. Monitor status

controller5.setOnStateChangedCallback((state) {
  /// Refresh the status
  if (state is RefreshState) {
  }
  /// Load status
 if (state is LoadState) {  } }); Copy the code

With this simple code, you can listen for FRefresh state changes, whether it’s a pull-down refresh or a pull-up load.

4. Swipe to listen

controller.setOnScrollListener((metrics) {
  /// get slide information
});
Copy the code

FRefreshController is really handy to add slide listening. The received parameter is [ScrollMetrics], which provides very comprehensive information such as the current slide distance, the maximum slide distance, whether the slide range is exceeded, and so on.

5. Actively trigger the refresh

With the FRefreshController, developers can also trigger a refresh on their own initiative and specify how long it takes to slide to the trigger refresh position.


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

Copy the code

This feature is useful in many scenarios.

Want more details? Please visit theFRefreshOfficial homepage (PS: Don’t forget to submit one you agree withStarOh 😘).

How do I use 😃?

Add dependencies to the project pubspec.yaml file:

🌐 pub Dependent mode

Dependencies: frefresh: ^Copy the code

⚠️ Note, please go to pub for the latest version number of FRefresh

🖥 Git dependency mode

Dependencies: '[email protected]: fliggy-mobile /frefresh.git'Copy the code

⚠️ Note, please refer to the official FRefresh project for branch number or tag.


Feeling good? Please go to FRefresh’s Github page to send a Star you like 🌟!

Past components

  • FSuper – Helps developers build beautifully complex views quickly

  • FButton – Lots of nice configuration options for developers

  • FSwitch – Beautiful switch elements with excellent interaction and visuals

  • FRadio – a radio component for almost any radio scenario

  • FFloat — Everything you can imagine for a floating element