Flutter Provider - State Management using PROVIDER ( A BLoC Alternative)
Вставка
- Опубліковано 8 лют 2025
- #flutter #provider #googleio
Hey! In this tutorial i will be teaching you the very basics of implementing "Provider" for State management in your Flutter Applications. It is far less complex than the conventional BLoC Pattern and is much more efficient!
Flutter Getting Started | Flutter Provider Package | Flutter Firebase State Management | Flutter Provider Modal | Flutter State Management | Flutter Advanced State Management | Flutter Data Management | Flutter Interact
If you like this tutorial please hit LIKE and SUBSCRIBE to my channel for more upcoming tutorials!
Instagram:
/ retroportalstudio
ChangeNotifierProvider(
builder:DownloadFile(),
child: instaInterface(),
),
I've been meaning to put a comment myself! Thanks man! I'm gonna pin this one!
Thanks man appreciated 💚
I spent an hour figuring out why this is not working. hahaha
I am a complete newbie with Flutter, been reading about state management and for the life of me I could not get it...until I saw your video...thank you very very much for this...
Glad i was of help ✌😁 Although there have been many breaking changes in implementation modal but the usecase and idea remains same
Finally, there is a state management pattern that someone can concentrate on and this officially supported by Flutter team, can you concentrate on Flutter's file architecture, and have a video for getting data from the RESTful API services. A complete example from Login screens to multiple pages for routing and preserving state in different screens.
Hey did you find any other useful resources. Please share if so.
But the Flutter team also support BLoC, in the announcement of Provider they said that is one alternative to BLoC. Provider is cool to small-medium projects and it’s easier than BLoC to beginners, but when app is getting complex you’ll need to use something more robust like BLoC, Redux or MobX. And again there’s no default way to state management for Flutter yet.
@ Why or how is Provider not "robust" enough?
@@tellecloudcompany8689 Provider itself isn't a state management approach, so for you implement as state management you will need a Notifier, ChangeNotifier is cool but it has a complexity of O(n²), so if your project is getting bigger and you didnt use SOLID you gonna lose performance.
But if you use ValueNotifier which is O(n) is okay, but you'll need knowledge about how to represent your unique value as a "state".
Personally, I use MobX for medium/big projects and ChangeNotifier/ValueNotifier for small projects.
BIG THANKS @RetroPortalStudio
Before watching this video I was kind of tensed and irritated with this utter confusing state management stuff.
It literally had wasted my 2 days.
I have become your fan. Hope you have more on flutter. I'd explore your channel regularly now on.
Glad i Could help you out ! Thank you for your support! Will keep it upto the mark! ✌😁
Awesome tutorial about Providers! Quite nice to manage states! Thank you so much! Keep it up!
Thank you!, this is really helpful! This world needs more people like you man!
Awesome video !! We need more videos on PROVIDER! Like the architecture and other useful functions!
A great video explaining the very basics of the Provider Pattern. I was confused which to choose from Bloc and Provider, now I have my answer. Superb
Nicely explained the concept man much appreciated!
Perfect example and a good explanation, keep rocking!
So to wrap it up. The provider will contain data. If there's a change of data, you may want to notify other widgets through notifyListener. This widgets that are listening to changes are called Consumers. This is the way I understood the video. I hope I'm correct. If yes, then it is probably the best video about provider state management in youtube.
Great introduction to Provider. Read a lotabout it but this is concise and clear. One thing, I had to replace "builder" with "create" in:
...... return ChangeNotifierProvider(
create: (context) => WeatherInfo(),
child: Scaffold( ...
Nice Teaching. Thanks for sharing
Thanks dude!! I 've finally understood provider, cheers
Very well done
that photoshop way of describing is very nice idea, thank you!
Thank you for this great video ..
Reactive programming tutorials are what we need
You explained this so nicely, thanks dude, appreciate it.
Thanks for this Video. I have a specific use case. For instance, we have many widgets ( text and textfield) in the screen and all quantities are textfield widgets.Reaming are text. I can say the headings are id, description, quantity, price. All data's are getting from REST API.
let us say we have 5 rows. These are from API
id,description,Quantity,Price
----------------------------------------------------------------------
(1,testingFirst,0,2.32)
(2,test,0,10.3)
(3,PC,0,12.000)
------------------------ (second section)***********
(50,cups,0,12.3)
(60,testingLast,0,12.3)
********** Total: sum of all price**********
when I change quantity, I need to update corresponding rows price and also last row. Which means if I enter 25 in first rows quantity, the last rows quantity also will be 25 and at the same time the price will be changed based on quantity. Why I need to update last row, since first and last row is related and others are not related. If no relation, no need to update .
When I enter a quantity , I need to check is there any rows in second section related with first row. If related update those rows.
Thank you for explaining this clearly! Hope to see more tutorials like this! All the best for your channel!
BTW, I don't know how to spell fahreniet either :)
Than you very much! Even I'm Brazilian guy, this video could help me a lot! I hope you can explain much more of flutter's pattern in the next videos.
Thank you for a really solid video!
Great video! Congratz! Now could you do a video using the Provider state management pattern in a real-world application? Like an app with login, user management, user profile inside the app, data being loaded from a REST API and showed in a list. How the pattern works with data that we get online and how to persist the data locally for next uses of the app, keeping the provider pattern? Thank you.
i would like to see some of his videos on this kind of real word apps
Coming up with more detailed tutorials on such topics! And a good course soon :)
Thanx for the effort. This provider is MUCH easier than bloc.
Yes but for big apps it isn’t viable, unfortunately, but it’s a great alternative for beginners or small apps :D
i learned provider from google flutter videos. this is very helpful to understand. thank you. Also, you forget the ; at the end of the second notifyListeners.
this looks better than bloc.
I noticed 😁 Keen Observation! Thank you ! Do suggest your choices for future videos!
@@RetroPortalStudio i am looking for login tutorial with provider :)
@@albaeeee +1
Again nice video od my type and need this a lot
Your teaching method is amazing, please make provider+ firestore tutorial video.
At last a fantastic explanation on actual use of state management rather than showing pics of streams and rivers moving boats. Question - i am starting app thats “simple” but foresee could get more “complicated” features, can provider handle it or start now with bloc. Dont want to rewrite the codes later. Which state management is recommended by google?
This is great and pretty easy to comprehend. One thing i'm not sure though, how would you access a provider from inside another provider? Example, how would you call another provider from the inside of WeatherInfo class where you don't have access to the context?
As per my experience with providers, you should never consider direct dependencies in providers. This can lead to undetected problems
which one of these 2 approaches (property based vs consumer based) has better performance? Will property based approach leads to whole stateless widget be re-constructed when notification arrives?
Well in cases when you do not need to rebuild a complete widget you pass it as a child to Consumer and the tree that should rebuild is returned by the builder function. The child you passed to consumer is also available to builder in arguments ✌😁
Best man
Well explained. Thanks a lot
Thanks. Great clear tutorial.
this video is gold, thanks
Thanks, nice tutorial
EXCELLENT Tutorial !!!
So, the Provider its like a Singleton ? We have this instance that we will manipulate in diferents widgets of the application, and as we manipulate this instance it will reflects in all other parts of the app(that use this object), because its the same instance, i get it right?
Can you please make a video on the project structure for real world apps using provider approach. Or a tutorial where you build a complete real world app so we can learn how to use this approach efficiently as there are many videos of BLOC but not providers.
PS: This is the most requested video as I can see in the comments.
Will soon be available 😊
what will hapen if there is another class called Stockinfo along with weather info? how to use builder in this case?
do i have to use bloc if i use provider? (newbie question)
Could you make a MultiProvider example?
Please make video on multi provider
Here's an article which covers it: ayusch.com/flutter-provider-pattern-explained/
Hope this helps you :)
@@ayuschjain Thanks a lot man! . It helped me to understand the Multiprovider concept. Keep rocking
@@althafaralijaffarali1803 Glad it helped:) I also have a YT Channel @DesiCoder. Do check it out :)
what if i have multiple weatherinfo objects, how do you differentiate inside of the consuming widget? how do you declare multiple notifier objects?
I think what you are looking for , is MultiProvider ✌😁
This might be a silly question or I might have an old fashioned mindset, but lets suppose we have a list of items. we want to listen to the state of that list. So when the user adds a new item, we`ll be notified. But here comes my problem in understanding: i want to handle the state of each new, per user generated, item (which is just a new instance of a class). Do I need to have a new (kind of dynamic) provider for each of the items? How can I accomplish that, or is that approach not even necessary? Thanks in advance. Chris
What vscode extension used to display the lines for the indentation guide?
I'm using Android Studio! ✌😁
Than you for your tutorial. But I'm curious about sustainability of this provider plugin? Is this possible implemented on big application? Do you mind to upload your code to github to be more clear with an example?
The thing i cannot understand, all widget tree is rebuilding (including the Scaffold?) or it rebuilds only our texts and FAB? Does it matter where to put ChangeNotifierProvider or the main task is to be UP of the tree to have opportunity get our widget. And, the last question is, so now basically all widgets in app are Stateless? I'd see how it works with more difficult screens (with animation for example). Thank you for video!
Thank you for your support! :) All the widgets which might need to access the state must be direct or indirect children of ChangeNotifierProvider. The reason to put it here as a parent of scaffold is so that the FAB could also have access to state... if i was to put CNP on Column or Center, only the text would have been able to access the state. For your Question regarding stateless.. it doesn't matter if it is stateless or stateful. If you have some special widget that needs to have its own state too.. then a stateful widget might also be useful. Hope this clears your doubt :)
Thanks
Awesome 👍
Hi. nice video!
btw, What plugins/extensions are you using for showing the lines of indentation in vs code? Thanks!
Hey! This is android studio 😁 I'll look for it if there is any extention for vs code also
@@RetroPortalStudio oh i thought that was vs code. Lol. Okay, thanks for the answer man. Keep up the good job 👍
Yeah ! this lecture is understandable. But sir can Tell which state Management mostly used in flutter?
My provider is working fine on debug mode. But when I released the app to stores, the changes are not working. Do you know something? I will use bloc
Please check the provider version. there have been a lot of updations since it first released!
Mine didn’t work until I used the setState method to change the TemperatureType unlike you did in yours, is there a reason for that?
Will you be able to post the code to github?
Thank you for sharing your knowledge, to represent block diagrams you can use draw.io
Thank you :) Will check that out!
What is ChangeNotifier
Form docs
A class that can be extended or mixed in that provides a change notification API using [VoidCallback] for notifications.
[ChangeNotifier] is optimized for small numbers (one or two) of listeners. It is O(N) for adding and removing listeners and O(N²) for dispatching notifications (where N is the number of listeners)
Thank you for this video. Well explained. I didn’t have to watch the video 2-3 times to understand the concepts.
Could the “decideColor” func be moved to the Provider class?
Not a good approach to move it to Provider class! But it can be a static method of some utility class!
Anyways thanks for the support 😁😁✌ Do suggest more content that you would like to see here on my channel!
@@RetroPortalStudio Why is it not a good approach to move it to the Provider class?
@@themindstorm9947 The state class should only contain state information and not be bound to UI concepts.
when navigate to new screen (navigator.push) , can i use 'provider.of' to access state from previous screen? or i must pass state through constructor?
As per my experimentation, Provider persists data for whole application cycle. No need to transfer data through navigator :)
@@RetroPortalStudio alright thanks
make some tutorial about Overlay please
Hi and thank you,
but please how to make this better,
because here as you done, if myspecialheaders gets update, then the myspecialcontents gets update too, which I dont want, now to prevent to have a good performance and avoid unnecessary rendering, like in react-native we have shouldComponentUpdate which if dont need to update we prevent the rendering.
What's the difference between provider 3.0.0 and bloc? pros and cons when using each?
it was very useful thanks man :) i was confused with the provider it really helps to understand better. Do you have the same kind of video for bloc and redux and what is the pros and cons then it will blast.
I dont have any video on BLoC right now but as per your suggestion i'll try to make one ✌😁 Thanks for your support mate!
For drawing diagrams and such you can use draw.io if you aren’t already by now.
Bro the tutorial was great. But can I get the code on github so that I refer it whenever needed?
What if we want to instantiate multiple models like WeatherInfo in MyHomePage ?
You Can use MultiProvider widget !
Hi what is your ugin called to get the tree view(the lines in your code). Thanks
hello, please what extension shows the widget structure?
good work thx :-)
nice tut
Basic Question... Is good aproach, put the same name to getter and setter?
Example in this video in 16:52 : get temperatureType - set temperatureType(String newType)
What about Provider relative to InheritedModel/InheritedWidget? With respect state and passing data to deeply nested widgets.
Thank you for your support! If i understood your question right....The main advantage of provider is that you dont need to pass data in the conventional Inherited Widget way. Make the children that require access to state, direct or indirect child of ChangeNotifierProvider and they can access the state using Provider then. :)
what's the difference between with keyword and extend keyword ?
Can't explain in detail here! Found a article for ya! here it is! medium.com/flutter-community/dart-what-are-mixins-3a72344011f3 :) Hope it helps! :)
It's better if we make public variable for this dynamic variable inplace of this big complycated circle
how to avoid unnecessary rebuilds? example:
Widget A.
Widget B.
Widget C.
Here when I update a state in Widget A with provider, the Widgets B and C rebuilds too.
So how to avoid unnecessary rebuilds in B and C ?
thank you for the tutorial, I am building an app where users choose a task provider and chat with him, how can I implement that with the provider? Thank you again and May ALLAH bless you & reward for your efforts
good video, mate, thanks for sharing. can you leave the src code github address for your two different version of provider codes. tks
Sorry for videos uptill now! Future videos will have the code uploaded :D :D
Provider is not a state management solution as said by Remi in his video
It only seeks to provide values deep inside the widget tree
Is knife a weapon or a tool? Even if the maker defines it as something, it depends on the way we use it. For complex UIs it can be used to manage the State of UI to provide a much smooth experience with easy to manage and concise code. That that essentially contains the definition you wrote. ✌😁
is this code available on github?
please sir, share source coode link if possible.
For the upcoming videos, i surely will upload the code alongside :)
In a job interview ... (Almost nailed it but then)
Recruiter: So, we use BLOC for all of our projects. You are familiar with it, right?
Me: GG. Um out.
(Just for fun no offense btw)
Oh My! That's awful...... bdw never used bloc for a project myself. 😅
@@RetroPortalStudio I tried to learn it. It gave me a hard time.
I love u :D
Very similar to scoped model.
scoped model so many complex, this i think.
great video！！！！ Activate Windows。。。。。。。hahha！
Please explain in a way every one could get it the way you have explained only some extra smart students had got your point I couldn't get anything
Activate The Windows
Just trolling
Real madlad
@override
Widget build(BuildContext context) {
final UserBloc userBloc = Provider.of(context);
userBloc.getUser();
}
this send continuous request to server.. how can i get initial data from server as soon as screen load ???
i think you should create another function on UserBloc that flags something like this:
if(!initialized) {
getUser()
initialized = true
}
This vblog is really awesome and you have done a great job to put everything down in a simple way as much as you can. It is really helpful to understand state management using the provider. I am very new to flutter so curious to know how it would be different in case of the bloc. Could you please do a video when you get time with bloc for the same screen to understand the differences between these state management patterns. Again, thank you. Looking forward to watch more videos from your channel.
Edit: I just found what I was looking for i.e bloc vs provider implementation diff. If someone is interested can find here: ua-cam.com/video/HrBiNHEqSYU/v-deo.html
I am glad to hear that i could help 😁Thank you very much for your support! and yes, as you suggested, the booring show is really great if you wish to learn basics of bloc. in their first few episodes.
Can you PLEASE EXPLAIN FIRST THEN RUN.
The Basics:
1) DO NOT BOTHER to RUN EXAMPLE half way of explaining the code unless you already explain everything you have written.
2) Unless you STARTS WITH EXAMPLE and THEN explain the CODE.
Do not do your work as teacher half way, explain code (half-way), run example, then continue explain code (where you left), it is annoying, seriously.
Great tutorial! Also, try this tool, it may help improve your diagrams: www.draw.io/