Flutter App State Management Using Provider

Jitendra Kumar

2 May 2023

Flutter app state management using provider is a way to perform the UI update without building all widgets of the page.

Flutter app state management using provider helps us to make the application faster.

The provider work as a wrapper. it makes it easier to use with less boilerplate code.

Because the provider is very easy to, that’s why it removes the use of the set state.

So The use of the provider widgets needs to subscribe.

Then provider makes it easier to listen to the changes in widgets through the model using notifier.

You may also check our flutter app development services

Provider components

There are three components related to this provider app state management.

1-> Change Notifier

A class that extends ChangeNotifier can call notifyListeners() any time data in that class has been updated and you want to let a listener know about that update.

Change notifier which listened to by the change notifier provider.

provider installation clicks here.

dependencies: 
   provider: ^5.0.0

1 2	dependencies: provider: ^5.0.0

We will use the counter update on button click using provider without using the set state function.

first, we will create the model of counter update class that will extend the change notifier.

class counterUpdateModel extends ChangeNotifier{
  var count = 0;
  
  void counterUpdate() {
    count += 1;
    notifyListeners();
  }
}

Here notify listeners will notify the consumer for update the widget.

class counterUpdateModel extends ChangeNotifier{

var count = 0;

void counterUpdate() {

count += 1;

notifyListeners();

}

Here notify listeners will notify the consumer for update the widget.

2-> ChangeNotifierProvider

The ChangeNotifierProvider<T extends ChangeNotifier> It listens to a ChangeNotifier extended by the model class.

This provides the help to exposes it to its children and descendants and rebuilds the view when change notify lister called.

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

void main() {

runApp(

ChangeNotifierProvider(

create: (context) => CounterUpdateModel(),

child: CounterUpdate(),

);

}

3-> Consumer

The consumer is the widget that we use to listen to the change notifier update.

So this provides the model instance for use and updates the model.

Below the full code of counter update example.

import 'dart:developer';

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

class CounterUpdate extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter update'),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Consumer<CounterUpdateModel>(
            builder: (context, counter, child) {
              return Container(
                height: 200,
                width: 200,
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.only(top: 25),
                      child: Text(counter.count.toString()),
                    ),
                    SizedBox(height: 16,),
                    GestureDetector(
                      onTap: () {
                        counter.counterUpdate();
                      },
                      child: Container(
                        height: 40,
                        width: 120,
                        child: Center(
                          child: Container(
                            height: 40,
                            color: Colors.black,
                            child: Center(
                              child: Text(
                                'Counter update', style: TextStyle(
                                color: Colors.white
                              ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class CounterUpdateModel extends ChangeNotifier {
  var count = 0;

  void counterUpdate() {
    count += 1;
    notifyListeners();
  }
}

import 'dart:developer';

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

class CounterUpdate extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Counter update'),

body: Container(

alignment: Alignment.center,

child: Consumer<CounterUpdateModel>(

builder: (context, counter, child) {

return Container(

height: 200,

width: 200,

child: Column(

children: [

Container(

padding: EdgeInsets.only(top: 25),

child: Text(counter.count.toString()),

SizedBox(height: 16,),

GestureDetector(

onTap: () {

counter.counterUpdate();

child: Container(

height: 40,

width: 120,

child: Center(

child: Container(

height: 40,

color: Colors.black,

child: Center(

child: Text(

'Counter update', style: TextStyle(

color: Colors.white

)

);

}

class CounterUpdateModel extends ChangeNotifier {

var count = 0;

void counterUpdate() {

count += 1;

notifyListeners();

}

And thanks for reading this blog, for detail info please click here

For more blog please click here.

So pls follow the above step and And if you have any issue or suggestion you can leave your message in the comment section I will try to solve this.