How to use Flutter Provider package

There are a couple of state management method in flutter such as Bloc and Provider. I’ll let you know how to use Provider packages in this blog post.

In order to use Provider packages, you need to install Provider packages.

1. Add provider packages on pubspec.yaml file.

   dependencies:
     provider: ^3.1.0

2. Type following command on your Terminal

   $ flutter pub get

3. Include the packages on your project.

   import 'package:provider/provider.dart';

Our project tree

• main.dart
• blocs
  • counter_bloc.dart
• pages
  • counter.dart
• widgets
  • decrement.dart
  • increment.dart

• main.dart

  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import 'blocs/counter_bloc.dart';
  import 'pages/counter.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MultiProvider( 
        providers: [
          ChangeNotifierProvider<CounterBloc>(
            builder: (context) => CounterBloc(),
          ),
        ],
        child: MaterialApp(
          home: CounterPage(),
        ),
      );
    }
  }

Using MultiProvider when there are many variables
If there is only one, we don’t need MultiProvider, just use ChangeNotifierProvider<CounterBloc>

• bloc/counter_bloc.dart

  import 'package:flutter/material.dart';
  
  class CounterBloc extends ChangeNotifier {
    int _counter = 0;
    int get counter => _counter;
  
    set counter(int val) {
      _counter = val;
      notifyListeners();
    }
  
    increment() {
      _counter++;
      notifyListeners();
    }
  
    decrement() {
      _counter--;
      notifyListeners();
    }
  }

Plase create provider class(CounterBloc) extend of ChangeNotifier.
we need four things, variable, setter and getter, and additionally functions
setter needs notifyListerners() and the other functions need notifyListeners() as well.
Just getter doesn’t need notifyListeners();

• pages/counter.dart

  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import '../blocs/counter_bloc.dart';
  import '../widgets/increment.dart';
  import '../widgets/decrement.dart';
  
  class CounterPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      final CounterBloc counterBloc = Provider.of<CounterBloc>(context);
  
      return Scaffold(
        body: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  counterBloc.counter.toString(),
                  style: TextStyle(fontSize: 62.0),
                ),
                IncrementButton(),
                DecrementButton(),
              ],
            ),
          ),
        ),
      );
    }
  }

Add final CounterBloc counterBloc = Provider.of<CounterBloc>(context); after build statement
We will use counter with Text widget, so counter should be the string. to make the int to string, we use .toString.

• widgets/increment.dart

  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  import '../blocs/counter_bloc.dart';
  
  class IncrementButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      final CounterBloc counterBloc = Provider.of<CounterBloc>(context);
      return FlatButton.icon(
        onPressed: () => counterBloc.increment(),
        icon: Icon(Icons.add),
        label: Text('Add'),
      );
    }
  }

Add final CounterBloc counterBloc = Provider.of<CounterBloc>(context); after build statement.
Once the button pressed, the provider function will work.

• widgets/decrement.dart

  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  import '../blocs/counter_bloc.dart';
  
  class DecrementButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      final CounterBloc counterBloc = Provider.of<CounterBloc>(context);
      return FlatButton.icon(
        onPressed: () => counterBloc.decrement(),
        icon: Icon(Icons.remove),
        label: Text('Remove'),
      );
    }
  }

Add final CounterBloc counterBloc = Provider.of<CounterBloc>(context); after build statement.
Once the button pressed, the provider function will work.