Flutter Provider Tutorial || Mistake that I made as beginner
Vložit
- čas přidán 27. 07. 2024
- In this video I am going to explain and implement Provider for State Management in Flutter application.
I will also explain demonstrate how we are calling setState more than often we need. As a beginner we don't really think about the performance but later it creates problem in terms of performance of application.
------Git Source:
github.com/afzalali15/Flutter...
Provider:
pub.dev/packages/provider
Related video:
Flutter Dark Theme Tutorial | Change Theme Runtime
• Flutter Dark Theme Tut...
Other videos:
Flutter UI Design Tutorial || Soft UI - Skeuomorphism - Neomorphism
• Flutter UI Design Tuto...
Flutter UI Design || Adobe XD Soft UI
• Flutter UI Design || A...
Flutter UI Design & Development tutorial || Flight Booking UI
• Flutter UI Design & De...
Flutter UI Design || Part 2 - Gradient theme
• Flutter UI Design || P...
Flutter UI Design || Adobe XD gradient theme
• Flutter UI Design || A...
Flutter UI Design & Development || Adobe XD design - 1
• Flutter UI Design & De...
Facebook Page: / codexdevs
Connect with me on social media:
FB: / user.afzal
Twitter: / afzalali15
LinkedIn: / afzalali15
Have you done the same mistake? What was your first application that you made with Flutter :)
sir when i have run flutter app in emulator,it runs correctly .when i see a emulator the app size is 97 mb,the app size is large .i have doubt if i use flutter for my project app size it would bigger ,
how to use flutter to develop big project
sir im new to flutter can u say the order i should start learning *topics*
We can create stateful widget which contain only counter and give the timer value this will have the same effect. You will not render whole page but just a text widget.
True, but that is not scalable solution.. each time we need to update something we have to create StatefulWidget.
But, with provider it's just matter of adding new field. 😊👍
@@deepak5283 its debug mode🤣
First time I understand Provider, thanks for the clear example🙃
Glad to hear that!
The applause 😂👏🏽👏🏽👏🏽
Júlio Tati took my headphones off to see who that was. Lol
That coin sound scared me to death!!!
Finally someone who explained Provider Consumer concept clearly
I was using setstate because it is simple to use. And I was confused that why can't we implement a simple setstate rather than a provider package. Now my concepts are clear about state management. Best explanation so far. You are doing an amazing job.
This is indeed a best explanation so far about Providers for me.
cant agree more
been searching for this topic and non has helped me clearly as yours. such a great tutorial & explanation. I've finally understand it & know how to implement it. thank you so much!
I am glad that it helped😍
Great Video! Perfectly explained and definitely the better way to update the UI!
This is the easiest way anyone can understand provider , really a great tutorial
Great and simple explanation. Thank you!
Very clear, understandable and helpful indeed.
Thank you so much.
Glad it was helpful!
Great explanation. Was searching for it whole day. Saved my day.
Awesome video mate... Thanks for making this video. It really helped me a lot to understand the provider package.
Great explanation, I will avoid this error now! Thanks!
Best tutorial I have ever seen, thank u
such a clear explanation of provider thanks a lot
Excellent tutorial thank you!
Very nice explanation thankyou so much 🙏🏼🙏🏼🙏🏼
That was really nice and clear explanation !
Thank you for this!
Just easy n clear explanation !!
Glad you liked it
Awesome explanation 👏
i was doing the same mistake...you solved the problem i was solving from days
in my opinion when you can achieve something with both type of widget ( stateless and stateful ) then it's preffereable to use Stateless Widget, same concept was in react native as well, but now react native also have api for function based components as well. any ways nice content, only problem is improve your audio quality. my videos also have audio problem thought ;)
Thanks, the applause kind of suprised me LOL, keep with on this tutorials
Thanks, More to come! 👍😊
Best video on provider sir✌️👍
Glad you liked it
THE BEST OUT THERE!
I'm about to dive into flutter soon, your channel will be of much help.
Can you talk about reduce build size, as I heard flitter produces very large sized apps.
Greetings from Tanzania 🇹🇿
really helpful, thanks.
I LOVE YOU SO MUCHHH. You have made me a better flutter engineer. Thank you for your amazing content
Thank you so much, welcome onboard :)
Great video 👌
I love the way you explain
Thank you 😊
Great video by all standards. I have a list of data with a filter function that shows only items of th list that contain the search, this means populating or repoulating the list on every typed. Is there a way to use the provider to make this efficient
Good Explanation !!!
Glad you liked it!
Thank youuuu💙
Many thanks sir ji
Thank you! This was the first tutorial where I understood the concept.
Glad it was helpful! Like and Subscribe for more useful tutorials in future. 👍😍
can u say me how long u are learning flutter
@@prathiv5203 I started back in May.
@@Imsety how much u have learnt
@@Imsety i have just started to learn can u say from were ur reading
Keep it up 👍👍
provider explained well. most of the guys overcomplicate using some strange word instead of instances and data, notfier and consumer. great.
God bless you bro. Best Tutorial on Provider, original documentation really sucks for Beginners.
Thank you.. hope you have seen other videos related to API.
provider ki best video ha hindi and urdu ma ..thank you so much..
Couldnt be simpler than this video to understand provider.. 😇
thanks for your tutorials which is the more best than provider can u suggest me ? thanks in advc
wow, your presentation is so easily understandable. Just one question: Why Provider.of inside the initState() has to set the listen parameter to false while in other places this modification is not required?
You just got a subscriber
Nice video. Also you can replace that stateful widget with a stateless widget that will be better.
very helpful...
Thank you
Very nice
great
alhamdulillah..thank you...
please make a video of defferent types of providers and their use, which covers everything about provider. :)
Nice one there🔥👍
Thanks 🔥
if i use home: Provider() instead of home: ChangeNotifierProider() in minute 7??? whats change behind the scenes? that i cannot understand!!
loved it!!!.
bro could you design a complex app using provider
Is it extends or with using modal class ?
Hey can I use this with GetX package because I like the way GetX works but for state management I think provider is best option.
God bless u!!
thank you!
Welcome!
sir if in my provider i am using multiple information. if I update a single information then it is re rendering all widgets where I have used this provider with consumer. how can I fix this?
i have a dout the initS is build only once when the whole class is create and you are define the TimerInfo in initS so that's means the the Timerinfo instance and UpdateReamningtime only once so how the data continuously changes plz clear my dout
Thank you for the helpful tutorial.... One Question > Do we have to use this for timer only or we can use this for updating other widgets? How often and in what other situations we should implement this?
Hi, Timer is just one of use case. You should use *Provider* for updating data from API, user action, page events and any place where you want to *update part of UI* .
nice explanation
Thanks and welcome😊
very helpful
Glad it helped
why we made listen : false 11:20 , it's difficult for me to grab the concept . Can anyone explain this ? thankyou !
Allah razı olsun.
My provider IS working fine on debut mode. But when i build the app It doesn't work.
❤🎉
Sir, I cannot import this provider.dart after having installed the package successfully. Any suggestion please ...
Best
@9:16 I believe you should have taken timer also inside the model class and should have made interface of the model class something like startTimer and stopTimer or pauseTimer
I have one question, what's the point of setstate since we have to use provider? Where we should use it?
Love From Enam
Why are you using Stateful Widget where we can easily do the same thing using Stateless widget with provider implemented. Is it necessary to update time inside initState method? Please clear me
observatory listening On*********
How to solve this problem ??
Please help me
I am calling the Provider.of(context) in build function (flutter web ) every time i hover the page the build function is called please how can i solve that
Calling Provider from build is totally fine, theres something other than this which is causing build to call on hover.. code snippet would help to understand problem. How about posting the issue on FB group or StackOverflow?
@@CodeXdev i have comment your post on facebook with a code snippet
What is your opinion on putting an asynchronous function in initState? I see how you used initState here
We can invoke async function but we should not wait for it to complete
Can you make a video
getting data from API using Provider...
sir when i have run flutter app in emulator,it runs correctly .when i see a emulator the app size is 97 mb,the app size is large .i have doubt if i use flutter for my project app size it would bigger ,
how to use flutter to develop big project
you need to use the command : flutter run --release to get the best compiled version of your app
Bloc vs Provider which is best and sufficient in case of State management.
Provider is more like ViewModel and BLoC is based on events and states. If you are more into state management
then go with BLoC.
bro I need your help in provider package.
I am getting a bug.
I am using two consumer one is returning a text widget and another is returning a listview widget
my text widget is showing the lenth of the list used by listview.
Every time I am adding a element in list the text widget listen to changes and update itself but that's not the case with listview.
I tried to debug this by putting a print statement just before returning listview in consumer and actually that print Statement get invoked but why the listview is not updating then?
Hey Ashutosh, If you can share your code snippet using DartPad or something that will be helpful. Just make sure, you are using MultiProvider.
bro use stateBuilder ,that is easy to use and have more docs available to know .
I am fetching the data from API. but at first I get error receiver null on Consumer and then when the data is loaded the error goes away. How to fix it?
Your consumer will only call once you notify from your model. Make sure that you are not calling notifyListener before you successfully loaded the data!
Maybe I am mistaken and please correct me if I am, but I think that flutter will rerender only variables from setState method, which are assigned to widgets and not whole widget tree.
It will rerender the widget it was called and all the children widgets that don’t have a const constructor
what if we use a seperate widget class for the timer and then call the same in parent......that way your timer will get updated and build will not be called........
although using provider or value listenable builder will also give the same result
Brother plz help !
I have 2 months left for the completion of my graduation , i know the basics of flutter , api , few sorting algorithms . How can i be job ready as flutter developer in 2 months .?
thank you. So, "setState" will reload whole page but now only the build method runs, because of the notifier.
The code completion was working earlier for in Android Studio, now does not work, I was having too many plug-in, now not sure which plug in it was. Could you please get me link.
Did you mean provider package link? Here it is: pub.dev/packages/provider
Code completion has nothing to do with these packages, may be try running flutter doctor.
@@CodeXdev
Sorry, there must be some other issue, code completion does not work for me
Will check
What is the purpose of getter in TimerInfo class?
Can you explain me more about getter you created ?
Nice question! _remainingTime is Private variable, Its good practice to create getter setter to access fields. Hope that helps 👍
Is your macbook hot as hell with the build and the emulator running? Mine gets to 80c quite easy.
Only when I put it on bed 😂, otherwise 16 gigs of RAM keep me going👍🏼
CodeX yeah I have 16 too but temperature raise a lot with emulator
I can understand how it feel, I started using VS Code instead of Android Studio... and i make sure everything is closed when emulator n VS is fired! Try using cooling pad, sometime surface also can cause heat..
Thank you for the helpful tutorial. Sir, I working on a comments page like Facebook. I have a list of posts using ListView.builder. I have a new screen for comments whenever a user comments on the post then I want to increment the comment on the listing page. I'm stuck on this. how can I do this? I'm using Flutter Provider. Thanks
I suggest you to watch this video czcams.com/video/hRStAmkTcJY/video.html might help you😁
hey nice video. But I didn't understand where do you set value for timer to 60.
I highlighted with graphics, that timer initialisation got edited due to flow of video.. it should be in Controller.
Thanks for sharing. What is "Real Quick"??
🤣🤣 Really Quick 😅
thank you, sir, for this tutorial
can you tell me what's your laptop version
macOS Catalina Version 10.15.3, is that what you needed?
@@CodeXdev 😂
@@CodeXdev yeah thank you
I ask for I will buy one
thank you again 😀
3:02 Hey Afzal, I know setstate calls build method, and whatever is inside build method is thus rendered again, but if we are calling setstate on a single variable only, then why setstate is not analyzing this fact and only re-rendering that particular variable rather than entire build method? I mean, considering how smart flutter framework is at some place, then how come setstate could not figure out only which part to re-render rather than entire build method (I am taking reference from react where it makes a virtual dom and compare it with actual dom and make changes to only those components which are changed)
Edit: Please note that I have watched the entire video, and I know for this provider is introduced. However, I am curious to know as in why setstate couldn't figure this aspect about which I am talking (intelligent rebuild) .
i think even though build is called the entire screen is not rendered.......its only the portion that is connected to the variable is rendered......need to check it in android studio performance monitor
So, at the bottom level.. its not repainting the widgets which dont have any change, but yes.. it goes through comparison of widgets and the one whose state has changed is repainted! Overall its not super efficient, but doesn’t even do repaint either.
yeah provider would do alot of good in speeding things up
Hey, I am new to mobile app development. What do you prefer, getx or provider?
I prefer GetX over provider
I would choose bloc over both. It's late, but what did you choose?
Why flutter didn't created a function like setState(this)? Wouldn't be possible?
Some points I want to mention, if you have a big widget tree inside the consumer they all will rebuild. But here is the important part that most people don't realize Flutter rebuilding itself doesn't mean it's creating new copies it just checks for changes with its own element tree and only rebuilds new instances of the changed widget.
Rightly said, but that comparison for each element takes execution time. We have third parameter in builder of Consumer that holds the child widget (without rebuild), I haven't covered in this tutorial but if needed I will sure explain how that works.
@@CodeXdev you can't ignore that. That's how state change happens. The Consumer you used has its build method read the source go there and the print command. It will print you that over and over again every time there is a change in the counter. Also, this isn't how you show people if something is rebuilding or not there is Dart observatory which has a tool that shows the UI that has been rebuild. You need to learn more before making tutorials with incomplete knowledge dude.
Appreciate your feedback.
@@TheMr82k Out of all the amazing content this man chose to teach us, you just decided to choose a few mistakes and hate all over him? Come on man there are nicer ways of offering alternative solutions and yours isn't it. And in fact this video was very simplified for everyone to understand the basic concepts of Provider, so you can stay at the corner with your big brain while all of us learn from this amazing flutter expert
Where did he initialise timer to 60?😅i cant found it
Can you prevent rebuild widget after Navigator.push() or .Pop()?
Thanks advance
That's simple. Just cancel the timer.. you will have to create State level timer and cancel() from somewhere before navigating or on dispose(). Does that answer your question?
Eg. I have two screens. A and B. A navigate to B. When I back to screen A. Screen A always rebuild root widget. Could you prevent rebuild widget?
Thats the lifecycle of the State, preventing that will have its own consequences. Still, i will appreciate if anyone has answer to that..
@@CodeXdev thanks
@@CodeXdev stackoverflow.com/questions/49439047/how-to-preserve-widget-states-in-flutter-when-navigating-using-bottomnavigation
great content man, but I can hardly hear you. Can you please increase the volume? ( I know it's not me 'coz the ads are too loud )
Thanks for feedback, improving day by day 😀I cannot modify this video, but in my latest videos you will find much better audio 😍czcams.com/video/4RHvFVVUWqw/video.html