mcpField
R
riverpod-pull-to-refresh

riverpod-pull-to-refresh

github.com/serverpodDevelopment1073 installsUpdated 34w ago
Repository

About riverpod-pull-to-refresh

A Riverpod skill for implementing pull-to-refresh with asynchronous providers. It explains refreshing provider futures and presenting loading, previous data, and error states through AsyncValue.

Key features

  1. 01Async provider setup
  2. 02RefreshIndicator integration
  3. 03Refresh provider futures
  4. 04AsyncValue state handling

Use cases

  1. 01Add pull-to-refresh to a scrollable list
  2. 02Keep prior data visible during refresh
  3. 03Show loading and error states for fetched data

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/serverpod/skills-registry --skill riverpod-pull-to-refresh

After installing, type/riverpod-pull-to-refreshin Claude Code to confirm it loaded.

Details

From the project README

Riverpod — Pull-to-refresh

Instructions

Riverpod fits pull-to-refresh well: refresh by invalidating the provider and let AsyncValue handle loading vs data vs error.

1. Provider and UI

Define an async provider (e.g. FutureProvider or AsyncNotifierProvider) that fetches data. Display it with ref.watch(provider) so you get an AsyncValue.

2. RefreshIndicator

Wrap your scrollable (ListView, SingleChildScrollView, etc.) in RefreshIndicator. In onRefresh, call ref.refresh(provider.future) so the indicator stays until the new data is loaded:

RefreshIndicator(
  onRefresh: () => ref.refresh(activityProvider.future),
  child: ListView(
    children: [
      // content
    ],
  ),
)
3. Loading and error states

Use AsyncValue pattern matching:

  • Initial load: No data and no error → show full-screen spinner.
  • Refresh: Show the refresh indicator and keep showing previous data (or previous error) until the new result arrives.
  • Data: AsyncValue(:final value?) or similar to show the value.
  • Error: AsyncValue(:final error?) to show the error.

Example (syntax may vary by Riverpod version):

final activity = ref.watch(activityProvider);
switch (activity) {
  AsyncValue<Activity>(:final value?) => Text(value.activity),
  AsyncValue(:final error?) => Text('Error: $error'),
  _ => const CircularProgressIndicator(),
}

Use valueOrNull (or equivalent) if your API exposes it for nullable data. See the docs for the exact AsyncValue API in your version.

Comments

Markdown supported