Top five flutter state management in 2023 Part 2

Hello all, So in this article we are gonna discuss about the remaining state management package techniques if you haven’t read my first article go and read and have a enjoy.

We will gonna discuss about Provider,RiverPod and GetX state management libraries,So let’s begin it.

Provider:

The provider package is a popular choice for state management in Flutter. It's a simple and efficient way to manage state without a lot of boilerplate code. It uses the Provider and Consumer widgets to manage and listen to changes in the state.

• To use provider, you need to add it to your pubspec.yaml file:

dependencies:
  provider: ^5.0.3

Creating a Model/Provider: in the below example we have created a data model or a provider class that holds the state you want to manage and ChangeNotifier is the class which is provided by the provider example and which is used to update the state of the app using notifyListeners

import 'package:flutter/material.dart';

class CounterProvider with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notify listeners when the state changes.
  }
}

Then we have to wrap our class with ChangeNotifierProvider class.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterProvider = context.watch<CounterProvider>(); // Access the provider

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '${counterProvider.count}', // Display the state
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterProvider.increment(); // Modify the state
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

1. The Consumer widget is used to rebuild only the parts of the widget tree that depend on the state when the state changes, making it an efficient way to update the UI.

2. Provider also offers variations like ChangeNotifierProvider.value, ProxyProvider, and more, to cater to different use cases and needs. It's essential to read the documentation and explore the package for advanced features and customization options.

RiverPod:

Riverpod state management provider is the advanced version of Provider Which provides advanced and flexible way to manage and access the state of your application

Installation:

To use the Riverpod package in your Flutter project, add it to your pubspec.yaml file:

dependencies:
  riverpod: ^1.0.3

1. After adding the dependency, run flutter pub get to fetch and install the package.

Creating Providers:

Riverpod uses “providers” to manage state. There are different types of providers, including Provider, FutureProvider, StreamProvider, StateProvider, and more.

• Provider: It provides a value that doesn’t change over time.
• FutureProvider: It provides a value that is obtained asynchronously and might change once in its lifetime.
• StreamProvider: It provides a value that can change over time, like a stream of data.
• StateProvider: It provides a value that can be modified and listened to for changes.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider<int>((ref) => 0);

final futureProvider = FutureProvider<Map<String,dynamic>>((ref) => your network calls here);

final streamProvider = StreamProvider<Map<String,dynamic>>((ref) => your network calls here);

final changeNotifierProvider = ChangeNotifierProvider((ref) => );

class AuthNotifier extends ChangeNotifier{

int cocunter = 1;

int set cocunter(int value){
cocunter= cocunter + 1;
notifierListener();
}

}

In the above example we have defined all of the providers riverpod offers to us.

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

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final model = watch(changeNotifierProvider); // Access the provider

    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '${counter.state}', // Display the state
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          model.counter = moddel.counter + 1 // Modify the state
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

The ConsumerWidget or Consumer widget will automatically rebuild when the state changes, ensuring that your UI is updated accordingly.

Riverpod also offers features like Family, ScopedProvider, and advanced use cases like managing authentication state, global state, and more. It's important to read the documentation and explore the package to utilize its full potential based on your application's requirements.

Hope you have enjoyed while reading this article see you in another articles.