Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Online Learning Course App (Riverpod) Online Learning Course App (Getx) Discount !! Shopping App (Provider) Cool Flutter Game Nodejs Flutter Complete App

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

    Recent posts