Flutter Provider Tutorial || Mistake that I made as beginner

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

[@CodeXdev]

Have you done the same mistake? What was your first application that you made with Flutter :)

[@deepak5283]

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

[@prathiv5203]

sir im new to flutter can u say the order i should start learning *topics*

[@siddheshtamhanekar3144]

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.

[@CodeXdev]

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

[@rishadbaniya1679]

@@deepak5283 its debug mode🤣

[@gonzaloencinar4156]

First time I understand Provider, thanks for the clear example🙃

[@CodeXdev]

Glad to hear that!

[@deliciafernandes9946]

That coin sound scared me to death!!!

[@juliotati]

The applause 😂👏🏽👏🏽👏🏽

[@rakeshkanna91]

Júlio Tati took my headphones off to see who that was. Lol

[@user-or2qz2ws4c]

Finally someone who explained Provider Consumer concept clearly

[@arslankaleem2593]

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.

[@midnytromeo]

This is indeed a best explanation so far about Providers for me.

[@vukasinsl1]

cant agree more

[@ilcarnation3530]

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!

[@CodeXdev]

I am glad that it helped😍

[@the_offroad_diaries]

This is the easiest way anyone can understand provider , really a great tutorial

[@johannesluken949]

Great Video! Perfectly explained and definitely the better way to update the UI!

[@vigneshaithal]

Great explanation. Was searching for it whole day. Saved my day.

[@abhishekdiwakar5379]

Awesome video mate... Thanks for making this video. It really helped me a lot to understand the provider package.

[@georgematua]

Great and simple explanation. Thank you!

[@user-gu5ts5nx8r]

Very clear, understandable and helpful indeed. Thank you so much.

[@CodeXdev]

Glad it was helpful!

[@monisankarbarick1622]

Best tutorial I have ever seen, thank u

[@pranthonyaquino]

Great explanation, I will avoid this error now! Thanks!

[@techtechtuts]

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

[@vukasinsl1]

provider explained well. most of the guys overcomplicate using some strange word instead of instances and data, notfier and consumer. great.

[@raymondmichael4987]

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 🇹🇿

[@shubhammittal2367]

such a clear explanation of provider thanks a lot

[@arunodaykumar1273]

i was doing the same mistake...you solved the problem i was solving from days

[@someshsahu4638]

Very nice explanation thankyou so much 🙏🏼🙏🏼🙏🏼

[@acarvey]

Excellent tutorial thank you!

[@furkan4528]

That was really nice and clear explanation !

[@ahmedseddik2748]

Awesome explanation 👏

[@ronaldsethoga667]

I LOVE YOU SO MUCHHH. You have made me a better flutter engineer. Thank you for your amazing content

[@CodeXdev]

Thank you so much, welcome onboard :)

[@sachinmaharjan11]

Just easy n clear explanation !!

[@CodeXdev]

Glad you liked it

[@derencewalk]

Thank you for this!

[@MWStudiooo]

Best video on provider sir✌️👍

[@CodeXdev]

Glad you liked it

[@Grovermol]

Thanks, the applause kind of suprised me LOL, keep with on this tutorials

[@CodeXdev]

Thanks, More to come! 👍😊

[@abdelrahmanosama1785]

Great video 👌

[@ehtixhamamjad]

provider ki best video ha hindi and urdu ma ..thank you so much..

[@M37Shadow]

I love the way you explain

[@CodeXdev]

Thank you 😊

[@raylin4135]

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?

[@Imsety]

Thank you! This was the first tutorial where I understood the concept.

[@CodeXdev]

Glad it was helpful! Like and Subscribe for more useful tutorials in future. 👍😍

[@prathiv5203]

can u say me how long u are learning flutter

[@Imsety]

@@prathiv5203 I started back in May.

[@prathiv5203]

@@Imsety how much u have learnt

[@prathiv5203]

@@Imsety i have just started to learn can u say from were ur reading

[@averagetekkenplayer8376]

really helpful, thanks.

[@kwesikennedy3113]

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

[@SatyaPrakash-qd8em]

God bless you bro. Best Tutorial on Provider, original documentation really sucks for Beginners.

[@CodeXdev]

Thank you.. hope you have seen other videos related to API.

[@AhmedElsaadany-ey7ri]

Nice video. Also you can replace that stateful widget with a stateless widget that will be better.

[@syedashrafquadri6377]

Many thanks sir ji

[@akshaykaneriya187]

please make a video of defferent types of providers and their use, which covers everything about provider. :)

[@simpleaadmi4736]

Couldnt be simpler than this video to understand provider.. 😇

[@manglayadav4022]

Keep it up 👍👍

[@AliYar-Khan]

Good Explanation !!!

[@CodeXdev]

Glad you liked it!

[@sameerk12982]

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?

[@CodeXdev]

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

[@apeelsubedi844]

You just got a subscriber

[@fayezalle43]

alhamdulillah..thank you...

[@rishavsharma7466]

THE BEST OUT THERE!

[@aqeelshamz]

Thank youuuu💙

[@IraqAbdullah]

Very nice

[@mztanvir]

very helpful...

[@rsocial453]

Thank you

[@hackerwhite7957]

thanks for your tutorials which is the more best than provider can u suggest me ? thanks in advc

[@onuryldrm1840]

Allah razı olsun.

[@WikkiOnIlluminati]

@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

[@PriyanshuRaj-oc4tk]

Nice one there🔥👍

[@CodeXdev]

Thanks 🔥

[@AbhiKumar-my2uz]

loved it!!!. bro could you design a complex app using provider

