MultiProvider #Flutter Indonesia Eng Version
By: Muhamad Alamsyah
Tags: Flutter, Flutter Ui, Flutter Indonesia, Flutter App Development, Flutter Widget

Asslamu’alaikum Wr. Wb.

Hai flutter best friend come back to my post, firstly i say it so sorry because on these past week i didn’t update my post as you all know, because there is a pandemic plague problem and some real world activity.

I hope you are always healthy and remember to stay at home and don’t forget to wash your hands often, there is something a new on this post yeah i wrote a post with a english becasuse lots of friends recommend using English.

Well we are starting now …

On this post i will explain about multiprovider if you don’t know a provider you can check my old post on link below :

Okey what’s a MultiProvider on flutter ? MultiProvider in flutter is a collection of provider(StateManagement) which they have different functions to runs but it can be possible to run simultaneously on below this is a sample diagram use multiprovider

In abouve diagram there are a number of things to consider :

MultiProvider is a class where we list all the providers that we will or want to use Consumer is the recipient class or container that serves to notify that there is a change in the value of running the provider

Okey let’s go to wrote code 😃

Firstly we are create a new project with name multiprovider_sample (optional) Second when finish create a new project we will a create a new folder package with name bloc (optional), and we can a create 2 new files with name bloc_counting.dart and bloc_color.dart (optional)

3. Third create a new file in lib folder with a name home_page.dart like this :

4. Then you can edit the file page_home.dart like with the bellow codes like this

5. When we run then it looks less or more like this

6. Oke back to code, sample case when the number is even then the theme is blue, whereas when the number is odd the theme is green

7. Then you can edit the file bloc_counting.dart, make a new class when which extends class ChangeNotifier, the changenotifier have a function like to listen when there is a change in the value of a method you can try like this :

import 'package:flutter/foundation.dart';



class BlocCounting extends ChangeNotifier {

int number = 0;



void increment() {

number = number += 1;

notifyListeners();

}



void decrement() {

if (number != 0) {

number = number -= 1;

} else {

print("Not Count");

}

notifyListeners();

}

}

Note : There have a 2 method which method 1 is increment method i have a variable number which default number is 0 and then a create a increment method which number equals number + 1 and add notifyListeners(); on this method for change the value you can assume the notifyListeners(); same like setState in flutter

8. And then you can update the page_home.dart to implementation multiprovider bloc_counting.dart you can try like this

Note :

a. You can wrap the main widget or Scaffold widget with MultiProvider to register all bloc logic b. And you can wrap widget with Consumer to declare that the widget will change or that method change (running the change method), you can wrap widget on body because everyone in this body listens to all changes that occur from the bloc_counting logic c. We have 3 widget which will change and run change method (increment or decrement), one widget text which there receive accept change val number on bloc_counting.dart and two button to running the method

9. And we finished to implement bloc_counting next we implement bloc to change to color theme

10. We can edit the file bloc_color.dart like this

import 'dart:ui';

import 'package:flutter/foundation.dart';



class BlocColor extends ChangeNotifier{

Color themeColor = Color(0xFF34AEEB);

int _counting = 0;

String titleApp = "Zero Numbers";



// Getter

int get counting => _counting;



// Setter

set counting (int value){

_counting = value;

notifyListeners();

}





void changeColor(){

if(_counting == 0){

themeColor = Color(0xFF34AEEB);

titleApp = "Zero Numbers";

}else if(_counting % 2 == 0){

themeColor = Color(0xFF3deb34);

titleApp = "Even Numbers";

}else{

themeColor = Color(0xFF34AEEB);

titleApp = "Odd Numbers";

}

notifyListeners();

}

}

Note :

a. We have a new method there’s a Getter and Setter function the getter is send from value private to value global and function the setter is to set or change from value global to value private

12. And then you can implement the bloc_color in page_home like this :