Riverpod State Management Flutter

Parveen Baghel

28 April 2023

Riverpod State Management Flutter, State Management in Flutter is an important topic not to be overlooked. Obviously, you can’t just use set state(); it throughout a project consisting of 3000 lines of code over 20 different files! There are many approaches in Flutter that you can use for managing your state and for dependency injection.

Why use providers?

Providers are easy to testable and maintainable.
Providers are allowed easily access that state in multiple locations.
Simplifies combining one state with others.
Providers ensure that only impacted by state changes are recomputed.
Allow easy integration with advanced features.

Looking for a trusted Flutter app development company? We’ve got you covered.

Features of Riverpod.

Being able to have multiple providers of the same type.
Dispose the state of a provider, when it is no longer in use.
Have computed states
Making a provider private.
Being able to safely create, observe and dispose states without having to worry about losing the state on widget rebuild.

Now let’s understand the Riverpod.

Riverpod State Management Flutter.

As I mentioned, Riverpod state management is an improved version of Providers.
Providers play an important role in Riverport.

Providers are the most important part of a Riverpod application. A provider is an object that encapsulates a piece of state and allows listening to that state.

Creating a provider.

The most common usage is to declare them as global constants like so.

final name = Provider((ref) {
  return 'Hello Flutter';
});

final name = Provider((ref) {

return 'Hello Flutter';

});

The final name is the declaration of the variable. The Provider(); comes from Riverpod Class. "Hello Flutter" refers to the string that our Provider is returning. You can pass a string, int, or any other data type.

Installing Riverpod.

dependencies:
  flutter_riverpod: ^1.0.3

1 2	dependencies: flutter_riverpod: ^1.0.3

Now run this command in terminal $ flutter pub get

There are 3 types of riverpod:

riverpod to be used only with Dart
flutter_riverpod to be used only Flutter and riverpod
riverpod_hooks when we use flutter_hooks in our flutter Project.

We are gonna use flutter_riverpod.

Let’s make a Counter App

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      darkTheme: ThemeData(
             primaryColorBrightness: Brightness.dark
             ),
      theme: ThemeData(
          primarySwatch: Colors.blue, 
          primaryColorBrightness: Brightness.light,
          ),
      home: MyAppWidget(),
    );
  }
}

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

darkTheme: ThemeData(

primaryColorBrightness: Brightness.dark

theme: ThemeData(

primarySwatch: Colors.blue,

primaryColorBrightness: Brightness.light,

home: MyAppWidget(),

);

}

MyAppWidget is containing only Title and Body With FloatingActionButton.

For now, we’re using StateProvider for updating the state.

Wrap MyApp() in ProviderScope() for using providers.

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

void main() {

runApp(const ProviderScope(child: MyApp()));

}

let’s create a provider for our counter app.

final counter = StateProvider&lt;int&gt;((ref) {
  return 0;
});

final counter = StateProvider<int>((ref) {

return 0;

});

the counter provider will return only integer type data.

Reading a Provider

First and foremost, before reading a provider, we need to obtain a “ref” object.

This object is what allows us to interact with providers, be it from a widget or another provider.

convert StatelessWidget to Consumerwidget.

class MyAppWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counter);
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "MyText",
            key: const Key("text"),
          ),
        ),
        body: Center(
          child: Text("listen changed values"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Increment counter
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class MyAppWidget extends ConsumerWidget {

@override

Widget build(BuildContext context, WidgetRef ref) {

final count = ref.watch(counter);

return MaterialApp(

title: 'Flutter Demo',

home: Scaffold(

appBar: AppBar(

title: Text(

"MyText",

key: const Key("text"),

body: Center(

child: Text("listen changed values"),

floatingActionButton: FloatingActionButton(

onPressed: () {

// Increment counter

child: const Icon(Icons.add),

);

}

Add WidgetRef to listen to references of the provider.

ref.read(counter.state).state++; this will increment the value of counter.

class MyAppWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counter);
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "MyText",
            key: const Key("text"),
          ),
        ),
        body: Center(
          child: Text(count.toString())
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Increment counter
            ref.read(counter.state).state++;
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class MyAppWidget extends ConsumerWidget {

@override

Widget build(BuildContext context, WidgetRef ref) {

final count = ref.watch(counter);

return MaterialApp(

title: 'Flutter Demo',

home: Scaffold(

appBar: AppBar(

title: Text(

"MyText",

key: const Key("text"),

body: Center(

child: Text(count.toString())

floatingActionButton: FloatingActionButton(

onPressed: () {

// Increment counter

ref.read(counter.state).state++;

child: const Icon(Icons.add),

);

}

And this will increment the value of the count and this will rebuild the whole widget tree.

And this is not a good use of the provider, we just want to update the only TextWidget value. For that wrap Text Widget with Consumer.

class MyAppWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "MyText",
            key: const Key("text"),
          ),
        ),
        body: Center(
          child: Consumer(
            builder: (context, ref,child) {
              final count = ref.watch(counter);
              return Text(count.toString());
            }
          )
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Increment counter
            ref.read(counter.state).state++;
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class MyAppWidget extends ConsumerWidget {

@override

Widget build(BuildContext context, WidgetRef ref) {

return MaterialApp(

title: 'Flutter Demo',

home: Scaffold(

appBar: AppBar(

title: Text(

"MyText",

key: const Key("text"),

body: Center(

child: Consumer(

builder: (context, ref,child) {

final count = ref.watch(counter);

return Text(count.toString());

}

)

floatingActionButton: FloatingActionButton(

onPressed: () {

// Increment counter

ref.read(counter.state).state++;

child: const Icon(Icons.add),

);

}

Now this will only rebuild the TextWidget.

And Congrats🎉🎉, you made your first Riverpod App(if it runs successfullly🤭😉).

Conclusion:

In this article, I have explained the basic use of Riverpod state management in a flutter; you can modify this code according to your choice. This was a small introduction to Riverpod With Flutter On User Interaction from my side, and it’s working using Flutter.

That’s all for today.

If you want to learn more about Riverpod in flutter please go and check their official page:
https://riverpod.dev/

You can read more blogs from Mobikul on this website: https://mobikul.com/blog/