How to implement Pull to refresh in Flutter

Today we’ll explore how easy to implement pull to refresh in a flutter application using pull_to_refresh package and make use of listview.builder.

So let dive into our flutter project.
First, we add the pull_to_refresh package to our project
Inside pubspec.yaml file

dependencies:
pull_to_refresh: ^1.5.8

For me 99% of the package I use in my flutter app, I don’t put version code, I prefer it this way

dependencies:
pull_to_refresh:

There’s a different between these two examples, which I will talk about later, Follow me to get updates

So we have our main. dart file

Then create another file call it refresh.dart, Here we’ll implement pull_to_refresh dependency.

Format the code: right-click on your editor and click Format Document, to make your code more readable.
So below the txtlist() {}, we’ll implement the _onLoading and _onRefresh Function.

Refresh the page and try to pull the page down.

I want to quickly show you some trick with this refresh dependency
For example: If your app requires internet access you will need this.

So inside our _onRefresh() function, we want to add connectivity to it.
Connectivity: This dependency helps us to check if the phone has internet access or not, So if it has internet do this else do that.

Add these dependencies Inside pubspec.yaml file

dependencies:
connectivity: ^0.4.8+2
fluttertoast:

Let create another file, name it customFunc.dart or whatever name you want

First, we import our packages

Then create a class call it CustomFunction
class CustomFunction {}

let’s call the connectivity result, inside our CustomFunction now

full custom function code:

we are done with this, let go back to the refresh file, the _onRefresh() we have to change it to check the internet access
Delete the previous code and paste this and make sure to import customFunc.dart into the refresh page as well.

And we are good to go Restart your app or hot restart your app, you might need to do this several times to take effect on the app then pull the body down like you want to refresh the page and boom our app is refreshed.

Hi, I run the YouTube channel called TechWithSam! I’m passionate about learning and teaching programming majorly Flutter for the moment.