Flutter Provider: The Essential Guide

This tutorial shows how to refactor the default Flutter counter app with Provider, including in-depth explanations about ChangeNotifier, ChangeNotifierProvider, Provider.of, Consumer and ValueNotifier.
HIGHLIGHTS
00:00 - Intro
00:46 - Overview of the counter app
01:47 - Propagating state across widgets (lifting state up vs Provider)
03:48 - Refactoring the counter app
04:50 - Creating a counter class with ChangeNotifier
06:05 - Using ChangeNotifierProvider
07:10 - Using Provider.of
08:32 - Registering widgets as listeners
10:07 - The Consumer widget
11:43 - Quick Recap
13:20 - Using ValueNotifier
15:37 - ValueNotifier under the hood
Join my FREE email course to become a Flutter expert with the best resources, at your own pace: codewithandrea.com/newsletter/
Want more? Check out all my Flutter courses: 👇👇
codewithandrea.com/courses/
Happy coding!

[@AdrianMoya]

Thanks man, the internet needed this tutorial.

[@joaorafael6202]

I have an observation: in the ChangeNotifierProvider widget the 'builder'(6:44) argument name is now deprecated, use 'create' instead of 'builder'. By the way, great tutorial, thanks for the time and effort that you given in order to make it!

[@abuzar478]

Thanks man i was really confused about this

[@Musicmotivated]

Abuzar Rasool ii

[@Musicmotivated]

Abuzar Rasool iii

[@Musicmotivated]

Abuzar Rasool iiiiu

[@Musicmotivated]

Abuzar Rasool has uto uou iii

[@loldotcom955]

Best tutorials on provider in the internet

[@dannykay4919]

I didn't even finish the video as i'm typing this (but am about to). I just had to pause and comment to say this is a great explanation. So many state management techniques out there and some contractors were bringing in things that looked a bit foreign to me. After reading the provider packages documentation and watching this video, stuff seems super simple. Thanks for saving me some time!

[@devonedmonds9223]

This is the single best Provider tutorial I've found thus far. Many thanks Andrea!

[@CodeWithAndrea]

Thank you. That was my goal.

[@agoodmansaid]

@@CodeWithAndrea I totally Agree man, all others are either too long or too complex or both

[@chinxeleer]

Everything he teaches is on point bro, he taught me dart lang forever appreciated Andrea

[@albertgeorge1619]

The most simplest and easily to understand definition of Flutter Provider you would ever find over internet. Trust me I searched for a long time. Now I understood it. Thanks to Andrea for taking his time to explain it at as simplest as possible.

[@lucy-lh1py]

I have been confuse about state management in Flutter for so long. now, it's clear thank you so much

[@anandgupta8529]

a great teacher has two qualities- knows the concept well and explains the concept well. You have mastery over these two skills. Love your tutorial. Thank you

[@quotesworld203]

I seen many of videos about notifier and consumer but I 😕 confused , after watching this video I am clear. Thank you soo much ❤️👍. You are the best teacher. ✅️

[@tak68tak]

The best tutorial on Provider I've watched!

[@shakibuzzaman8931]

Outstanding Explanation! Diagrams can make learning so much easy. Best tutorial on provider.

[@eliteelitebob]

Excellent tutorial

[@josecoverlessons]

you are an excellent teacher and content creator

[@ckybat]

The simplicity of how you explain is excellent. Thank you very much for the time spent and how you make it easy to understand.

[@sergdigital7437]

Brilliant explanation. Even the reply's on the comments are formidably accurate and well intended. I've never regretted subscribing to your channel.

[@daviidon]

Thanks for this presentation, I was having a hard time wrapping my head around provider but you make it seems so simple and showed us multiple ways of doing the same thing...thanks again

[@vital-piker]

Thanks for the video! You are a great teacher! :) Explanation is clear and sophisticated!

[@harrymitchell5853]

Thanks Andrea!! Now I have a basic understanding of Provider for state management. You did a great job of explaining how it works.

[@Asdfpt4dp]

I love the way you explained this. Helped me understand flutter so much better. Thanks!!

[@_torgeek9108]

This is the first video that I have came across that has helped me understand the concept and how to implement it step-by-step. Thanks for the video @Code With Andrea

