lazy_loading_list_view

Description:

lazy loading list view

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






Features #
Add this to your Flutter app to:

Create all ListView's throughout your project using a single reusable widget.
Handle pagination within ListView's by simply calling a function to load more data.
Provides a default loading state when fetching more data. User can override this by providing there own loadingStateBuilder.
Provides a default empty state when no data is returned. User can override this by providing there own emptyState Widget.
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
copied to clipboard
Add the following to the top of your file:
import 'package:lazy_loading_list_view/lazy_loading_list_view.dart';
copied to clipboard
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);
},
)
copied to clipboard
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,
)
copied to clipboard
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),
)
copied to clipboard
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: