Pagination made easy with Riverpod!

Features

• Show loading items when fetching next page
• Automatically load the next page of items as user scrolls towards the bottom of the list (infinite-scroll-view)
• Customizable: customize error, loader, and other views
• Set a initial query for the paginated search controller to load in when view is initialized

Getting started

This package depends on https://pub.dev/packages/riverpod. Make sure you know how to use those packages.

Usage

Create a SearchProvider first. SearchProviders provide the search data to the pagination controller. You can use the paginated state to know more about the current query, which page you are on, how many items to get for each page, etc...

// <MyItem, MyQuery> Specifies the type of the item and the type of the query to be used inside this search provider
// <String, String> Means the type of the query and the type of the item is both String

class MockSearchProvider extends SearchProvider<String, String> {
  @override
  Future<List<String>> performSearch(Ref ref, PaginatedState<String, String> state) async {
    await Future.delayed(const Duration(milliseconds: 400));
    return List.generate(
        state.pageSize, (index) => '${state.query ?? "No Query"} - ${state.page * state.pageSize + index}');
  }
}

Create a paginated controller provider to allow pagination view handle different flows.

final paginatedSearchControllerProvider = createPaginatedController(
    searchProvider: MockSearchProvider(),
    // Specify an initial query so that the controller can load the initial page with this query
    initialQuery: "Initial Query"
);

Now you can create your paginated search view:

class MyHomePage extends PaginatedSearchView<String, String> {
  const MyHomePage({
    super.key,
    required super.paginatedController,
    super.invalidateOnDispose = false,
  });

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends PaginatedSearchViewState<MyHomePage>
    with TickerProviderStateMixin {
  late final tabController = TabController(length: 2, vsync: this);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: SafeArea(
            child: CustomScrollView(
              controller: paginatedScrollController,
              slivers: [
                s16HeightBoxSliver,
                Text(
                  'Paginated Search',
                  style: context.textTheme.headlineMedium.bold,
                ).withPadding(s16HorizontalPadding).asSliver,
                const Text('Search through your data easily')
                    .withPadding(s16HorizontalPadding)
                    .asSliver,
                s32HeightBoxSliver,
                TextField(
                  onChanged: (value) =>
                      ref.read(paginatedSearchControllerProvider.notifier).search(query: value),
                  decoration: const InputDecoration(
                    prefixIcon: Icon(Icons.search_rounded),
                    hintText: 'Search...',
                    filled: true,
                  ),
                ).withPadding(s16HorizontalPadding).asSliver,
                s32HeightBoxSliver,
                PaginatedSliverListView(
                  paginatedController: paginatedSearchControllerProvider,
                  itemBuilder: (item) => Card(
                    elevation: 8,
                    child: Text(
                      '$item',
                      style: TextStyle(
                          color: context.colorScheme.onSecondaryContainer,
                          fontWeight: FontWeight.bold),
                    ).withPadding(s24Padding),
                  ).withPadding(s4Vertical8Horizontal),
                  loadingBuilder: (_) => const CircularProgressIndicator.adaptive()
                      .alignCenter
                      .asSliver,
                  errorBuilder: (context, error, st) =>
                  const Text("Error happened").asSliver,
                ),
                s32HeightBoxSliver,
                PaginatedBottomWidget(
                  paginatedController: paginatedSearchControllerProvider,
                  onGoingLoading: (context) =>
                  const CircularProgressIndicator.adaptive().alignCenter,
                  onGoingErrorBuilder: (context, error, st) =>
                  const Text("Something went wrong").alignCenter,
                ).asSliver,
              ],
            ),
          ).withHeaderOverlayGlow(context: context),
        ));
  }
}

Additional information

Please open issues in the github repo if something is not working as expected.