[@SergioArroyoSailing]

fantastic tutorial! I like the way you attack the Provider concept! One of the series on Provider I have seen so far :)

[@agoodmansaid]

God bless you man, this is the easiest to understand provider tutorial on KZbin in my opinion. Subscribing 👏🏽

[@Anom21]

Hey man just wanted to say...I've looked at quite a lot of tutorials on providers...many of which shows how to code the provider and consumers etc. But this video is the best video I've ever seen on provider. It was very simple to follow and I learned a lot about providers that didn't know before. Thanks man!!

[@witsislide]

Thanks for the tuts, especially the diagrams, it helps to illustrate the package and the concept more easier to understand.

[@SajbSky]

Thank you, very well explained...Much appreciated. I listened to others tutorial and this by far has been the easiest to follow and understanding. Keep up the good work :)

[@M.BilalAhmad]

Finally found a good one on Providers. You definitely deserve a subscription!

[@yanlay129]

Thanks man The Best Provider Tutorial

[@skiplabacademy2570]

You've made my life a lot easier man. Thanks

[@MrQooje2]

Great detailed explanation! Simple and easy to follow. Thanks very much!

[@fouadamine7329]

Congratulations, this is ths best explanation of provider, ever. I've been waiting for a such video, thank you sir. Please keep publishing videos on flutter app architecture.

[@srhenalsr]

This is an amazing tutorial! Great work man, thanks!

[@spragucm]

Excellent explanation. Thanks for the info.

[@tonychong8181]

Thank you so much for your Flutter videos! Extremely helpful!

[@TahirHoxha]

The best Provider tutorial, it looks so easy now.

[@whitemagehealing8126]

I love your diagram explanation!

[@emadfathy1767]

Good guide Andrea, thank you.

[@MuhammadAbid-lp6lg]

You are awesome. Simple and straightforward explanation. Thank you sir.

[@yamatatsu5776]

This is the best material !!! Thank you.

[@ElDiosxxx]

omg you explain so well! thanks a lot!

[@LearnFlutterCode]

Nicely explained on the value notifier

[@prathameshacharya3457]

Beautifully explained!!

[@AnthonyBOUQUET-Globule]

You just nailed it !

[@SabirIslamKhan]

You are very good man.. I mean, the way you explain things. It's just awesome.. so simple to understand

[@yuwenpixon]

This video tutorial is awesome. The explanations are very clear. Thanks to you. Actually I bought your course at Udemy about flutter

[@vincemelia3534]

That was well explained - thanks.

[@sergiofranklin8809]

Amazing tutorial

[@letsdoeverythinginoneweek9398]

your explanation is great i watched many tuts but finally i understad it by watching ur video ..at last thank you for making this video

[@sabinjose]

Excellent tutorial!

[@lixiang3631]

so greate video about provider !! thank you so much!!!

[@user-jm2gu4zb7c]

Very good video! Thanks

[@lindermannla]

Greate tutorial! thnxz Andrea!

[@Jdbluesky]

Wowwww, great tutorial!!! Thanks!!!

[@djraven68]

Great Tutorial :)

[@ofeko1997]

Your awsome! great tutorials!

[@laujimmy8635]

Great tutorial

[@mohammaduzair608]

Thanks this has cleared all my doubts!

[@hongweiwu9269]

Best tutorial !!!

[@techniker8745]

thanks very good explanation specially the diagrams very well done

[@dicasdoanthony]

Great explanation!

[@askmrmoses]

Very helpful!

[@abderrazzakoxa-4149]

Thank you Bro Good video ♥️

[@krzysztofk.8842]

Duude.. you just saved me hours... I forgot to `notifyListeners` on one method in my Counter. Cheer mate. Liking a LOT!

[@harry356]

Very usefull, thanks!

[@dhruvkelawala960]

Nice content 🤘

[@fadhilkemal7367]

Amazing explanation

[@45632476]

You're good! Please, continue.

[@imed-boumalek]

excellent!!!!

[@dimitrispaxinos2294]

Very nicely presented! Thank you Andrea for providing so much value. I also bought your Covid App Udemy course which has been ver helpful as well.

[@armagan_gok]

thanks a lot man you know how to teach

[@abdelghafourabou-kacem9230]

