Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to do pagination in GridView (Flutter)

I want to implement pagination in GridView I use GridView.builder I want to download 10 by 10 items when the user reaches the last row

like image 531
ahmed khattab Avatar asked May 27 '19 09:05

ahmed khattab


People also ask

Can I build a paginator using GridView in flutter?

And that pretty much covers the basics of building a simple paginator when using the GridView in Flutter. Of course I know this will not work for every use case, but I hope it will provide you the starting point you need to build some awesome widgets!

Is there infinite scroll (pagination) in flutter listview?

A simple workaround for the infinite scroll (Pagination) in Flutter ListView! We face many requirements in our daily application development for infinite scrolling (pagination)in ListView and we are like.

How to implement pagination using flutter pagination?

Implement pagination using Flutter Pagination Helper So I figured out some common and boilerplate code and made a generalized solution and created a library for that named Flutter Pagination Helper. Implement flutter pagination dependency by declaring that in pubspec.yaml Import required files and initialize PaginatedListWidget as follows.

What is listview in flutter?

A library for widgets that load their content one page (or batch) at a time. A pre-load PageView widget which you can use it to preload one page before and after current page. listview scroll to bottom ,can load more data. help developer paging load data. Flutter package to simplify pagination of list of items from the internet.


1 Answers

You can do this using a NotificationListener. As a simple demonstration it will increase the length of your GridView whenever it reaches end of page :

    var items_number = 10 ;

    return NotificationListener<ScrollNotification>(
         onNotification: (scrollNotification){
              if(scrollNotification.metrics.pixels == scrollNotification.metrics.maxScrollExtent){
                 setState(() {
                    items_number += 10 ;
                 });    
              }
         },
         child: GridView.builder(
                    itemCount: items_number,
                    itemBuilder: (context, index) {
                      //.... the reminder of your code
                    }
                ),
    );
like image 96
Mazin Ibrahim Avatar answered Sep 20 '22 18:09

Mazin Ibrahim