Flutter : Implementing Pagination (Infinite Scroll) with GetX State Management
When you are using social media like Twitter or Instagram, have you ever wondered what’s at the end of your feed? when you keep scrolling you will realize why that it will not end, The technique has many names, including infinite scrolling pagination, lazy loading pagination, endless scrolling pagination, etc.
Pagination is considered as the best practice while loading a big amount of data, it will give better performance and resource-efficient.
In this article, We are going to demonstrate infinite scrolling on Flutter using a test API hosted in mockapi.io to build a simple list of users app, this time we will use the Model-View-Controller pattern with GetX State Management, so what is GetX ?
According to the documentation, GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management in a quick and practical way, when I'm writing this article, GetX is one of the most liked libraries on pub.dev.
I tried to make this tutorial simple and you can look at the full code of this project on GitHub repository which I will share below
in the end, we will have an app like this:
Okay, let's get started.
Prerequisites
- Flutter SDK
- IDE of choice: VSCode / Intellij Idea / Android Studio
Initial Setup
After creating a fresh Flutter project, then open pubspec.yaml and add the following dependencies:
in the dependencies we are added Dio as a network service library, lazy_load_scrollview a for a ScrollView that will enable lazy loading, and of course the latest version of GetX.
this is my package structure for the project, you can follow it if necessary:
After that, we can go to Main.dart, replace everything from it and write like this.
From the code above, we can see GetMaterialApp instead of MaterialApp, so what it is? like I said before, in this tutorial we will use GetX library and not only using it state management but we will also use the routing and other features of GetX, GetMaterialApp is not a modified MaterialApp, it is just a pre-configured Widget, which has the default MaterialApp as a child. GetMaterialApp will create routes, inject them, inject translations, inject everything you need for route navigation, that’s what they say in the documentation.
next, we will make a model for mapping the API response to Dart class model and make PaginationFilter model that we will use for holds pagination data that will be used in the controller.
Now we will make a repository that will encapsulate the logic required to access data sources.
Now we move to the most important part of this tutorial, its controller where we write the logic for doing pagination.
in the above class, we make 3 observable variables using a simple “.obs” from GetX, and getAllUsers function for fetching data and assign it into a list of Users, there are three functions that we must pay attention to, including getAllUser(), changePaginationFilter(), and loadNextPage(), on getAllUser() function we fetch the data of users and store it on userData variable, after that we check if it’s the last page by using “if” condition, and if the data is not empty we can store the data to user variable that we declare before with .obs extension, and we handle the page change logic in changePageFilter() and loadNextPage() function.
At last, comes the UI building part. I’ve kept it clean and simple with one screen file that contains the entire main UI.
You can see that in the body we wrap the ListView widget with a widget from the LazyLoadScrollView library, then we place the widget in the ObX widget for state management processes so that we can call the controller we previously created on the widget.
that’s it for now, You can find the complete source code of this project in this repository.
https://github.com/anugrahdev/GetX_Pagination
If you find this post useful, press👏 button as many times as you can and share this post with others. You can leave your feedback/suggestions in the comments 💬 below.
For any other issues feel free to reach out to me via Twitter:
