Load more and Pull to refresh with GridView in Flutter

Load more and Pull to refresh are two features that are almost indispensable when we want to display data as a list. People must be familiar with applying these features to ListView already. What about GridView? This article I would like to introduce one of the methods to be able to bring these two features into GridView offline.

Prepare

Starting project: https://github.com/scitbiz/flutter_gridview_pulltorefresh_loadmore_example (checkout to branch starter )

After clone about, switch to branch starter and run the app, the interface will look like this:

This project feature simply takes color from the data warehouse (I have a little delay to simulate getting data from the server) including 255 color codes and displays names and color codes on the GridView. Currently only taking and displaying the first 20 color codes. Our job is to load more to get more colors and pull to refresh to reload the data.

Have you looked through the code a bit to understand better

A quick look at the current code

We focus on the file lib/main.dart , where will render GridView to the main screen. I have a comment below, meaning the parameters for you new to GridView

Pull to refresh

Pull to refresh of GridView is essentially the same as ListView, just wrap Grid / List in RefreshIndicator and add function to run when refresh on onRefresh . However, this article I would like to introduce another widget is quite good, and at the same time, convenient setup to prepare us to implement more load. The widget I want to talk about is CupertinoSliverRefreshControl . This widget will display loading just like iOS, and more specifically we can customize the icon when pulling and refreshing easily.

Since this Widget is a Sliver widget, we will wrap GridView in CustomScrollView

However, at this time the IDE will report an error that cannot use GridView because GridView is not a sliver widget. So we changed GridView.builder to SliverGrid . SliverGrid has changed the parameters a bit, instead of passing itemCount , itemBuilder directly, we will pass it a delegate , SliverChildBuilderDelegate . This delegate needs to pass a function parameter to build the item (we already have _buildColorItem ) and the number of items that will render childCount

So, where’s the padding? SliverList does not allow padding, nor can we simply wrap it in Padding because Padding not a sliver widget. Instead we have SliverPadding , which is similar to Padding :

Save and run the playback again, if there is no change on the screen compared to when the clone returns, we have successfully switched GridView to use sliver already. Now adding pull to refresh is quite simple, we just need to add CupertinoSliverRefreshControl on SliverGrid and write more functions to refresh the data. You can read more properties of CupertinoSliverRefreshControl if you want to customize the icons when you pull down / loading.

Load more

With our method, actually we will always display the loading icon at the end of the Grid, only when there is no more data to load, it will hide it. So we will have to do the following steps:

• Add a state named bool , loading will be true if it is fetching data from the server otherwise it is false to prevent further loading if it is already loaded
• Add a state named canLoadMore as bool , which will be true if the server still has data to be able to load, otherwise false , which will hide / show the loading icon at the bottom of the Grid
• Add a ScrollController to the CustomScrollView to get a grasp of the Grid’s scroll status, which will determine whether or not to load more.
• Display the loadmore icon at the end of the grid

First, you can easily add loading and canLoadMore , set the status when retrieving data as well as refresh:

Then create a ScrollController and detect when will load more data:

Finally, we add the loading icon below the Grid. We use SliverToBoxAdapter to turn regular widgets into sliver widgets and use state canLoadMore to hide / show loading.

That’s it then. It’s not complicated at all

You can refer to the complete source code at https://github.com/scitbiz/flutter_gridview_pulltorefresh_loadmore_example , branch master