# Building Flutter PullToRefresh in just 15 minutes

The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data. The "Pull-to-refresh" gesture was first introduced by Loren Brichter in the Tweetie app and in no time it became so popular that countless apps adopted this gesture. Today “pull-to-refresh” feature is a natural part of many popular apps, including Twitter, Gmail, Tweetbot, and others.

### What you’ll build?

In this tutorial, you’ll build a mobile app featuring a PullToRefresh gesture using the Flutter SDK. Your app will:

* Display a dynamic list with a random number of items
    
* Each time you **PullToRefresh** the no of items will change in the list
    

![That’s how our PullToRefresh gonna work](https://cdn.hashnode.com/res/hashnode/image/upload/v1603916440302/FMHnUCxzQ.png align="center")

This tutorial focuses on adding a PullToRefresh gesture to a Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

### Github Repository | shyvum

%[https://github.com/shyvum/PullToRefresh] 

### Widget In Focus | RefreshIndicator

%[https://www.youtube.com/watch?v=ORApMlzwMdM] 

### Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available in the following blog

%[https://blog.goyalshivam.com/install-flutter-on-windows-and-mac] 

### Component Syntax

The basic format of PullToRefresh gesture looks like the one below:

%[https://gist.github.com/shyvum/317eb92b5539c629babec53298e11e20] 

### Implementation

The most generic way to implement PullToRefresh is as follows:

%[https://gist.github.com/shyvum/53ed7ef36b745856ec39fa2411fbfa65] 

### Importing dart libraries to main.dart file

Import **dart:async** & **dart:math** libraries to your main.dart file by adding the following line at the starting of the file:

%[https://gist.github.com/shyvum/5fbfd9e0b28c8d045443d1928658c0c4] 

### Putting Code in action

Amend your main.dart file as per the following code:

%[https://gist.github.com/shyvum/49de5b5f62da49ca15fb0836edb094ef] 

### Building & running the application

* Connect your Emulator or physical Android device to test the application.
    
* Click on Build & Run.
    
* And Boooom 🧨, your app is ready. The final build would look like the below illustration.
    

![The final output of the implementation](https://cdn.hashnode.com/res/hashnode/image/upload/v1603916281069/GyeRiHnQ1.gif align="center")