This is the best video on provider on youtube, hands down! Question: can i use this for an e comerce app to add items and remove them from a shopping cart ?

[@ebrahimkassem8939]

Woow.. Thank you sooo much

[@SublustrisRU]

Отлично! Это один из лучших уроков на тему Provider. Единственно, прошу - поставьте popfilter на микрофон, звук станет лучше.

[@zaidz6263]

Thank you

[@a989857]

It's very clearly to introduce "provider" by demonstrating simple sample

[@look_rio]

Thank you!!!!

[@nidalbakir4720]

thanks a lot

[@sameerkashyap4620]

This was great! Hoping for a more in depth explanation of provider.

[@CodeWithAndrea]

Coming next Monday.

[@ankitgupta-iz3sc]

Thanks!!!!!

[@crazieeez]

Since provider version 3.2.0 , the builder for ChangeNotifierProvider is deprecated use create instead.

[@G4MR1]

You made me understand Consumer better and ProviderNotifier seems useful, but currently I don't have a use case for it atm lol

[@vinusubhash9106]

Thanks

[@suztomo]

Thank you. I didn’t know “the widget identified by context” is used for listen: true.

[@yixinli2161]

nice thanks

[@CodingwithDay]

Geat explanation! Thank you. Can you tell me the plugin that's been used here to show the error/problem on the screen as you type, please?

[@b.u.s.y.b.e.e.]

Thanks Andrea it was straight forward.. but I wanna ask what the builder method under ChangeNotifierProvider class is used for

[@JobaerArman]

Very useful & easy to understand tutorial. Though I have a question about your VSCode setup. How does the error display inline?? Which extension is it?

[@mwont]

Any chance for the refreshed course? Many thinks shown here are already deprecated or not recommended any more.

[@hieu4987]

Tell me something that better than this tutorial. Thank you so much

[@findsarfaraz]

super...

[@hoandovan1vti.d291]

Thanks for your tutorial! We'll wrap `ChangeNotifierProvider` outside when we create a new, ex: new `HomePage` in main file. Is this the best practice ?

[@kirill4531]

Good one. Looking forward for an example with passing Provider to new screens (routing)

[@CodeWithAndrea]

This is planned for one of the upcoming videos.

[@kirill4531]

@@CodeWithAndrea awesome!

[@SunilparajuliKenshin]

Hi Andrea, thanks for concise and easy tutorial , i like to ask for stateless widget, if i call my api using provider , i need to automatic call the methods (like fetchdata) once when the page is loaded so that widget rebuilds itself. By adding button it's okay but what i need it is automatically call the method.

[@yanqingjing8582]

what's the extension you are using for the quick widget add in?

[@rikyriky966]

Hi Andrea!! I’d like to thank you for this one. I hope you share an extended video about provider. I can get the concepts and I’ve using provider since it first came out. However, I really don’t feel confident about state management and structure yet. A question: Is it a good practice to wrap the root of the app widget with MultiProvider? This way I can expose every provider to the whole tree. By using the “listen: false” trick, it’s possible to prevent heavy and unnecessary rebuilds of irrelevant widgets. What do you recommend? Thank you!

[@CodeWithAndrea]

Yes, you can wrap the root widget with MultiProvider. I often do this to add providers for all the app services (authentication, database etc). And using "listen: false" helps reducing rebuilds as you mentioned.

[@icalculi]

is it possible to create a form widget along with GlobalKey on a STATELESS widget?

[@omkary.1510]

Nicee

[@themindstorm9947]

How do I pass a value to increment? How should I change to code if I want the onPressed to be something like counter.increment(5) ? Thanks!

[@bilalsimsek7306]

As a perspective of this tutorial, I see Provider is looks like ValueListenableBuilder widget. How I use it in my project that I have a global class and ValueNotifiers as arguments of this class. and anywhere I need to update or listen this notifiers I only assign as Global().valuenotifier. I wonder what is advantage of using Provider instead of ValueListenables and valuenotifiers?

[@theepicguy6575]

Im pretty late, but is there a way to simply run a set state when there is a change, rather than using a consumer, because I dont want to rebuild my google maps but i need to update the markers

[@benmarcus2577]

thank you so much but why do we need so many builds?