How to implement list pagination via signals?

[milansurelia]

I'm interested in implementing pagination for large lists using Signals. Currently, I'm unsure about the best approach to achieve this functionality with signals.

Is there a recommended way to implement pagination using Signals?

Any insights or suggestions on how to approach pagination with Signals would be greatly appreciated.

[rodydavis]

I think this would be greats to show in the documentation!

[Cavin6080]

+1

[rodydavis]

Do you mean infinite scroll? or a paged API request using async signal?

[milansurelia]

I was asking for paged API request, but it would be great if I could get documentation for both.

[rodydavis]

Here is an example with pocketbase:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:pocketbase/pocketbase.dart';
import 'package:signals/signals_flutter.dart';

class InfiniteScroll extends StatefulWidget {
  const InfiniteScroll({
    super.key,
    required this.service,
    required this.itemBuilder,
    required this.filter,
  });

  final RecordService service;
  final Widget Function(BuildContext, int, RecordModel model) itemBuilder;
  final String Function(String) filter;

  @override
  State<InfiniteScroll> createState() => InfiniteScrollState();
}

class InfiniteScrollState extends State<InfiniteScroll> {
  final scrollController = ScrollController();
  final currentPage = signal(0);
  final totalPages = signal(1);
  final loading = signal(false);
  final hasMore = signal(true);
  final items = listSignal<RecordModel>([]);
  final search = TextEditingController();

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      if (scrollController.position.pixels >=
          scrollController.position.maxScrollExtent) {
        fetchPage();
      }
    });
    fetchPage();
  }

  Future<void> startSearch() async {
    currentPage.value = 0;
    totalPages.value = 1;
    hasMore.value = true;
    items.clear();
    await fetchPage();
  }

  Future<void> fetchPage() async {
    if (loading.value) return;
    loading.value = true;
    final page = currentPage.value + 1;
    final q = search.text.trim();
    if (page <= totalPages.value) {
      try {
        final list = await widget.service.getList(
          page: page,
          filter: q.isEmpty ? null : widget.filter(q),
        );
        currentPage.value = page;
        totalPages.value = list.totalPages;
        hasMore.value = page < list.totalPages;
        items.addAll(list.items);
        // scrollController.jumpTo(scrollController.position.maxScrollExtent);
      } catch (e) {
        debugPrint('error fetching page: $e');
      }
    }
    loading.value = false;
  }

  @override
  Widget build(BuildContext context) {
    return Watch((context) {
      return CustomScrollView(
        controller: scrollController,
        slivers: [
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: TextField(
                controller: search,
                decoration: InputDecoration(
                  labelText: 'Search',
                  border: const OutlineInputBorder(),
                  prefixIcon: InkWell(
                    onTap: startSearch,
                    child: const Icon(Icons.search),
                  ),
                ),
                onEditingComplete: startSearch,
              ),
            ),
          ),
          if (items.isEmpty)
            const SliverFillRemaining(
              child: Center(child: CircularProgressIndicator()),
            )
          else
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  if (items().isEmpty) {
                    return const Center(child: Text('No results found'));
                  }
                  if (index == items().length && hasMore.value) {
                    return const Center(child: CircularProgressIndicator());
                  }
                  return widget.itemBuilder(
                    context,
                    index,
                    items.value[index],
                  );
                },
                childCount: items.value.length + (hasMore.value ? 1 : 0),
              ),
            ),
        ],
      );
    });
  }
}

[rajatsingla]

Hi @rodydavis , i have one question to understand signals better, a bit unrelated to infinite scroll discussion here.
In this example, since we have Watch at parent level which is mostly for items, lets say if we have another signal being used somewhere inside the watch, will it re-render the whole UI?

[rodydavis]

Do you have a code example you can share?

[rajatsingla]

Hi, taken below code from crud example just for ease, and added counter signal to it, my question is if counter changes would it rerender the whole watch block or just text and can we have nested watch to somehow only watch 'counter'.

I hope my question makes some sense, I am new to flutter, but coming from Vue ecosystem really liked signals and want to add in our new app we are building.

import 'package:crud_dio/signals/post_signals.dart';
import 'package:crud_dio/ui/home_add_or_edit.dart';
import 'package:crud_dio/ui/home_detail.dart';
import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  late final Signal<int> counter = signal(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Watch((context) {
        final posts = postsService.posts;
        if (posts.value.isLoading) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
        if (posts.value.value == null) {
          return const Center(child: Text('No Posts $counter'));
        }

        if (posts.value.hasError) {
          return Center(child: Text(posts.value.error.toString()));
        }
        return ListView.builder(
          itemCount: posts.value.value?.length,
          itemBuilder: ((context, index) {
            final Post post = posts.value.value![index];
            return ListTile(
              title: Text(post.title ?? ''),
              subtitle: Text(post.body ?? ''),
              onTap: () {
                postsService.getPost(id: post.id!);
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => HomeDetail(id: post.id!)),
                );
              },
            );
          }),
        );
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => const HomeAddOrEdit()),
          );
        },
        tooltip: 'Add',
        child: const Icon(Icons.add),
      ),
    );
  }
}

[rajatsingla]

Hi @rodydavis , below text from signals doc helped, thanks.

Rebuilds
To protect against unnecessary rebuilds, the watch extension will only subscribe once to the nearest element and mark the widget >as dirty.

This means that if you have multiple widgets that are watching the same signal, only the first one will be subscribed to the signal >and multiple updates will be batched together.