mcpField
R
riverpod-consumers

riverpod-consumers

github.com/serverpodDevelopment10105 installsUpdated 34w ago
Repository

About riverpod-consumers

A Riverpod skill explaining how Flutter widgets access and listen to providers through consumer types. It helps developers choose between Consumer, ConsumerWidget, and ConsumerStatefulWidget based on widget state needs.

Key features

  1. 01Use Consumer with existing widget classes
  2. 02Build with ConsumerWidget and WidgetRef
  3. 03Use ConsumerStatefulWidget for local state
  4. 04Choose a consumer type by widget needs
  5. 05Understand ref-based provider listening

Use cases

  1. 01Read a provider from a StatelessWidget
  2. 02Listen to providers in a stateful widget
  3. 03Use provider data with animations or TabController
  4. 04Select a Riverpod consumer pattern

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/serverpod/skills-registry --skill riverpod-consumers

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

Details

From the project README

Riverpod — Consumers

Instructions

Consumers are widgets that give you a Ref (here, WidgetRef) so you can read and listen to providers. Without a Consumer, widgets cannot access the provider tree.

Consumer (builder)

Use Consumer when you want to keep extending StatelessWidget or StatefulWidget. The builder callback receives (context, ref, child).

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, _) {
        final value = ref.watch(myProvider);
        return Text(value.toString());
      },
    );
  }
}
ConsumerWidget

Subclass ConsumerWidget instead of StatelessWidget. The build method receives (BuildContext context, WidgetRef ref).

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final value = ref.watch(myProvider);
    return Text(value.toString());
  }
}
ConsumerStatefulWidget + ConsumerState

When you need a State (e.g. for lifecycle or local state), use ConsumerStatefulWidget and ConsumerState. The state object has a ref property.

class MyWidget extends ConsumerStatefulWidget {
  @override
  ConsumerState<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  @override
  Widget build(BuildContext context) {
    final value = ref.watch(myProvider);
    return Text(value.toString());
  }
}
Which to use
  • Consumer — Use for everything if you prefer not to change your widget base class; slightly more verbose.
  • ConsumerWidget — Recommended when you don't need State; one less nesting level.
  • ConsumerStatefulWidget — Use when you need State (e.g. TabController, animations).
Why not StatelessWidget + context.watch?

Riverpod does not use BuildContext to watch providers because that would break auto-dispose and other features that rely on knowing when a widget stops listening. Ref-based consumers allow reliable disposal and correct behavior. The hooks_riverpod package also offers HookConsumerWidget etc. for use with flutter_hooks. Enable riverpod_lint for IDE refactors (e.g. "Convert to ConsumerWidget").

Comments

Markdown supported