Advanced Provider in Flutter
Introduction :
In this blog, you will be going to understand the approach of state management using ‘Providers’.
In this blog, we will learn how to manage app state in a very efficient and easy way without building the whole UI again. We use providers for an easy approach to using state management. The advantage of providers over thesetstate method is that it builds the whole UI again…
Before starting our blog, let us know what topic will be going to cover-up
Table of contents:
Setup:
Before starting first install a provider package in pubsec.yaml file:
FutureProvider:
FutureProvider is just the same as FutureBuilder. FutureProvider listens to the future and then exposes its result to its child and its descendants. You can change your initial data to new data that will be reflected in your UI in the future what data you provide with. The future provider will listen to all your changes and then notifies to Consumer that will be going to build in the future.
Let’s understand the FutureProvider with a simple example :
As you can see in the above code the provider is used which is used to tell the UI to change the state of the code. The FutureProvider is used to tell the code that you have to bring changes in UI in the future. As soon as the greeting button is pressed the state is changed after 4 seconds.
The FutureProvider as soon as the Greeting button is pressed tells the Consumer to change the UI in Future.
ProxyProvider :
ProxyProvider is a provider that combines multiple values from other providers into a new object and then sends the result to the provider. It basically injects the one changed value into another provider. Whenever there is more than one provider used and the value of one provider depends on another provider at that time we use ProxyProvider. The other provider updates its value whenever one of the providers it depends on also updates.
The ProxyProvider comes under multiple variants such as ProxyProvider vs ProxyProvider2 vs ProxyProvider3, …, The digit after the class name signifies the number of other providers it depends on.
Let us understand ProxyProvider with an example:
As you can see from the above code we have used MultiProvider and inside it, we have created two simple providers. The value of one provider depends on another provider so we have used ProxyProvider in it. If you do not know about MultiProvider then no need to worry it is just the same as using Row or Column, where you can create multiple different providers.
For more info visit down the link:
FutureProvider class
API docs for the FutureProvider class from the provider library, for the Dart programming language.pub.dev
Thanks for reading this article ❤
Clap 👏 If this article helps you.
Feel free to post any queries or corrections you think are required…✔
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
