Riverpod overview in Flutter

Introduction

Riverpod helps you manage app data and state in a simple and safe way. It makes your app easier to build and maintain.

You want to share data between different screens in your app.

You need to update the UI when data changes.

You want to keep your app organized and avoid bugs with state.

You want to test your app logic easily.

You want a modern and flexible way to manage app state.

Syntax

Flutter

final myProvider = Provider((ref) => 'Hello Riverpod');

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

Provider creates a piece of data or logic you can use anywhere.

ConsumerWidget lets you read providers and rebuild UI when data changes.

Examples

This creates a simple provider that returns a string.

Flutter

final greetingProvider = Provider((ref) => 'Hello World');

This creates a provider that holds a number you can change.

Flutter

final counterProvider = StateProvider((ref) => 0);

This provider fetches data asynchronously, like from the internet.

Flutter

final userProvider = FutureProvider((ref) async {
  return fetchUserData();
});

Sample App

This app shows a number that starts at zero. When you press the button, the number goes up by one. Riverpod manages the number state and updates the screen automatically.

Flutter

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Counter')),
        body: Center(
          child: Text('Count: $count', style: TextStyle(fontSize: 24)),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => ref.read(counterProvider.notifier).state++,
          child: Icon(Icons.add),
          tooltip: 'Increment',
        ),
      ),
    );
  }
}

Important Notes

Always wrap your app with ProviderScope to use Riverpod.

Use ref.watch to listen to provider changes and rebuild UI.

Use StateProvider for simple mutable state like counters.

Summary

Riverpod helps manage app data and state clearly and safely.

Providers create and share data or logic across your app.

ConsumerWidget rebuilds UI when provider data changes.