scroll_pagination_flutter

Description:

scroll pagination flutter

Usage #
class BeerListView extends StatefulWidget {
@override
_BeerListViewState createState() => _BeerListViewState();
}

class _BeerListViewState extends State<BeerListView> {
static const _pageSize = 20;

final PagingController<int, BeerSummary> _pagingController =
PagingController(firstPageKey: 0);

@override
void initState() {
_pagingController.addPageRequestListener((pageKey) {
_fetchPage(pageKey);
});
super.initState();
}

Future<void> _fetchPage(int pageKey) async {
try {
final newItems = await RemoteApi.getBeerList(pageKey, _pageSize);
final isLastPage = newItems.length < _pageSize;
if (isLastPage) {
_pagingController.appendLastPage(newItems);
} else {
final nextPageKey = pageKey + newItems.length;
_pagingController.appendPage(newItems, nextPageKey);
}
} catch (error) {
_pagingController.error = error;
}
}

@override
Widget build(BuildContext context) =>
// Don't worry about displaying progress or error indicators on screen; the
// package takes care of that. If you want to customize them, use the
// [PagedChildBuilderDelegate] properties.
PagedListView<int, BeerSummary>(
pagingController: _pagingController,
builderDelegate: PagedChildBuilderDelegate<BeerSummary>(
singleitemBuilder: (context, item, index) => BeerListItem(
beer: item,
),
),
);

@override
void dispose() {
_pagingController.dispose();
super.dispose();
}
}
copied to clipboard
class BeerSliverGrid extends StatefulWidget {
@override
_BeerSliverGridState createState() => _BeerSliverGridState();
}

class _BeerSliverGridState extends State<BeerSliverGrid> {
final BeerListingBloc _bloc = BeerListingBloc();
final PagingController<int, BeerSummary> _pagingController =
PagingController(firstPageKey: 1);
late StreamSubscription _blocListingStateSubscription;

@override
void initState() {
_pagingController.addPageRequestListener((pageKey) {
_bloc.onPageRequestSink.add(pageKey);
});

// We could've used StreamBuilder, but that would unnecessarily recreate
// the entire [PagedSliverGrid] every time the state changes.
// Instead, handling the subscription ourselves and updating only the
// _pagingController is more efficient.
_blocListingStateSubscription =
_bloc.onNewListingState.listen((listingState) {
_pagingController.value = PagingState(
nextPageKey: listingState.nextPageKey,
error: listingState.error,
itemList: listingState.itemList,
);
});
super.initState();
}

@override
Widget build(BuildContext context) => CustomScrollView(
slivers: <Widget>[
BeerSearchInputSliver(
onChanged: (searchTerm) => _bloc.onSearchInputChangedSink.add(
searchTerm,
),
),
PagedSliverGrid<int, BeerSummary>(
pagingController: _pagingController,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 100 / 150,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 3,
),
builderDelegate: PagedChildBuilderDelegate<BeerSummary>(
singleitemBuilder: (context, item, index) => CachedNetworkImage(
imageUrl: item.imageUrl,
),
),
),
],
);

@override
void dispose() {
_pagingController.dispose();
_blocListingStateSubscription.cancel();
_bloc.dispose();
super.dispose();
}
}
copied to clipboard