Flutter – State Management Provider

In this article, we are going to learn how state management is achieved in flutter using providers. But before that, we need to know what a state is. As we know that everything in flutter is a widget and there are mainly two kinds of widgets Stateless Widget and Stateful Widgets. Stateless widgets are those widgets whose state cannot be changed once created. It can be only when it is reinitialized. On the other hand, stateful widgets are dynamic in nature which means their state can change at any time throughout their lifecycle without reinitializing it.

What is a State?

State is the information that is read once the widget is built. It can be changed or modified throughout the lifecycle of the app. According to the official documentation of flutter, flutter is declarative in nature which means that the UI  in flutter is a function of the state. That means the UI of a flutter app is built based on the state of the widgets.

In the case of a stateful widget the setState() method is used to change the state and that forces the UI to rebuild. However, it is not an efficient method for state management and will learn state management using the provider package which is a better state management technique in the latter half of this article.

Now before using the provider package we need to understand the three basic concepts about it:

1. ChangeNotifier
2. ChangeNotifierProvider
3. Consumer

ChangeNotifier

It is a class that provides notifications for changes to its listeners. It is a simpler way to use for a small number of listeners. It uses notifyListeners() method to notify its listeners about changes in the model.

For example, Let us create a class CounterModel which will extend ChangeNotifier and it will have a function incrementCounter() which will increment the counter and notify its listeners about the changes using notifyListeners() and UI will get updated. 

Dart

import 'package:flutter/material.dart';

class CounterModel with ChangeNotifier {

  int _counter = 0;
  CounterModel(this._counter);

  getCounter() => _counter;
  setCounter() => _counter= counter;

    void incrementCounter() {
      _counter++;
      notifyListeners();
  }
}

ChangeNotifierProvider

In simple terms, ChangeNotifierProvider is just a widget that provides the instance of a ChangeNotifier. The code snippet below will give you a better idea of how it works.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChangeNotifierProvider<CounterModel>(
        builder: (_) => CounterModel(),
        child: CounterModelView(),
      ),
    );
  }
}

Consumer

It is a widget that contains a builder function and is used to build the UI based on changes in the model. The builder function will have three parameters context, counter, and child.  context is the same as every other build function of the widget. The counter is the CounterModel member that was observed for change. The third argument child is used for optimization.

Dart

return Consumer<CounterModel>(
  builder: (context, counterModel, child) {
    return Text("the value of counter is : ${counterModel.counter}");
  },
);