Flutter Provider - State Management using PROVIDER ( A BLoC Alternative)

#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

[@hammadulaziz1064]

ChangeNotifierProvider( builder:DownloadFile(), child: instaInterface(), ),

[@RetroPortalStudio]

I've been meaning to put a comment myself! Thanks man! I'm gonna pin this one!

[@hammadulaziz1064]

Thanks man appreciated 💚

[@FaizanAhmad-bh5om]

I spent an hour figuring out why this is not working. hahaha

[@webghost2009]

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.

[@iamyogik]

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.

[@tellecloudcompany8689]

@ 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.

[@jliendostuardo]

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...

[@RetroPortalStudio]

Glad i was of help ✌😁 Although there have been many breaking changes in implementation modal but the usecase and idea remains same

[@ruchirrai]

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.

[@RetroPortalStudio]

Glad i Could help you out ! Thank you for your support! Will keep it upto the mark! ✌😁

[@fernando_her85]

Thank you!, this is really helpful! This world needs more people like you man!

[@dgrippo]

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( ...

[@milodude023]

Awesome tutorial about Providers! Quite nice to manage states! Thank you so much! Keep it up!

[@AbdulRahmanShamair]

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

[@jerome_ee6522]

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.

[@garrrrrrrry6596]

Awesome video !! We need more videos on PROVIDER! Like the architecture and other useful functions!

[@198boblob]

Very well done

[@carloseugeniotorres]

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.

[@wassimkaouia3965]

i would like to see some of his videos on this kind of real word apps

[@RetroPortalStudio]

Coming up with more detailed tutorials on such topics! And a good course soon :)

[@themindstorm9947]

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 :)

[@j.almadhaji]

Thank you for this great video .. Reactive programming tutorials are what we need

[@aniltc]

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.

[@wesleybarnes5376]

You explained this so nicely, thanks dude, appreciate it.

[@Grovermol]

Thanks dude!! I 've finally understood provider, cheers

[@aravindc6946]

Perfect example and a good explanation, keep rocking!

[@volodymyrrepetskyi8556]

that photoshop way of describing is very nice idea, thank you!

[@guilhermesantana5004]

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.

[@rohanlawande9134]

Nicely explained the concept man much appreciated!

[@ajaykotiyal427]

Nice Teaching. Thanks for sharing

[@leithhobson]

Thank you for a really solid video!

[@TarekEZaki]

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

[@sadabwasim9850]

Your teaching method is amazing, please make provider+ firestore tutorial video.

[@ahmetkocadogan1890]

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.

[@RetroPortalStudio]

I noticed 😁 Keen Observation! Thank you ! Do suggest your choices for future videos!

[@ahmetkocadogan1890]

@@RetroPortalStudio i am looking for login tutorial with provider :)

[@fantabarack]

@@ahmetkocadogan1890 +1

[@carmenperez250]

this video is gold, thanks

[@fersmartsolutions5873]

Thanks. Great clear tutorial.

[@Sanjay54251]

Again nice video od my type and need this a lot

[@benmukanirwa]

Well explained. Thanks a lot

[@Ayrix06]

Best man

[@koustav2008]

EXCELLENT Tutorial !!!

[@mohamednizam5298]

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?

[@bartovmoti]

Thanks, nice tutorial

[@OppaMixes]

Could you make a MultiProvider example?

[@WikkiOnIlluminati]

Please make video on multi provider

[@ayuschjain]

Here's an article which covers it: ayusch.com/flutter-provider-pattern-explained/ Hope this helps you :)

[@althafaralijaffarali1803]

@@ayuschjain Thanks a lot man! . It helped me to understand the Multiprovider concept. Keep rocking

[@ayuschjain]

@@althafaralijaffarali1803 Glad it helped:) I also have a YT Channel @DesiCoder. Do check it out :)

[@WikkiOnIlluminati]

Thanks Awesome 👍

[@iamyogik]

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.

[@RetroPortalStudio]

Will soon be available 😊

[@teensutra5585]

Thank you for sharing your knowledge, to represent block diagrams you can use draw.io

[@RetroPortalStudio]

Thank you :) Will check that out!

[@midtowncomics3613]

For drawing diagrams and such you can use draw.io if you aren’t already by now.

[@j.almadhaji]

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)

[@taetsu21]

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?

[@RetroPortalStudio]

As per my experience with providers, you should never consider direct dependencies in providers. This can lead to undetected problems

[@Sawa421i]

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!

[@RetroPortalStudio]

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 :)

[@red010182]

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?

[@RetroPortalStudio]

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 ✌😁

[@Chris-te7to]

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

[@berosolo866]

nice tut

[@kojoprempeh]

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?

[@RetroPortalStudio]

Not a good approach to move it to Provider class! But it can be a static method of some utility class!

[@RetroPortalStudio]

Anyways thanks for the support 😁😁✌ Do suggest more content that you would like to see here on my channel!

