Provider Pattern (26 July 2019)

Overview

Provider Pattern is another pattern design approach when building apps on flutter. We can say that this pattern is suitable for newbie in flutter because the concept is simpler than one of the famous pattern in flutter : BLoC (Business Logic Component) pattern. In BLoC, we use Stream, Sink, Rx when designing our layout and business logic. Because of this, many newbie flutter developer feel confused when applied this pattern into their project. Provider pattern works similarly like DataBinding in android. It is not as same as the android, but we can take the concept from DataBinding to make us easier to understand what is going on in this pattern.

Getting started

Please add this dependency in pubspec.yaml

flutter :
  provider : 3.0.0

This is the latest version when i write this README. Please check the newest version in this link : https://pub.dev/packages/provider

MainProvider

class MainProvider with ChangeNotifier

In DataBinding android, we extend the model class with 'BaseObservable' while in flutter we extend 'ChangeNotifier'. In this class, we define the changable propoerty in our layout as private, for example the text, background color, etc. Then, we set the getter and setter for each property. Notice that the setter getter format is pretty different from the setter getter in other programming language. This is because of we write a code in Dart language, which is the base language that used in this framework.

Getter

Color get lamp => _lamp;

Getter method in dart programming language is different from the other languages. In dart, we can use 'get' prefix to show that this is a getter method. We don't use bracket in the getter method.

Setter

void setLamp(Color lamp){
  this._lamp = lamp;
  notifyListeners();
}

Notice that in the setter method, we called a function named 'notifyListeners()'. Basically, this is the key of provider pattern. When this method is called, all the consumer widget will listen to the change and do rebuild itself. So, be carefull when using this method, it will refresh all the widget that listen to the provider.

Note : if you want to use provider without listen to any changes, you can use this line of code instead of Consumer() :

    YourProvider _provider = Provider.of<YourProvider>(context, listen:false);

ChangeNotifierProvider()

Place this widget in the root of your layout. It has 2 mandatory parameter :

1. builder : used to create the instance of your provider
2. child   : used to define widget inside ChangeNotifierProvider()

The function of this widget is to define the provider only once for your entire layout inside this widget. So, when you need to access the provider that already initiate in ChangeNotifierProvider(), you can use Consumer or Provider.of()

Consumer

This widget is used to access the existing provider. It will lift up to the parent that has ChangeNotifierProvider(). When it find this widget, it will take the instance of your provider and return it in the argument. It has 1 optional parameter :

1. builder : it has access to your provider and it needs a return;

Widget inside Consumer will be rebuild if notifyListener() is called.

Provider.of()

Provider.of() is the alternative way when you don't want to use Consumer. It has the same functionality as the Consumer(), but you can add an optional argument called listen. If you set it to 'false', then the widget won't be rebuild when notifyListener() is called.

Tips and Trick

Put Consumer as deep as possible

Please use Consumer() in the widget that need it. Because Consumer will listen to any changes and rebuild your widget when notifyListener() is called in our provider class.

Avoid calling notifyListener() inside Consumer()

Forever loop will occur when you call notifyListener() inside the Consumer() because when you called notifyListener(), it will update/rebuild the widget, and it will call the notifyListener() again.

Avoid creating your provider besides ChangeNotifierProvider()

1 page / layout of your apps may have more than 1 provider, but each provider should be initiate in the ChangeNotifierProvider() only to make sure that all your state and data that store in that provider won't loss.

Use Consumer(context, listen:false) if needed

Rebuild all the widget makes your apps heavy. If you don't need changes in that widget but still need it to access some data, please use Consumer(context, listen:false)

Related Link :

1. Official Docs of Provider : https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple