DEV Community: Eman Hamad

Provider State Management in Flutter - Part 2

Eman Hamad — Tue, 02 Aug 2022 13:42:00 +0000

First of all :

i recommend you to read part 1:
https://dev.to/eman55555/provider-state-management-in-flutter-part-1-e4k

In Part 1 we have seen only single provider implementation.What about having multiple providers declared in your flutter app ?

using provider you can expose the data and can observe it with the help of consumerthrough out your app.This will make a easy to access user friendly data usage. Flutter Multiprovideris required to handle some situations where we require different data objects or depending upon the modules so in this article we will be dealing with a example on them. Using the provider you can avoid all the unnecessary data hierarchies and can just make use of the data where ever required and also can properly dispose them after use.

Ok let's make an app have 2 screens .each of them uses different Provider like this :

add the dependency for the provider pattern in the pubspec.yaml file.
flutter pub add provider

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  provider: ^6.0.3

create your first model and add methods to increment / decrement / reset the counter, extend ChangeNotifier from the material.dart package. This provides us with the notifyListeners() method, and will notify all the listeners whenever we change a value.

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int count = 0;
 //int get myCounter() => count;

  void incrementCounter() {
    count++;
    notifyListeners();
  }

   void decrementCounter() {
    if (count > 0) {
      count--;
    }
    notifyListeners();
  }

   void resetCounter() {
    count=0;
    notifyListeners();
  }
}

create your second model and add a method to add item to List<String> _cart = ["Red", "Green", "Blue"] , extend ChangeNotifier from the material.dart package. This provides us with the notifyListeners() method, and will notify all the listeners whenever we change a value.

import 'package:flutter/material.dart';

class Cart with ChangeNotifier {
  final List<String> _cart = ["Red", "Green", "Blue"];
  int get count => _cart.length;
  List<String> get cart => _cart;



  void addItem(String item) {
    _cart.add(item);
    notifyListeners();
  }
}

wrap your home widget with MultiProvider and inside it call ChangeNotifierProvider<YOUR_MODEL_NAME> widget to every model

void main() {

  runApp(

    MultiProvider(

      providers:[
          ChangeNotifierProvider<Counter>(create: (_)=>Counter(),),
          ChangeNotifierProvider<Cart> (create: (_)=>Cart(),),

    ],
    child: MyApp(),
    ),

  );
}

add routes in your MaterialApp widget

@override
  Widget build(BuildContext context) {
    return 
       MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),

        initialRoute: '/',
        routes: {
        '/' : (context) => HomePage(),
        '/second' :(context) => Second()


      },
      );
  }
}

To update the text, call your variables and function from Your model to use them
wrap your text widget with Consumer<YOUR_MODEL_NAME> widget

@override
  Widget build(BuildContext context) {
    return Consumer<Counter>(
      builder: (context, counter, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Home'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Text('${cart.cart}'),
                // Text('${context.watch<Cart>().cart}'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('The Number : '),
                    // Text('${context.watch<Counter>().count}'),
                    Text('${counter.count}',
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 20)),
                  ],
                ),

Source Code: branch " multiProvider "

eman55555 / provider_state_management

read this article for more details :

Dev : https://dev.to/eman55555/provider-state-management-in-flutter-part-1-e4k

Medium : https://medium.com/@emanhamad55555/provider-state-management-in-flutter-part-1-b3fcb9fd2226

provider_state_management

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Congratulations 🥳🤩
you implemented multiProvider in Flutter Counter App !

Provider State Management in Flutter - Part 1

Eman Hamad — Sun, 24 Jul 2022 16:41:00 +0000

Why state management is important ?

Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction or a session to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session .So, without some form of state management. the performance of the application will reduce.

Benefits of State-Management:
1- The State of the Whole Application is present at a single place, so we do not need to access the single state or data from different places.
2-It reduces the HTTP requests sent to the back-end for fetching and retrieval of the data.
3- helps to centralize and made the maintenance of code very easy, also it improves the quality of code, by reducing the code size and making it more readable .

Then ,I should use state management in every app ,That's right ?
we can't say that.
if : the data of app is little and the app is small => you shouldn't use state management .

what is provider ?
The provider package is easy to use which is basically a wrapper around the Inherited Widgets that makes it easier to use and manage. It provides a state management technique that is used for managing a piece of data around the app.

Let's create app and Learn How to implement Provider on default counter app ?

flutter create provider_state_management

add the dependency for the provider pattern in the pubspec.yaml file.
flutter pub add provider

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  provider: ^6.0.3

create your model and add a method to increment the counter, extend ChangeNotifier from the material.dart package. This provides us with the notifyListeners() method, and will notify all the listeners whenever we change a value.

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int counter = 0;
  // int get_Counter() => counter;

  void incrementCounter() {
    counter++;
    notifyListeners();
  }
}

wrap your home / materialApp widget with ChangeNotifierProvider<YOUR_MODEL_NAME> widget

@override
  Widget build(BuildContext context) {
    return  ChangeNotifierProvider<Counter>(
       create: (context) => Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home:MyHomePage(),
    ),
    );
  }

To update the text, call your variables and function from Your model to use them
wrap your text widget with Consumer<YOUR_MODEL_NAME> widget

  Consumer<Counter>(
              builder:(context, count, child) => Text(
                '${count.counter}',
                style: Theme.of(context).textTheme.headline4,
              )
            ),

Source Code: branch " master "

eman-hamad / provider_state_management

read this article for more details :

Part 1

Dev : https://lnkd.in/dHZJs5sC

Medium : https://lnkd.in/dgeqiM86

Part 2

Dev : https://lnkd.in/eVZx82Av

Medium : https://lnkd.in/evtQVtws

provider_state_management

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Congratulations 🥳🤩
you implemented Provider in Default Flutter Counter App !
run:

google.com

Ok , what is difference between ValueNotifier , ChangeNotifier and StateNotifier ?
ValueNotifieris a special type of class that extends Changenotifier, which can hold a single value and notifies the widgets which are listening to it whenever its holding value gets change.
ChangeNotifieris a class that provides change notification to its listeners. That means you can subscribe to a class that is extended or mixed in with ChangeNotifierand call its notifyListeners() method when there’s a change in that class. This call will notify the widgets that are subscribed to this class to rebuild.
On the other hand, StateNotifier is an immutable state management solution where the state can be directly changed within the notifier only.

So, We can implement ValueNotifieron the same counter app

Source Code: branch " Value_Notifier "

eman-hamad / provider_state_management

read this article for more details :

Part 1

Dev : https://lnkd.in/dHZJs5sC

Medium : https://lnkd.in/dgeqiM86

Part 2

Dev : https://lnkd.in/eVZx82Av

Medium : https://lnkd.in/evtQVtws

provider_state_management

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub