riverpod-pull-to-refresh

Implement pull-to-refresh in Flutter with Riverpod AsyncValue and RefreshIndicator.

8|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/serverpod/skills-registry --skill riverpod-pull-to-refresh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: riverpod-pull-to-refresh
Source: https://github.com/serverpod/skills-registry/tree/main/skills/riverpod/riverpod-pull-to-refresh
Command: npx skills add https://github.com/serverpod/skills-registry --skill riverpod-pull-to-refresh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the implementation of pull-to-refresh functionality in Flutter applications using Riverpod, ensuring a smooth user experience for data updates.

Core Features & Use Cases

  • Seamless Data Refreshing: Integrates with Riverpod's AsyncValue to display loading states and previous data during refresh.
  • RefreshIndicator Integration: Provides clear instructions on wrapping scrollable widgets with RefreshIndicator for pull-to-refresh gestures.
  • Use Case: When a user pulls down on a list of news articles, the app automatically fetches the latest articles without losing the view of older ones, showing a subtle loading indicator.

Quick Start

Implement pull-to-refresh for the 'activityProvider' by calling 'ref.refresh(activityProvider.future)' within the 'onRefresh' callback of a RefreshIndicator.

Frequently Asked Questions about riverpod-pull-to-refresh

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement pull-to-refresh in Flutter using Riverpod?

To implement pull-to-refresh in Flutter using Riverpod, wrap your scrollable widgets with a `RefreshIndicator` and trigger data fetching by calling `ref.refresh(provider.future)` within its `onRefresh` callback.

How does Riverpod's AsyncValue handle data during a refresh indicator update?

Riverpod's `AsyncValue` handles data during a refresh indicator update by retaining and displaying previous data while loading new data, ensuring users do not lose their current view during the fetch operation.

What is the best way to trigger a Riverpod provider invalidation for a list refresh?

The best way to trigger a Riverpod provider invalidation for a list refresh is to use `ref.refresh(provider.future)` inside the `onRefresh` callback, which automatically invalidates the provider and fetches new data.

Can I use RefreshIndicator with Riverpod to show error states for failed data fetching?

Yes, you can use `RefreshIndicator` with Riverpod to show error states by utilizing `AsyncValue` pattern matching, which gracefully handles and displays data refresh errors alongside initial loading states.

Does Riverpod pull-to-refresh work for real-time updates in scrollable views?

Yes, Riverpod pull-to-refresh works for real-time updates in scrollable views by utilizing provider invalidation to fetch the latest data when users pull down, applying to scenarios like fetching latest news articles.