Quick Start

Build your first Riverpod provider with code generation in under 5 minutes. This tutorial walks you through creating a simple counter app.

Create Your First Provider

Create a new file lib/providers/counter.dart and add this code:

lib/providers/counter.dart
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--;
  void reset() => state = 0;
}

Generate the Provider

Run build_runner to generate the provider code:

terminal
dart run build_runner build
Build Runner in Action
Watch build_runner generate your provider files automatically

Use in Your Widget

Now use the generated provider in your Flutter widget:

counter_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'providers/counter.dart';

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    final counterNotifier = ref.read(counterProvider.notifier);

    return Scaffold(
      appBar: AppBar(title: Text('Counter: $count')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $count', style: Theme.of(context).textTheme.headlineMedium),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: counterNotifier.decrement,
                  child: Text('-'),
                ),
                ElevatedButton(
                  onPressed: counterNotifier.reset,
                  child: Text('Reset'),
                ),
                ElevatedButton(
                  onPressed: counterNotifier.increment,
                  child: Text('+'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

What Just Happened?

In just a few lines of code, you:

Next Steps

Explore Provider Types

Learn about FutureProvider, StreamProvider, and other provider types for different use cases.

Code Shortcuts

Discover IDE snippets and shortcuts to create providers even faster.