pull_to_refresh

Vipul Chauhan

29 April 2023

The pull_to_refresh or (swipe-to-refresh) feature enables a user to pull down to fetch more data. The pull-to-refresh feature can be seen in many modern apps. The pull-to-refresh feature can be implemented in those components that are scrollable.

Features of pull_to_refresh

this is null-safe
you can pull up load and pull down refresh
almost fit for all Scroll widgets like GridView,ListView etc.
This package provide global setting of default indicator and property
provide some most common indicators
support’s Android and iOS default ScrollPhysics,the overScroll distance can be controlled,custom spring animate,damping,speed.
Not required too much code and also easy to implement.
supports horizontal and vertical refresh,reverse ScrollView also(four direction)
provides more refreshStyles: Behind,Follow,UnFollow,Front,provide more loadmore style
It support’s twoLevel refresh,implments

Read more about Flutter app development services from mobikul.

Implementation

Step-1

Add the required package in your pubspec.yaml file and then run the below-mentioned command

flutter pub get (As a result this command gets all the dependencies listed in the pubspec. yaml file)

To know more about pubspec.yaml please check this link.

environment:
  sdk: "&gt;=2.12.0 &lt;3.0.0"

dependencies:
  flutter:
    sdk: flutter
 
  pull_to_refresh: ^2.0.0
  
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

environment:

sdk: ">=2.12.0 <3.0.0"

dependencies:

flutter:

sdk: flutter

pull_to_refresh: ^2.0.0

# The following adds the Cupertino Icons font to your application.

# Use with the CupertinoIcons class for iOS style icons.

cupertino_icons: ^1.0.2

Step-2

Now, the setup is complete and then we can move forward to the implementation in our flutter application.

Note:- Here I’m using the simple example for the demonstration of this package you can use this package according to your needs.

1- Add the below line in your class to import the package.
import ‘package:pull_to_refresh/pull_to_refresh.dart’;

2- Make a function to handle your business logic while refreshing the UI

void _onRefresh() async {
    await Future.delayed(Duration(seconds: 2));
    _refreshController.refreshCompleted();
  }

void _onRefresh() async {

await Future.delayed(Duration(seconds: 2));

_refreshController.refreshCompleted();

}

3- Then create your view and start the implementation

import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pull To Refresh',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {


  RefreshController _refreshController =
      RefreshController(initialRefresh: false);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull To Refresh'),
      ),
      body: SmartRefresher(
        controller: _refreshController,
        onRefresh: _onRefresh,
        header: WaterDropMaterialHeader(
          backgroundColor: Colors.amber,
        ),
        child: Center(
          child: Text('This is demo application'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:pull_to_refresh/pull_to_refresh.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Pull To Refresh',

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(),

);

}

class MyHomePage extends StatelessWidget {

RefreshController _refreshController =

RefreshController(initialRefresh: false);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Pull To Refresh'),

body: SmartRefresher(

controller: _refreshController,

onRefresh: _onRefresh,

header: WaterDropMaterialHeader(

backgroundColor: Colors.amber,

child: Center(

child: Text('This is demo application'),

);

}

Note:- In some cases, you will notice that the refresh indicator is not showing.
To make it visible all the time please use the physics property. In Flutter all the scrollable widgets have physics properties.

ListView(
physics: const AlwaysScrollPhysics()
…….
)

Complete the above mentioned code then you will get this output.

As a result, you will get the same output as below attached video.

For more information about this package please check this link

Hopefully, this blog will be helpful to you to understand the pull_to_refresh. If you have any queries, please write them in the comment section.