Using Provider - Flutter

There are many ways to manage the state in Flutter like:

Scoped Model
BLoc
Redux
MobX

Provider is a solid state management easy to use, it is mostly syntax sugar for InheritedWidget.

Sometimes you want to have a variable living across all the application life cycle hook, if you move from one screen to another one having a way you can access those variables that you need be used during that lifetime, or maybe you want to update a variable state from other widgets different from where the action was triggered, that's something which in medium and big apps are needed, the ability to reload some widgets and not the the whole widget tree, so to that we are going to be using Provider as the state management.

let's create a new dart project with flutter create, give it the name as you want

let's create the next folder structure:

/lib/screens -> I've created 3 screens in here counter.dart, counter2.dart and reset_value.dart
/lib/blocs -> I've create 2 blocs in here counter_bloc.dart and form_bloc.dart

The first thing we need to do is to add the dependency in the pubspec.yaml file
let's go to https://pub.dev and let's find the provider package, by this time it returned me this version provider 4.0.4, let's paste under the dependencies field in the pubspec.yaml file


main.dart

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'package:state_management_provider/blocs/conunter_bloc.dart';

import 'blocs/form_bloc.dart';

import 'screens/counter.dart';

import 'screens/counter2.dart';

import 'screens/reset_value.dart';

void main() => runApp(

    MultiProvider(

     providers: [

       ChangeNotifierProvider<CounterBloc>.value(

         value: CounterBloc(),

       ),

       ChangeNotifierProvider<FormBloc>.value(

         value: FormBloc(),

       ),

      

     ],

     child: MyApp(),

   ),

  );

here I show you how we can added the multiprovider, and that's something we can need doing a project having several Business logic instead of just one, the second one is not doing anything at the moment, but for the purpose of the example I've just added to show you how to do it

let's keep on

class MyApp extends StatelessWidget {

 // This widget is the root of your application.

 @override

 Widget build(BuildContext context) {

  

   return MaterialApp(

     title: 'Flutter Demo',

     theme: ThemeData(

    

       primarySwatch: Colors.blue,

     ),

     home: MyHomePage(),

   );

 }

}

class MyHomePage extends StatefulWidget {

 @override

 _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

 @override

 Widget build(BuildContext context) {

    final CounterBloc counterbloc = Provider.of<CounterBloc>(context,listen:false);

   return Scaffold(

     appBar: AppBar(

     

       title: Text("title"),

     ),

     body: Center(

     

       child: Column(

       

         mainAxisAlignment: MainAxisAlignment.center,

         children: <Widget>[

           CounterPage(),

           CounterPage2(),

           RaisedButton(

             child:Text("PUSH TO THE ANOTHER PAGE"),

             onPressed: (){

               Navigator.push(context, new MaterialPageRoute(

            

                 builder: (context)=>ResetValue())

              

               );

             },

           ),

         ],

       ),

     ),

     floatingActionButton: FloatingActionButton(

       onPressed: (){

         counterbloc.increment();

       },

       tooltip: 'Increment',

       child: Icon(Icons.add),

     ), // This trailing comma makes auto-formatting nicer for build methods.

   );

 }

}

as you could see I have added final CounterBloc counterbloc = Provider.of<CounterBloc>(context,listen:false); and this is done to be able to avoid rendering the whole Widget tree, in order just to update something I would to do something like

Consumer<Counter>(

builder: (context,counter,child)=>Text(

"data "+counter.counter.toString()

),

)

 with a consumer.

now If I click on floatingActionButton it will call the increment button which is in the CounterBloc class, now if go to the class CounterPage in the file counter.dart

import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:state_management_provider/blocs/conunter_bloc.dart'; import 'package:state_management_provider/blocs/form_bloc.dart'; import '../blocs/conunter_bloc.dart'; class CounterPage extends StatelessWidget{ @override Widget build(BuildContext context) {       //FormBloc fomrbloc = Provider.of<FormBloc>(context);     return Column(     children: <Widget>[         One(context),         Two(context)     ],   ); } Widget One(BuildContext context){   print("from W1");   return Text("W1"); } Widget Two(BuildContext context){   print("from W2");   return Consumer<CounterBloc>(     builder: (context,counter,child)=>Text("Data "+counter.counter.toString()),   ); } }

we can see here this a Widget called Two, that widget is using a Consumer and it means it just gets rendered when the notifyListener method is triggered in this case it is being triggered in the main class when I call counterbloc.increment();

in this way we can see how we can shared data accros the application using Provider

get the whole project from git hub test it and run it

https://github.com/juandavidmarin368/Fullter-Provider.git