[@themindstorm9947]

@@RetroPortalStudio Why is it not a good approach to move it to the Provider class?

[@paulhmason]

@@themindstorm9947 The state class should only contain state information and not be bound to UI concepts.

[@gonzaloivandossantosportal2363]

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?

[@vidy9754]

what if i have multiple weatherinfo objects, how do you differentiate inside of the consuming widget? how do you declare multiple notifier objects?

[@RetroPortalStudio]

I think what you are looking for , is MultiProvider ✌😁

[@SagarSagar-ro3fj]

what will hapen if there is another class called Stockinfo along with weather info? how to use builder in this case?

[@florianbrielmaier2135]

good work thx :-)

[@vavadiyahiren]

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.

[@RetroPortalStudio]

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!

[@hk20092009able]

It's better if we make public variable for this dynamic variable inplace of this big complycated circle

[@belqisshida5345]

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 ?

[@khaliljan4474]

Yeah ! this lecture is understandable. But sir can Tell which state Management mostly used in flutter?

[@guidoc3518]

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

[@RetroPortalStudio]

Please check the provider version. there have been a lot of updations since it first released!

[@MozesPetraBios]

Hi. nice video! btw, What plugins/extensions are you using for showing the lines of indentation in vs code? Thanks!

[@RetroPortalStudio]

Hey! This is android studio 😁 I'll look for it if there is any extention for vs code also

[@MozesPetraBios]

@@RetroPortalStudio oh i thought that was vs code. Lol. Okay, thanks for the answer man. Keep up the good job 👍

[@IncogTechBytes]

do i have to use bloc if i use provider? (newbie question)

[@MdYousuf-gw2dn]

make some tutorial about Overlay please

[@hectoraguero5204]

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)

[@developmentflazhost2021]

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?

[@BibeshManandhar]

What if we want to instantiate multiple models like WeatherInfo in MyHomePage ?

[@karangajjar7706]

You Can use MultiProvider widget !

[@d-apps2699]

What's the difference between provider 3.0.0 and bloc? pros and cons when using each?

[@jimmycanosa7496]

What vscode extension used to display the lines for the indentation guide?

[@RetroPortalStudio]

I'm using Android Studio! ✌😁

[@hammiziezamri7858]

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?

[@RetroPortalStudio]

As per my experimentation, Provider persists data for whole application cycle. No need to transfer data through navigator :)

[@hammiziezamri7858]

@@RetroPortalStudio alright thanks

[@SiphoNgwenya]

What about Provider relative to InheritedModel/InheritedWidget? With respect state and passing data to deeply nested widgets.

[@RetroPortalStudio]

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. :)

[@darylwong4734]

Will you be able to post the code to github?

[@barnamam]

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.

[@habeebmurtala7318]

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?

[@gauravthakkar802]

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

[@RetroPortalStudio]

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. ✌😁

[@RiceCooker-hp5px]

what's the difference between with keyword and extend keyword ?

[@RetroPortalStudio]

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! :)

[@MsSplashIt]

Hi what is your ugin called to get the tree view(the lines in your code). Thanks

[@jayobinna4]

hello, please what extension shows the widget structure?

[@hamac4835]

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

[@tusharbarman1924]

Bro the tutorial was great. But can I get the code on github so that I refer it whenever needed?

[@raul286162]

I love u :D

[@avisekhagarwal5082]

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

[@abraiyan7984]

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)

[@RetroPortalStudio]

Oh My! That's awful...... bdw never used bloc for a project myself. 😅

[@abraiyan7984]

@@RetroPortalStudio I tried to learn it. It gave me a hard time.

[@mecil9]

great video！！！！ Activate Windows。。。。。。。hahha！

[@khaledelsherbiny4203]

is this code available on github?

[@HemangJoshi]

please sir, share source coode link if possible.

[@RetroPortalStudio]

For the upcoming videos, i surely will upload the code alongside :)

[@huangshufen2211]

good video, mate, thanks for sharing. can you leave the src code github address for your two different version of provider codes. tks

[@RetroPortalStudio]

Sorry for videos uptill now! Future videos will have the code uploaded :D :D

[@user-fh4xo2pc2d]

Very similar to scoped model.

[@crewfivemscripts1203]

scoped model so many complex, this i think.

[@vkhooda24]

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: kzbin.info/www/bejne/fqOlmoF-etaGj7c

[@RetroPortalStudio]

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.

[@manishdhruw5237]

Activate The Windows Just trolling

[@bibibobs]

Real madlad

[@creative-commons-videos]

@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 ???

[@kokizzu]

i think you should create another function on UserBloc that flags something like this: if(!initialized) { getUser() initialized = true }

[@muhammadyusoffjamaluddin]

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.

[@marcelomagalhaes4508]

Great tutorial! Also, try this tool, it may help improve your diagrams: www.draw.io/