Pull Down To Refresh The Screen In Flutter

What’s up coders…

Whenever we want to refresh the screen while writing apps, either we click on side menu of dashboard, or we implement a button to refresh our screen to fetch new data available.

But, does this really make any sense??

Nope, we can implement pull down to refresh the screen of our screen if there is new data available or any change in data. It boost our app performance as well as UI improvement.

For this kind of functionality, a package is available which provider a smart refresher to pull down to refresh the screen.

So. Let’s implement this package. First add this to your pubspec.yaml file.

pubspec.yaml

pull_to_refresh: ^1.6.3

get dependency

flutter pub get

import package

import 'package:pull_to_refresh/pull_to_refresh.dart';

Let’s initialize the controller to make our refresh completed.

RefreshController _refreshController =
      RefreshController(initialRefresh: false);

Your child must be a list view . Now apply the smart refresher to the body of our scaffold using the code snippet below.

return Scaffold(
      body: SmartRefresher(
        enablePullDown: true,
        controller: _refreshController,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: ListView.builder(
          itemBuilder: (c, i) =>Card(Center(child:Text(items[i]))),
          itemCount: items.length,
        ),
      ),
    );

For initial data,

void _onLoading() async {
 // your api here
  _refreshController.loadComplete();
}

For refresh of data while pull to refresh,

void _onRefresh() async {
  // your api here
  _refreshController.refreshCompleted();
}

That’s all, you can see the code to refresh the screen with a better approach, it almost fit for all scrollable widgets like GridView, ListView etc. I guess this snippet is important for better productivity of our app.

For reference go to the link here.

If you like this article, just give me a clap.

Happy Coding !