Have you ever wondered how social media platforms like Instagram and Twitter can continuously feed users with posts as they scroll through the app? It feels like these pages never end, even if you may have also noticed the loading indicator that periodically appears on the screen.

This is an example of the visual implementation of the infinite scroll pagination. It’s also sometimes referred to as endless scrolling pagination, auto-pagination, lazy-loading pagination, or progressive loading pagination.

Pagination, in software development, is the process of separating data into sequential segments, thereby allowing the user to consume the bits of the data at their desired pace. This can be very useful when your application provides an enormous but ordered amount of data, much like what a user experiences when exploring Instagram or Twitter. It is also beneficial because loading all the data at once could dampen the performance of your application, and the user may not end up consuming all the data you have provided.

In this tutorial, you’ll learn how to paginate your Flutter widgets and give your users the feel of an infinite scroll using the ListView, ScrollController, and infinite_scroll_pagination packages. 

Infinite Scroll Pagination 

Unopinionated, extensible and highly customizable package to help you lazily load and display small chunks of items as the user scrolls down the screen – known as infinite scrolling pagination, endless scrolling pagination, auto-pagination, lazy loading pagination, progressive loading pagination, etc.

Designed to feel like part of the Flutter framework.

Features 

• Architecture-agnostic: Works with any state management approach, from setState to BLoC. Not even Future usage is assumed.
• Layout-agnostic: Out-of-the-box widgets corresponding to GridView, SliverGrid, ListView and SliverList – including .separated constructors. Not enough? You can easily create a custom layout.
• API-agnostic: By letting you in complete charge of your API calls, Infinite Scroll Pagination works with any pagination strategy.
• Highly customizable: You can change everything. Provide your own progress, error and empty list indicators. Too lazy to change? The defaults will cover you.
• Extensible: Seamless integration with pull-to-refresh, searching, filtering and sorting.
• Listen to state changes: In addition to displaying widgets to inform the current status, such as progress and error indicators, you can also use a listener to display dialogs/snackbars/toasts or execute any other action.

        Call in Initstate

@override<br>void initState() {
// TODO: implement initState
super.initState();<br>  pagingController.addPageRequestListener((pageKey) {
fetchData(pageKey);<br>  });
}

        Call FetchData

void fetchData(int pageKey)async {
  try{

    var response=await 
    http.get(Uri.parse("https://api.punkapi.com/v2/beers?page=$pageKey&per_page=10"));
    var data=await dataModelFromJson(response.body);
    pagingController.appendPage(data, pageKey+1);
  }catch(error){
    pagingController.error=error;
  }
}

        Pagination

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Infinite Pagination"),
    ),
    body: PagedListView<int,DataModel>(
      pagingController: pagingController,
      builderDelegate: PagedChildBuilderDelegate<DataModel>(
        itemBuilder: (context,model,index)=>ListTile(
          title: Text(model.name),
          leading: Container(
            child: Image.network(model.imageUrl),
          ),
        )
      ),
    ),
  );
}