infinite_scroll_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:infinite_scroll_sliver_list/get_flowers_use_case.dart';

class InfiniteScrollPage extends HookWidget {
  const InfiniteScrollPage({super.key});

  @override
  Widget build(BuildContext context) {
    final getFlowersUseCase = GetFlowersUseCase();
    final allFlowers = useState<List<String>>([]);
    final isPageLoading = useState<bool>(false);
    final nextPage = useState<int>(1);
    final reachedEnd = useState<bool>(false);

    void onScrollListener() {
      if (reachedEnd.value) {
        return;
      }

      if (!isPageLoading.value) {
        isPageLoading.value = true;
        Future.microtask(() async {
          final newFlowers = await getFlowersUseCase.getFlowers(page: nextPage.value);
          if (newFlowers.length < pageSize) {
            reachedEnd.value = true;
          } else {
            nextPage.value++;
          }

          allFlowers.value.addAll(newFlowers);
          isPageLoading.value = false;
        });
      }
    }

    useEffect(
      () {
        // Make first call and assign the result to allFlowers list
        Future.microtask(() async => allFlowers.value = await getFlowersUseCase.getFlowers());
        return null;
      },
      const [],
    );

    return Scaffold(
      body: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
          if (scrollNotification is ScrollEndNotification) {
            onScrollListener();
          }

          return true;
        },
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              backgroundColor: Theme.of(context).colorScheme.inversePrimary,
              title: const Text('Infinite scrolling SliverList'),
            ),
            SliverList.separated(
              separatorBuilder: (_, __) => Divider(color: Theme.of(context).colorScheme.primary),
              itemBuilder: (context, index) {
                // Show progress indicator on the bottom
                if (allFlowers.value.length == index) {
                  return const Padding(
                    padding: EdgeInsets.only(top: 16, bottom: 16),
                    child: Center(child: CircularProgressIndicator()),
                  );
                }

                final flowerName = allFlowers.value[index];

                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
                  child: Text(
                    flowerName,
                    style: TextStyle(
                      color: Theme.of(context).colorScheme.primary,
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                );
              },
              itemCount: isPageLoading.value ? allFlowers.value.length + 1 : allFlowers.value.length,
            ),
          ],
        ),
      ),
    );
  }
}