Flutter Provider Package- Part 1

This article links to a YouTube video tutorial,check it out over here.

‘Provider package is easy to understand and it doesn’t use much code.’ says Flutter’s official documentation.

Provider is a state management package written by Remi Rousselet in 2018 this package has been embraced by Google and the Flutter community in Google I/O 19 for its simplicity.

There are a lot of other ways to manage state in Flutter.But,If you are new to Flutter and probably confused , then this is the approach you should start with.

Apart from Provider we have

1. Stateless Widgets - Come out of the box with Flutter.
2. Bloc
3. Redux
4. InheritedWidgets and etc.

When I first looked at this,I instantly started Looking for other approach.It seems like a lot to digest at once.But, it becomes a lot easier when you just stop thinking about those heavy words.

Provider is like a way to use InheritedWidget that humans can understand apart from programmers. You remember InheritedWidget, right?Well,Provider is just a syntactic sugar to InheritedWidget approach.

So lets see, how it works.

dependencies:

provider: ^4.0.5+1

The above give line is top be added to your pubspec.yaml. This is gonna import dependency for Provider Package.

Also, 4.0.5+1 is the latest version right now have a look at latest version here.

Source code:

This is how your UI would look like for the above code.

Increment counter would increase value and decrement would decrease.

Now to understand how it works,lets first get to know a few terms:

1. Notifiers are something which handle notifying the Providers that something has changed. There are various different types of Notifiers:

e.g. ChangeNotifier, ValueNotifier and etc

Totally depends on your usage whichever you wanna use,here in our code we have a ChangeNotifier mixin in HomePageModel class, it basically helps us notify our listeners to listen to the change in state.

Checkout the notifyListeners() method in increment and decrement method in HomePageModel class.

class HomePageModel extends ChangeNotifier{
// rest of code
increment(){
notifyListeners();
   }
}

2. Providers

They handle putting an access point into your tree, exposing the objects you need to use.

In our app we have MyApp widget wrapped with ChangeNotifierProvider widget so basically any widget below MyApp widget(whole tree in out case) can access state of whatever type Provider(HomePageModel) is.

runApp(
  ChangeNotifierProvider(
    create: (context) => HomePageModel(),
    child: MyApp(),
    ),
);

Also if you have multiple providers you can use somethings called as MultiProvider, It is basically a list of all providers being used in that scope.

Other Providers include:

• StreamProvider
• FutureProvider
• ListenableProvider (the superclass of ChangeNotifierProvider)
• ValueListenableProvider (for listening to one value instead of a whole type)
• And etc

3) Provider.of

This thing obtains the nearest Provider<T> up its widget tree and returns its value.

And T can be anything a class/model whatever is calling the notifyListeners().

Also we have something called as Consumer.And it also work nicely with Providers. will cover it in another article.

Also checkout video tutorial here.