How to Add Riverpod in Flutter app – FlutterCodingHub

Using Riverpod architecture in a Flutter app involves several steps to set up and manage the state of your application. Here’s a general guide to get you started:

1. Add Dependencies

First, you need to add the necessary dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0

2. Define Providers

Riverpod uses providers to manage state. You can define providers for various purposes, such as managing app-level state, UI state, or providing data from APIs.

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

// Example app-level state provider
final counterProvider = StateProvider<int>((ref) => 0);

// Example asynchronous data provider
final dataProvider = FutureProvider<String>((ref) async {
  // Fetch data from API
  return await fetchData();
});

Future<String> fetchData() async {
  // Simulate fetching data
  await Future.delayed(Duration(seconds: 2));
  return 'Data from API';
}

3. Use Providers in Widgets

Now, you can use these providers in your widgets using Consumer or ProviderListener widgets.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(counterProvider);
    final data = watch(dataProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter Value: ${counter.state}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            if (data is AsyncData)
              Text(
                'Data from API: ${data.value}',
                style: TextStyle(fontSize: 20),
              )
            else if (data is AsyncLoading)
              CircularProgressIndicator()
            else if (data is AsyncError)
              Text(
                'Error: ${data.error}',
                style: TextStyle(fontSize: 20, color: Colors.red),
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(counterProvider).state++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

4. Dispose Providers

Dispose of your providers when they are no longer needed, typically in the dispose method of your widgets.

@override
void dispose() {
  // Dispose your providers here
  super.dispose();
}

5. Run the App

Now, you can run your Flutter app, and it should use Riverpod architecture to manage the state effectively.

This is a basic overview of using Riverpod in a Flutter app. As you become more familiar with it, you can explore advanced features like FamilyProviders, StateNotifierProviders, and ScopedProviders for more complex state management needs.

Conclusion

Congrats! You have learned how to add Riverpod to a Flutter app, and there is already so much you can do! However, the latest version, Riverpod 2.0, offers new features that can enhance state management for your projects.

You can reach me on Linkedin