[@AliAbdullah-oi3wc]

thank you!

[@CodeXdev]

Welcome!

[@gaganjindal2123]

nice explanation

[@CodeXdev]

Thanks and welcome😊

[@isozar]

God bless u!!

[@anandmano4375]

great

[@shreyagoel8297]

very helpful

[@CodeXdev]

Glad it helped

[@thatsenam9183]

Love From Enam

[@amonchowdhury7731]

Best

[@1947TamilGamers]

bro use stateBuilder ,that is easy to use and have more docs available to know .

[@devsbuddy]

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.

[@sheelajayakumar6833]

Is it extends or with using modal class ?

[@mohamedahsan8035]

❤🎉

[@TheMr82k]

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.

[@CodeXdev]

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.

[@TheMr82k]

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

[@CodeXdev]

Appreciate your feedback.

[@ronaldsethoga667]

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

[@SergioArroyoSailing]

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 )

[@CodeXdev]

Thanks for feedback, improving day by day 😀I cannot modify this video, but in my latest videos you will find much better audio 😍kzbin.info/www/bejne/aoOrp3mMi7qKp9k

[@Himanshukumar-ix5bd]

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

[@francescofreddi4374]

if i use home: Provider() instead of home: ChangeNotifierProider() in minute 7??? whats change behind the scenes? that i cannot understand!!

[@olajumokeadenekan8905]

What is your opinion on putting an asynchronous function in initState? I see how you used initState here

[@CodeXdev]

We can invoke async function but we should not wait for it to complete

[@isozar]

I have one question, what's the point of setstate since we have to use provider? Where we should use it?

[@vijaygovinda719]

Can you make a video getting data from API using Provider...

[@mr.rahman4490]

video and explanation was good enough but the audio was lower than the intro

[@CodeXdev]

Yeah, early days of my KZbin. Now its has crispy audio.. Thank you

[@imranhossain3511]

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?

[@dhananjaygavali8266]

hey nice video. But I didn't understand where do you set value for timer to 60.

[@CodeXdev]

I highlighted with graphics, that timer initialisation got edited due to flow of video.. it should be in Controller.

[@yakoubtarkaoui2586]

thank you, sir, for this tutorial can you tell me what's your laptop version

[@CodeXdev]

macOS Catalina Version 10.15.3, is that what you needed?

[@abbas_tfu]

@@CodeXdev 😂

[@yakoubtarkaoui2586]

@@CodeXdev yeah thank you I ask for I will buy one thank you again 😀

[@sushilkhadka8069]

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

[@naingtheawperc3817]

What is the purpose of getter in TimerInfo class? Can you explain me more about getter you created ?

[@CodeXdev]

Nice question! _remainingTime is Private variable, Its good practice to create getter setter to access fields. Hope that helps 👍

[@ajaykotiyal427]

Thanks for sharing. What is "Real Quick"??

[@CodeXdev]

🤣🤣 Really Quick 😅

[@arqamhussain8298]

why we made listen : false 11:20 , it's difficult for me to grab the concept . Can anyone explain this ? thankyou !

[@access0288]

Sir, I cannot import this provider.dart after having installed the package successfully. Any suggestion please ...

[@prsh1989]

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

[@someorother5272]

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

[@CodeXdev]

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.

[@someorother5272]

yeah provider would do alot of good in speeding things up

[@sahilkachhap]

Bloc vs Provider which is best and sufficient in case of State management.

[@CodeXdev]

Provider is more like ViewModel and BLoC is based on events and states. If you are more into state management then go with BLoC.

[@bascelik91]

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.

[@hyungtaecf]

It will rerender the widget it was called and all the children widgets that don’t have a const constructor

[@someorother5272]

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

[@guidoc3518]

My provider IS working fine on debut mode. But when i build the app It doesn't work.

[@arshadkhanSherani]

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

[@Abhishvek]

I suggest you to watch this video kzbin.info/www/bejne/noO2pXSjoLmWgLs might help you😁

[@blackmakerblm92]

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

[@CodeXdev]

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?

[@blackmakerblm92]

@@CodeXdev i have comment your post on facebook with a code snippet

[@devgabriel6898]

Is your macbook hot as hell with the build and the emulator running? Mine gets to 80c quite easy.

[@CodeXdev]

Only when I put it on bed 😂, otherwise 16 gigs of RAM keep me going👍🏼

[@devgabriel6898]

CodeX yeah I have 16 too but temperature raise a lot with emulator

[@CodeXdev]

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

[@2SourceFort]

observatory listening On********* How to solve this problem ?? Please help me

[@sumitrawat2289]

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

[@hammadtariq9324]

Hey, I am new to mobile app development. What do you prefer, getx or provider?

[@CodeXdev]

I prefer GetX over provider

[@Ayan-od8hk]

I would choose bloc over both. It's late, but what did you choose?

[@deepak5283]

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

[@mhdev4387]

you need to use the command : flutter run --release to get the best compiled version of your app

[@praveenkanwar3261]

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?

[@CodeXdev]

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!

[@Sam-ch4jh]

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.

[@CodeXdev]

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.

[@Sam-ch4jh]

@@CodeXdev Sorry, there must be some other issue, code completion does not work for me Will check

[@ashutoshaswal]

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?

[@CodeXdev]

Hey Ashutosh, If you can share your code snippet using DartPad or something that will be helpful. Just make sure, you are using MultiProvider.

[@majestyclub8170]

Where did he initialise timer to 60?😅i cant found it

[@rede_neural]

Why flutter didn't created a function like setState(this)? Wouldn't be possible?