Flutter Provider EASY Tutorial

This is how you can learn to use Provider with Flutter. This tutorial gets straight to the point, and you won't require any other beginner's tutorial on Provider after this one. Provider is a popular and powerful state management solution for Flutter applications. It simplifies the process of managing and sharing state between different parts of your Flutter app. Provider is used to create and manage data models (usually by extending ChangeNotifier), which can then be accessed and updated throughout your app.
Here are some key aspects of Provider in Flutter:
👉 State Management: Provider helps you manage the state of your Flutter application. You can create data models that extend ChangeNotifier to hold your app's data and business logic.
👉 InheritedWidget: Provider uses the InheritedWidget pattern to make data available throughout the widget tree. This means you can access your data model anywhere in your widget hierarchy.
👉 Simple Syntax: Provider provides a simple and readable syntax for working with data. It allows you to access data using context.watch (listen to changes) or context.read (don't listen to changes) , making it easy to update your UI when the state changes.
👉 Scalability: Provider is highly scalable and can be used for both small and complex applications.
👉 Reduced Boilerplate: Provider reduces the amount of boilerplate code needed for state management compared to some other solutions, making it a popular choice among Flutter developers.
👉 Separation of Concerns: Provider encourages the separation of your app's logic from your UI, helping you write clean and maintainable code.
Overall, Provider is a versatile and widely adopted state management solution in the Flutter ecosystem. It's a valuable tool for Flutter developers looking to efficiently manage and share state in their applications.
OVERVIEW
0:00​ Flutter Provider
0:13 ✅ Step 1: Example
0:46 Class Provider
1:25 MultiProvider
2:05 .watch
2:51 .read
4:10 Recap
4:37 ✅ Step 2: Practical exercise
5:09 Class Provider
6:48 MultiProvider
7:14 .watch
7:32 .read
LINK
Cheat Sheet: fluttermapp.com/provider
Documentation: pub.dev/packages/provider
CREDIT
Packages author: Remi Rousselet
MISSION
Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and straight to the point Flutter videos.
WEBSITE
www.FlutterMapp.com
CONTACT
For business inquiries email me here: info@fluttermapp.com
#Flutter

Пікірлер: 128

  • @RandalLSchwartz
    @RandalLSchwartz9 ай бұрын

    Keep in mind, Remi (the creator of both Provider and Riverpod) has said that Provider is in maintenance mode only, and all new projects should be using Riverpod instead.

  • @wakkowb

    @wakkowb

    8 ай бұрын

    do you have any source pls?

  • @SkjoyBd

    @SkjoyBd

    7 ай бұрын

    ​@@wakkowb Speech without authentic source!

  • @iamawesomeheheh

    @iamawesomeheheh

    6 ай бұрын

    thanks @RandalLSchwartz! but I'm wondering what can't Provider do that Riverpod can? care to share?

  • @ForChiddlers

    @ForChiddlers

    26 күн бұрын

    Why do you lie. And why does the video author not call you out?

  • @reaganza23
    @reaganza239 ай бұрын

    Man I've been longing for the provider video for a long time and no youtuber have been able to explain it this way. Dude you are amazing.

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Glad I could help! Thank you Reaganza 🔥👍

  • @sehmendoza
    @sehmendoza9 ай бұрын

    That's very nice of you providing this information. Thank you so much! For sure, a lot of people appreciate it!

  • @renecura
    @renecura8 ай бұрын

    Amazing tutorial, clean and clear.

  • @shreyasachar5528
    @shreyasachar55287 ай бұрын

    Last Line was Insane 😂😂😂😂...btw Great video buddy

  • @noise3d
    @noise3d8 ай бұрын

    Absolutely loved this. All the other videos were so confusing. Thank you. Hope you do one for Riverpod soon.

  • @Mark_Thrasher
    @Mark_Thrasher6 ай бұрын

    Excellent video! It is succinct and provided the general overview I wanted!

  • @faezansar5417
    @faezansar54177 ай бұрын

    You made it loook so simple ,hats off

  • @indigomedia4158
    @indigomedia41587 ай бұрын

    Thank you very much for making this tutorial, you helped me a lot, i appreciate

  • @RomanShepel
    @RomanShepel6 ай бұрын

    Thank you! It was very helpful!

  • @unaisulhadi6445
    @unaisulhadi64458 ай бұрын

    Simplest explanation. Kudos

  • @helloharendra
    @helloharendra4 ай бұрын

    Easy to understand , well explained , love it.

  • @FlutterMapp

    @FlutterMapp

    4 ай бұрын

    Glad to hear that!

  • @CodingwithDay
    @CodingwithDay3 ай бұрын

    Thanks for the amazing video!

  • @BorgEmperorMJ
    @BorgEmperorMJ2 ай бұрын

    Not garbage, good tutorial :))

  • @joshuabumanlag396
    @joshuabumanlag3969 ай бұрын

    Amazing video as always man! Manifesting for your to have a BloC tutorial soon!

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Thank you Joshua!

  • @elitearmedforce
    @elitearmedforce9 ай бұрын

    Amazing video, thank you for creating one. Now i am waiting for riverpod

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Thank you!

  • @berkaykurkcu
    @berkaykurkcu9 ай бұрын

    Same video for Riverpod please!! Great video

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Will do, thank you Berkay

  • @davidactions3090
    @davidactions30909 ай бұрын

    Really helpful. Thank you again.

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    You're very welcome!

  • @icoweb500
    @icoweb5006 ай бұрын

    thanks chief. well put.

  • @muhendis_
    @muhendis_Ай бұрын

    what a beautiful lesson

  • @user-wt2sq1bx7e
    @user-wt2sq1bx7e9 ай бұрын

    it was really helpful to understand the concept of provider thank you.

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    You are welcome!

  • @joncov
    @joncov9 ай бұрын

    just to express genuine gratitude and respect all your tuts are perfect, every second used 100%

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Do you prefer if I begin the tutorial without the whole 'Hi, my name is..., welcome to my channel, hit the notification bell, etc.' routine? 😄 Lol, just kidding, I can't stand it when people do that on KZread! It's great that you also appreciate straightforward content. 🙏

  • @joncov

    @joncov

    8 ай бұрын

    @@FlutterMapp it is not only about the straightforward content; you combine thorough understanding with a natural gift to distill what's most important in it, with the effort to prepare the clips that are short but comprehensive can be compared to the communication race engineer to driver in F1 :) max content in min time in unequivocal way

  • @vbk-no4pk
    @vbk-no4pk9 ай бұрын

    Thank for sharing such kind of amazing content with us

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Pleasure, thank you ✌

  • @aisadak
    @aisadak2 ай бұрын

    Thank u so much

  • @ajatajay4877
    @ajatajay48773 ай бұрын

    Life Saver video❤

  • @Engineer-Samibress
    @Engineer-Samibress9 ай бұрын

    Thanks a lot for your time 😊

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    My pleasure 😊

  • @princesekey
    @princesekey3 ай бұрын

    Excellent 👌👌

  • @pranaygsk5045
    @pranaygsk50459 ай бұрын

    Got clarity how provider works, really simplified one on internet!

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Glad it helped 👏

  • @hanifireffas4404
    @hanifireffas44049 ай бұрын

    great content.. thank u philip ♥

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Thanks! Pleasure!

  • @MrAlwandawi
    @MrAlwandawi7 ай бұрын

    you are amazing bro ...

  • @safwanjmuhammed6816
    @safwanjmuhammed68169 ай бұрын

    Perfect explanation 💯💙

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Thank you! 🔥

  • @5ays470
    @5ays4703 ай бұрын

    THANKS!!

  • @artem-ai
    @artem-ai9 ай бұрын

    Thank you very much. Very useful. If possible, please make a tutorial: provider for shop cart

  • @mechul419
    @mechul4198 ай бұрын

    Thank you I get it👌

  • @Socsob
    @Socsob3 ай бұрын

    This was awesome also I love the accent

  • @pradeeps4826
    @pradeeps4826Ай бұрын

    thank you sir

  • @paolabarrios4589
    @paolabarrios45899 ай бұрын

    Hola amigo, hoy me suscribí me encantan tus videos, y recién apenas conozco el canal. Tenes algún video o vas a subir de GETX?

  • @rechi_0054
    @rechi_00543 ай бұрын

    grate explanation. ist there a diffrence in using the Consumer widget ot the read method when listening to the provider

  • 9 ай бұрын

    Good lesson. Teşekkürler, Thank you

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Thank you!

  • @ajatajay4877
    @ajatajay48772 ай бұрын

    loved the video, but how did you navigate between settings page and home page with bottom navigation bar??

  • @kelpindev9150
    @kelpindev91509 ай бұрын

    waw that is really good explanation 😍, can you create a video tutorial with provider too but using rest api ?

  • @tulasireddy6557
    @tulasireddy65579 ай бұрын

    This tutorials was very nice, Please make tutorials on Flutter Bloc and RiverPod also

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    RiverPod is comming, thank you!

  • @pyproger
    @pyproger7 ай бұрын

    nice man

  • @JonnyS569
    @JonnyS5699 ай бұрын

    Thanks for the video. Great work. I think a video about Riverpod and especially the new auto generate function's would be great because I provider is already pretty outdated isn't it?

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Yes a video just like this one about Riverpod is coming 👍

  • @JonnyS569

    @JonnyS569

    9 ай бұрын

    @@FlutterMapp Perfect. Thank you very much ❤️

  • @elitearmedforce

    @elitearmedforce

    9 ай бұрын

    ​@@FlutterMappI am highly looking forward to it.

  • @kishores-ik4zw
    @kishores-ik4zw9 ай бұрын

    I know provider well but I just learned from mistake when I am learning it's to hard for me but your video helps lots of people it's so simple and clean

  • @kishores-ik4zw

    @kishores-ik4zw

    9 ай бұрын

    and explain about consumer that's the next level usage of provider

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Could you please explain why 'Consumer' is the next level of usage? Can't you just use '.watch,' and it will achieve the same result?

  • @kishores-ik4zw

    @kishores-ik4zw

    9 ай бұрын

    you can used to listen to changes in a specific piece of data provided by a ChangeNotifier it's will optimise your code and get better response also @@FlutterMapp

  • @yoto6730

    @yoto6730

    8 ай бұрын

    .watch and Consumer serve the purpose of listening to changes in a provider and triggering rebuilds, but .watch is more direct and concise, especially for simple use cases where you just need the value from the provider. On the other hand, Consumer provides more control over the widget tree that gets rebuilt when the provider changes, making it useful for more complex scenarios where you want to isolate specific parts of your UI.@@FlutterMapp

  • @Shamir-qb1ih

    @Shamir-qb1ih

    11 күн бұрын

    ​@@FlutterMappConsumer will only rebuild the widget we wraps in. But if we use 'watch' the entire widget tree will rebuild, which means for large application, using consumer is the best choice for better performance.

  • @berkaykzgr1933
    @berkaykzgr19339 ай бұрын

    Waiting for Bloc Tutorial and difference between them

  • @manishmg3994
    @manishmg39949 ай бұрын

    need more such videos

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    🙏

  • @mohamednizam5298
    @mohamednizam52986 ай бұрын

    Do you have an example where u teach how to use both provider & sqflite? Planning to?

  • @jandurak
    @jandurak9 ай бұрын

    Thanks

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Pleasure Jandurak 👍

  • @satdevlpr
    @satdevlpr8 ай бұрын

    is this rebuilds the whole page or just the particular widget ( Text widget in case of Counter example )?

  • @zakblacki
    @zakblacki9 ай бұрын

    Thank you very simple, but I suggest you next time to provide more complex example usage. would be nice to have more state management Redux, Bloc, Mobus, Binder. Can you make a video explaining Models json map when creating some app MVC

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Good idea to talk about JSON map models. I will add this to the to-do list. Thank you! 👍

  • @zakblacki

    @zakblacki

    9 ай бұрын

    @@FlutterMapp also consider usage of constructor examples

  • @Lancelot69
    @Lancelot694 ай бұрын

    Why did you use "async" for the first provider's notifyListeners() but not use it for the 2nd one?

  • @charithasds
    @charithasds9 ай бұрын

    Awesome! 🤩 Can you do the same for Riverpod (Provider 2.0)?

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Yes, soon, thank you

  • @chaitanyadamarasingu979
    @chaitanyadamarasingu9799 ай бұрын

    I was searching and found this video OMG its 6 hrs ago

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Lol, hope it was useful 🔥.

  • @twrk139
    @twrk1398 ай бұрын

    Is it better to wrap the MaterialApp with MultiProvider in the build method of the, in your case "MyApp", or inside the runApp call in the main function?

  • @ravi2048

    @ravi2048

    7 ай бұрын

    I wrapped the "MyApp()" inside the "runApp()" function because it was throwing an error and was suggesting me to wrap the "MyApp()" function.

  • @001Debjeet
    @001Debjeet9 ай бұрын

    please make video on riverpod 2 a short but without no counter value

  • @abdullahkhaled6543
    @abdullahkhaled65439 ай бұрын

    👌

  • @WaniTech
    @WaniTech9 ай бұрын

    i am a bit confused, when i first time used Providers to fetch and display the data, the way i used the providers was first create a class which inherits from changenotifier then whereever i have to use the fetched data from the app i just created the instance of the api class(extends changeNotifier) like this final api = Provider.of(context, listen: false); then inside the futurebuilder i called getData() method future: api.getData(), i dont know if this is the right way or not it was my first time using providers however my application was working somehow but my code was a mess, i was using the the getdata method once but i had to use it in two screens to display the data but i dont know why it fetched the data two times or more that made the screen flicker. which way is the right way to use providers the way used it or yours?

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Provider.of(context, listen: false) is the same as using .read 👍 .read is just simple to using in my opinion. You have a simple definition on this provider checklist. fluttermapp.com/provider . 🔥

  • @WaniTech

    @WaniTech

    9 ай бұрын

    Thanks@@FlutterMapp

  • @WaniTech

    @WaniTech

    9 ай бұрын

    by the way i have alot of questions regarding flutter keywords, can i ask you here or somewhere else? for example "context", "key", ".of()"method etc

  • @ThePilli41
    @ThePilli419 ай бұрын

    is there any reason to use provide orver Riverpod? I know its build on the top of it, but its also simpler I would say...

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    The only reason for this tutorial is that the two previous provider tutorials on this channel were terrible (Absolute garbage), so this is the redemption arc, lol. The next one is about Riverpod 🙏.

  • @ThePilli41

    @ThePilli41

    9 ай бұрын

    I see I see. no matter what, I still very much appreciate the video! :) tbh you are the one I have started my flutter journey with, couple months ago ^^ @@FlutterMapp

  • @xD-x-xD

    @xD-x-xD

    9 ай бұрын

    probably best redemption arc then cyberpunk

  • @RandalLSchwartz

    @RandalLSchwartz

    26 күн бұрын

    No, and in fact Remi recommends new projects use Riverpod, not Provider, as Provider is now in "maintenance mode only".

  • @martinseal1987
    @martinseal19879 ай бұрын

    I don't need the explanation simplified I need the implementation simplified 😂

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    lol

  • @RianY2K
    @RianY2K9 ай бұрын

    thank you for tutorial, can you make tutorial about Riverpod provider too?

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Yes, it's the next one on the list 🎉

  • @ShaunyTravels.
    @ShaunyTravels.6 ай бұрын

    More videos 😢please !!!

  • @wezone88
    @wezone889 ай бұрын

    riverpod is wraper this provider?

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    Riverpod is the "newest" version. A tutorial similar to this one will be released.

  • @sofianemaaradji2625
    @sofianemaaradji26259 ай бұрын

    Thnx.first comment 😅

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    First reply 🔥

  • @TrojanPiece
    @TrojanPiece6 ай бұрын

    You haven't showed how you initialized your userNameController variable, so the emulator is giving exception errors everytime now.

  • @martinseal1987
    @martinseal19879 ай бұрын

    I'll stick to inherited widgets

  • @yoto6730
    @yoto67308 ай бұрын

    what is the last icon name

  • @AdhamFaisal875
    @AdhamFaisal875Ай бұрын

    please need link of repo github

  • @caoviet.techlonogy
    @caoviet.techlonogy3 ай бұрын

    Why not show skeleton.dart ???

  • @demojoe28
    @demojoe289 ай бұрын

    Can you link the github repo please 🙏

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    There is no github repo. 📖

  • @jv18creator

    @jv18creator

    9 ай бұрын

    @@FlutterMapp could you please upload the code?

  • @gasfeesofficial3557
    @gasfeesofficial35574 ай бұрын

    good video but simplistic examples don't do the justice to the power of using "Provider" or why someone should use it ... the authors examples could be solved just as easily by using simple state updates because what he is trying to do to explain the usage of Provider is too simplistic. if someone is confused like I was, here is something that will simplify ... Provider is best used for cases where you can have multiple inputs but a single output. Best case scenario is: where you update one widget based on several data-inputs that can invoke a different states for the widget. For example say you are updating a candlestick chart on a screen and are using a charting package/library like syncfusion or fl_chart. But you can't find one API that does it all or you are limited by # of calls from one also, some APIs may give data on one timeframe (1 d) vs. others may give data on other time frames (1 min, 5 min, 15 min etc.). You want to update the same chart widget, which is located on the center of the screen, based on possible changes to these multiple inputs (i.e. different timeframes). Additionally, you may also have a dropdown where the user can select a different instrument (like, BTCUSD, ETHUSD, US500 etc.) ... but you still want the same chart widget to update in the center of the screen. Furthermore, You may have a zoom button that pulls in more data from your API etc. ... Provider does best for these cases ... because you define a main listener (i.e. Consumer i.e. chart widget which comes from a library) .. .and you simply notify that widget when you manipulate it's data candlestick data sources. There are a lot of other approaches to accomplish the same thing too -> instead of using a charting library, you could break your widget down into individual candles and create a synthetic widget made of rectangles and lines. Fetch your data in a specific way -> manipulate your chart or specific candle that you are interested in. That's more of one-input -> update state -> display widget simplified lifecycle. Also, if you have better understanding of server-side/back-end technologies and can control of your data better... you can manipulate the data first and have it ready just as you would update it -> fetch the data -> then pass it into simple state-update widget all at once.

  • @chomanthapa
    @chomanthapa9 ай бұрын

    yo! sexy voice.. great . provider is old can you do riverpod instead. ?

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    100% 👍 Will do this one next.

  • @boulderfailguy
    @boulderfailguy9 ай бұрын

    C'était un ostie d'ordure! Nah just kidding - people complaining about it being too simple cleary didn't listen to the intro.

  • @FlutterMapp

    @FlutterMapp

    9 ай бұрын

    loll. Merci. Ouai c'est vraiment Provider for beginners, just to keep things simple.

  • @juniorlanga4505
    @juniorlanga45055 ай бұрын

    Hahahahaha the tutorial was no garbage 😅

  • @FlutterMapp

    @FlutterMapp

    5 ай бұрын

    lol, thank you Junior!

  • @ForChiddlers
    @ForChiddlers27 күн бұрын

    Good tutorial, but stop using clean code. It makes it almost unreadable

  • @ahmed_alharthi
    @ahmed_alharthi9 ай бұрын

    Part2 is missing

  • @gjlmotea
    @gjlmotea4 ай бұрын

    Nice! but one question why 1:21 user_provider.dart extend "ChangeNotifier" class but the file name call "user_provider.dart"? there are exist "ChangeNotifierProvider" Class in flutter 1:3 I don't know what is that and difference.