Flutter Riverpod Example | State Management

Flutter Riverpod Example | State Management

    Flutter Riverpod Example | State Management

    We will use four simple steps to create a Riverpod state management counter app

    Wrap your app using ProviderScope

    Create a provider using StateProvider

    Extend ConsumerWidget for a class

    Read and edit the value of StateProvider ref.read()

     

    Wrap your app using ProviderScope

    To work with Flutter Riverpod, go ahead and install it.

    dependencies:
      riverpod: ^1.0.3

    Let's start with a new project. You can name it anything. In the main.dart file, replace the main() function using the code below

    import 'package:flutter/material.dart';
    import 'package:flutter_riverpod/flutter_riverpod.dart';
    void main() {
      runApp(ProviderScope(
        child: MyApp(),
      ));
    }

    See how we inject ProviderScope() inside the main() function and we put MyApp() as a child of it.

    Now look at MyApp() class. It doesn't change a lot. It looks like below

    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',
          theme: ThemeData(
    
            primarySwatch: Colors.blue,
          ),
          home:  MyHomePage(),
        );
      }
    }

     

    Create a provider using StateProvider

    Now we need to create a Provider, because we want to return a value in this counter app and make it reactive. So instead of using pure Provider we will StateProvider

    final counterStateProvider = StateProvider<int>((ref) {
      return 0;
    });

    So whatever StateProvider returns would be reactive. For now, It will return an integer value and it would be reactive. So counterStateProvider is our provider.

    Put the above code before MyApp().

    Extend ConsumerWidget for a class

    Now let's take a look at our MyHomePage class. 

    class MyHomePage extends ConsumerWidget {
      @override
      Widget build(BuildContext context, WidgetRef ref) {
        // 1. watch the counterStateProvider
        final counter = ref.watch(counterStateProvider);
        return Scaffold(
          body: Center(
            child:  Text(
                  'Value: $counter',
                  style: Theme.of(context).textTheme.headline4,
                )
          ),
        );
      }
    }

    This class extends ConsumerWidget. Because this class extends ConsumerWidget, we can access the value of StateProvider inside any widget of this class.

    So if a class extends ConsumerWidget, you would be able to access the StateProvider value inside this class. At the same time the value, we wanna listen for change we need to wrap that using ref.watch().

     

    Read and edit the value using ref.read()

    Ok now it's time to create a floating action button

    Put the code below body section of Scaffold

    floatingActionButton: FloatingActionButton(
            // access the provider via ref.read(), then increment its state.
            onPressed: () => ref.read(counterStateProvider.state).state++,
            child: Icon(Icons.add),
          )

    See inside the floating action button, we are using ref.read() to read the value and change it at the same time as we click the button.

    ref.watch() is used for watching or observing a value from a provider

    ref.read() also does the same thing, but it's used inside a callback function more.

    Courses


    Recommended posts


    Recent posts