StateProvider | Riverpod Gen Shortcuts

StateProvider is useful for managing simple, synchronous pieces of state without writing a full Notifier.

StateProvider exists to provide a simple way to store and update simple variables like an integer, a string, or a boolean. With Riverpod Generator, you typically use a simple function or a minimal Notifier that exposes a synchronous value.

When to Use StateProvider

Managing filters or simple toggle states (like a theme toggle)
Storing user input from UI before submission
Holding a selected index for a bottom navigation bar

Basic Syntax with Generator

Using the Riverpod Generator, the equivalent of a StateProvider is often just a simple Notifier class:

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'counter.g.dart';

@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0;

  void increment() => state++;
  void decrement() => state--;
}

Using in Widgets

Read the state with ref.watch and update it using the methods on the notifier:

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => ref.read(counterProvider.notifier).increment(),
          child: Text('Increment'),
        ),
      ],
    );
  }
}

💡 Pro Tip

While older versions of Riverpod heavily used StateProvider directly, the recommended approach with Riverpod Generator is to use a generated Notifier. It provides better encapsulation and allows you to add complex logic later without breaking the API.