Easiest way to understand Providers in Flutter

Providers are part of state management in flutter. It is an easy and effective way to manage state.

For small apps it is okay to use setState() for updating data in UI. But for large scale app it becomes horrific and we can’t scale up the app.

Let me clarify necessity of state management in brief. Suppose if you are building an app in which model class is used more than one screen , you can update data on one screen and then pass the updated data through constructor through many classes . It does not look professional.

Along with that if you have two widgets on same screen and only one of widget needs to change data according to model , and you are using setState() all the widgets will be rebuild even if they don’t need to be . It create some problem during large scale app development .

So in order to avoid using setState() we use ‘provider’ which provide excellent way to update data throughout the widget tree. let’s start …………….

For using Providers we need to add provider dependency in pubspec.yaml . Next thing we need to extend the model class (which provide data) with changeNotifier and call notifyListener() to update the data in all widget which have its reference .

Let’s see code how to implement it :-

1. Make a model class which stores data

class Model{
  String jobTitle,jobName;

  Model(this.jobTitle, this.jobName);

  String get title{
    return this.jobTitle;
  }

  String get name{
    return this.jobName;
  }
}

2. Now access the list of this model class through another class which

extends ChangeNotifier

class modelProvider extends ChangeNotifier{
  List<Model>modelList=new List ();

  addModel(){
    modelList.add(new Model('Android', 'jobName'));

    notifyListeners();
  }
}

3.Finally in main.dart file you need to access this changeNotifier

void main() => runApp(MaterialApp(
title: 'Material App',
home:ChangeNotifierProvider<modelProvider>(create: (context)=> modelProvider(),
child: MyApp())));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          leading: IconButton(icon: Icon(Icons.list), onPressed: () {  },),
          elevation: 0.0,
          title: Text('TODO'),
        ),
        body: Column(
          children: [
            Container(height: 100,width: MediaQuery.of(context).size.width,
            child: Column(children: [
              Text( DateFormat('yyyy-MM-dd - kk-mm').format(DateTime.now()),style: TextStyle(fontSize: 30),),
              Text('Current Time')
            ],),
            ),
            Expanded(child: Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.only(topRight: Radius.circular(50.0),
                topLeft: Radius.circular(50.0)),color: Colors.white),
                  // ignore: missing_required_param
                  child: Consumer<modelProvider>(
                    builder: (context,provider,child){
                      return
                        ListView.builder(
                            itemCount: provider.modelList.length,
                            itemBuilder: (context,index){
                              return ListTile(title: Text(provider.modelList.elementAt(index).jobTitle)
                                ,subtitle: Text(provider.modelList.elementAt(index).jobName),);
                            });
                    },
                  ),
            ))
          ],
        ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        Provider.of<modelProvider>(context,listen: false).addModel();
      },
      mini: true,
        child: Icon(Icons.add),
      ),
      );
  }
}

…Thanks………………..