Saturday, March 2, 2024

Infinite Scroll pagination in Flutter

In this section we will going to create a list widget with some extra additional functionality .Flutter package to simplify pagination of list of items from the internet. Like Facebook feed ,twitter apps ,Instagram apps most of all apps are using this feature to fetch data .There are different types of plugins are available to make infinite scrolling paginations . Its will really helpful to reduce network load as well as memory utilization. In this tutorial we are explaining how to create infinite scroll pagination in flutter.

Installing

In your pubspec.yaml

dependencies:
  pagination_view: ^2.0.0-nullsafety.0
import 'package:pagination_view/pagination_view.dart';

Basic Usage

      PaginationView<User>(
        preloadedItems: <User>[
          User(faker.person.name(), faker.internet.email()),
          User(faker.person.name(), faker.internet.email()),
        ],
        itemBuilder: (BuildContext context, User user, int index) => ListTile(
          title: Text(user.name),
          subtitle: Text(user.email),
          leading: IconButton(
            icon: Icon(Icons.person),
            onPressed: () => null,
          ),
        ),
        header: Text('Header text'),
        footer: Text('Footer text'),
        paginationViewType: PaginationViewType.listView // optional
        pageFetch: pageFetch,
        onError: (dynamic error) => Center(
          child: Text('Some error occured'),
        ),
        onEmpty: Center(
          child: Text('Sorry! This is empty'),
        ),
        bottomLoader: Center( // optional
          child: CircularProgressIndicator(),
        ),
        initialLoader: Center( // optional
          child: CircularProgressIndicator(),
        ),
      ),

Demo