chetan2921/flo/riverpod-consumers

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").