A package for creating a ListView that handles lazy loading, pagination, pull-to-refresh, and a custom empty state.

Lazy Loading Pagination Example Lazy Loading Pull-To-Refresh Example

Features

Add this to your Flutter app to:

  1. Create all ListView's throughout your project using a single reusable widget.
  2. Handle pagination within ListView's by simply calling a function to load more data.
  3. Provides a default loading state when fetching more data. User can override this by providing there own loadingStateBuilder.
  4. Provides a default empty state when no data is returned. User can override this by providing there own emptyState Widget.
  5. Automatically handles pull-to-refresh functionality.

Usage

Install the LazyLoadingListView package by adding the following to your project dependencies within the pubspec.yaml file:

lazy_loading_list_view: ^0.0.7

Add the following to the top of your file:

import 'package:lazy_loading_list_view/lazy_loading_list_view.dart';

Create a LazyLoadingListView using the example below:

LazyLoadingListView<MyData>(  
    loadItems: (int page) async { 
        // your function to load data for the given page 
        return await getData(page: page);
    }, 
    buildItem: (BuildContext context, MyData item, int index) { 
        // your function to build list item 
        return MyCustomListItem(item: item); 
    }, 
)  

You can also customize the LazyLoadingListView further by overriding the separatorBuilder, loadingStateBuilder, emptyState, pageSize and refresh indicator color:

LazyLoadingListView<MyData>(  
    loadItems: (int page) async { 
        // your function to load data for the given page 
        return await getData(page: page);
    }, 
    buildItem: (BuildContext context, MyData item, int index) { 
        // your function to build list item 
        return MyCustomListItem(item: item); 
    }, 
    separatorBuilder: (context, index) {
        // define your own separator
        return const SizedBox(height: 10);
    },
    loadingStateBuilder: (context) {
        // your function to build a custom loading state
        return const MyCustomLoadingState();
    },
    // provide your custom empty state widget
    emptyState: MyEmptyState(),
    // define your preferred page size
    pageSize: 10,
    // define your preferred refresh indicator color
    refreshColor: Colors.deepPurple,
)  

You can also access all the normal properties that a ListView has such as physics, padding, etc:

LazyLoadingListView<MyData>(  
    loadItems: (int page) async {
        // your function to load data for the given page
        return await getData(page: page);
    },
    buildItem: (BuildContext context, MyData item, int index) {
        // your function to build list item
        return MyCustomListItem(item: item);
    },
    separatorBuilder: (context, index) {
        // define your own separator
        return const SizedBox(height: 10);
    },
    loadingStateBuilder: (context) {
        // your function to build a custom loading state
        return const MyCustomLoadingState();
    },
    // provide your custom empty state widget
    emptyState: MyEmptyState(),
    // define your preferred page size
    pageSize: 10,
    // define your preferred refresh indicator color 
    refreshColor: Colors.deepPurple,
    // provide your own scroll controller
    scrollController: ScrollController(),
    // provide your own scroll direction
    scrollDirection: Axis.horizontal,
    // provide your own reverse
    reverse: false,
    // provide your own physics
    physics: const BouncingScrollPhysics(),
    // provide your own shrinkWrap
    shrinkWrap: true,
    // define your own custom padding
    padding: const EdgeInsets.all(12),
)

Bugs or Feature Requests

If you encounter any problems feel free to open an issue.
If you feel the library is missing a feature that would be helpful, please raise a ticket on GitHub and we will look into it.

Additional information

This package was created by Caffeinated Code Ltd. If you find this package useful, you can support it for free by giving it a thumbs up at the top of this page. Here's another option to support the package: