Pull To Refresh Or Search Using Flutter

This is what we’ll be making

Hi guys, this article will be on how to make a pull to refresh or search widget using Flutter. In this project we will be making use of a few things. Here are the prerequisites for the project:

1. Flutter SDK
2. A testing device (simulator/physical device)
3. VelocityX Flutter package
4. Simple Animations Flutter package

Installing The Packages

In order to install the Flutter SDK there are instructions on this on the Flutter Documentation page Install | Flutter. For devices, if you’re a Mac user you can make use of the iOS simulator that comes with XCode and if you’re on windows or linux you can make use of the android emulator in the Android Studio Device Manager.

To install flutter packages you will need to go to Dart packages (pub.dev) search for whichever package you wish to install and get the name and version then paste it in the pubspec.yaml file under dependencies.

Notice the velocity_x and simple_animtions packages

Getting Started

Now that you’ve got the packages ready it’s time to get to coding. First we’re going to delete the boilerplate code in the main.dart file, create a file that will contain the pull to refresh or search widget code.

First off let’s get rid of all the clutter in the main.dart file.

Try to get your file to look like this

Now that we’ve cleared up the clutter in the main.dart file, it’s time to work on the pulltorefreshorsearch_widget.dart file that you created earlier.

Let’s start by creating a stateful widget:

You can make use of the code snippet suggestions that comes along side the Flutter extension in VS Code if you’re making use of VS Code. Just type “stf” and you should get a bunch of suggestions. Make sure that your code looks similar to the one above.

Getting Into The Real Code

Now we’ll be getting into the real code. The code will seem pretty long but I will do my best to break it down as much as possible.

Let’s start with the first portion — defining some variables:

Take note of all the variables above

Alright let me explain a few things. The searchRadius and refreshRadius are the radii of the refresh and search circles that will appear when you drag down the widget. The searchColor and refreshColor are the colors used by the appearing search and refresh circles. We will be mutating these values later depending on the screen region in where your finger is located.

Now we’re going to add in the function that will handle the mutations.

Yup there’s a lot to unpack 😅

Ok, so let’s start at the handleSwipeGesture function. This function will handle what happens when you swipe down and the refresh and search circles show up. Take note of the comments in the code. When the finger is on the right the search circle radius will increase and the color will shift to a deeper blue while the refresh radius will reduce in size. At the same time the animation controls for the arrow underneath the 2 circles will play causing the arrow to shift to either the search or the refresh circle.

The handleGestureOver function will reset the radii of the circles and run which ever function you want when finger movement is done.

Now it’s time to get into the widget build code:

Ya, I know it’s a lot 😅

Please read the comments in order to get a better understanding of the code. All the widgets, function and variable usages are directly beneath the comments. The Visible widget is what will show up after search is selected. You can choose to put anything there.

Your widget should look like this

Conclusion

That is all that needs to be done. With all this done the code should work and you should have something similar to what is at the top.

Feel free to reach out if you have any questions, comments or just want to talk about code. I would be happy to chat. I hope you enjoyed the article 😁. Have a great day.