Getting started guide of Flutter Riverpod

Integrate a state management solutionsb by using this step-by-step getting started guide of Riverpod in Flutter.

What is Riverpod?

Riverpod is a state management library for Flutter that helps you manage your app’s state in a predictable and efficient way. It provides a simple and intuitive API for managing data, making it easier to build complex apps.

Why use Riverpod?

1. You will be able to get started with it, because it has a simple and intuitive API.
2. Using proepr ensures state management allows you to update predictably your user interface, reducing the risk of bugs.
3. Riverpod uses a caching mechanism to reduce unnecessary computations.

Step 1: Add Riverpod to your project

To use Riverpod in your Flutter project, add it as a dependency with these commands:

flutter pub add flutter_riverpod
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

Then, run flutter pub get to install the package.

Step 2: Create a Provider

A provider is an object that holds and manages data. To create a provider, use the Provider class from riverpod. For example:

import 'package:flutter_riverpod/flutter_riverpod.dart';

class CounterProvider extends StateNotifier<int> {
  CounterProvider() : super(0);

  void increment() => state++;
}

This provider has an initial value of 0 and a method to increment the counter.

Step 3: Create a Consumer

A consumer is an object that uses a provider. To create a consumer, use the Consumer widget from riverpod. For example:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:notification_center_flutter/providers/counter_provider.dart';

final counterProvider = Provider((ref) => CounterProvider());

class CounterScreen extends ConsumerWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: StreamBuilder(
          stream: counter.stream,
          builder: (context, snapshot) {
            return Text(snapshot.data?.toString() ?? "");
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

This consumer uses the counterProvider to display the current counter value and increments the counter when the floating action button is pressed.

Step 4: Use the Consumer in your app

To use the consumer in your app, wrap it with a ConsumerWidget. For example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: CounterScreen(),
    );
  }
}

This will render the CounterScreen widget and display the counter value.

That’s it! You’ve successfully integrated Riverpod into your Flutter app.