Flutter Provider EASY Tutorial
HTML-код
- Опубликовано: 2 июл 2024
- 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
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Visualizer)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
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.
do you have any source pls?
@@wakkowb Speech without authentic source!
thanks @RandalLSchwartz! but I'm wondering what can't Provider do that Riverpod can? care to share?
That's very nice of you providing this information. Thank you so much! For sure, a lot of people appreciate it!
Amazing tutorial, clean and clear.
You made it loook so simple ,hats off
Excellent video! It is succinct and provided the general overview I wanted!
Absolutely loved this. All the other videos were so confusing. Thank you. Hope you do one for Riverpod soon.
Simplest explanation. Kudos
Thank you! It was very helpful!
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.
Glad I could help! Thank you Reaganza 🔥👍
Thank you very much for making this tutorial, you helped me a lot, i appreciate
what a beautiful lesson
Thanks for the amazing video!
Life Saver video❤
Not garbage, good tutorial :))
thanks chief. well put.
Last Line was Insane 😂😂😂😂...btw Great video buddy
Easy to understand , well explained , love it.
Glad to hear that!
Thank u so much
THANKS!!
Really helpful. Thank you again.
You're very welcome!
Excellent 👌👌
This was awesome also I love the accent
thank you sir
you are amazing bro ...
it was really helpful to understand the concept of provider thank you.
You are welcome!
great content.. thank u philip ♥
Thanks! Pleasure!
Thank for sharing such kind of amazing content with us
Pleasure, thank you ✌
Perfect explanation 💯💙
Thank you! 🔥
Thanks a lot for your time 😊
My pleasure 😊
Thank you I get it👌
Amazing video as always man! Manifesting for your to have a BloC tutorial soon!
Thank you Joshua!
Got clarity how provider works, really simplified one on internet!
Glad it helped 👏
Amazing video, thank you for creating one. Now i am waiting for riverpod
Thank you!
Thank you very much. Very useful. If possible, please make a tutorial: provider for shop cart
Good lesson. Teşekkürler, Thank you
Thank you!
Same video for Riverpod please!! Great video
Will do, thank you Berkay
just to express genuine gratitude and respect
all your tuts are perfect, every second used 100%
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 RUclips! It's great that you also appreciate straightforward content. 🙏
@@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
nice man
Waiting for Bloc Tutorial and difference between them
This tutorials was very nice, Please make tutorials on Flutter Bloc and RiverPod also
RiverPod is comming, thank you!
loved the video, but how did you navigate between settings page and home page with bottom navigation bar??
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?
waw that is really good explanation 😍, can you create a video tutorial with provider too but using rest api ?
grate explanation. ist there a diffrence in using the Consumer widget ot the read method when listening to the provider
Thanks
Pleasure Jandurak 👍
need more such videos
🙏
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
and explain about consumer that's the next level usage of provider
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?
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
.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
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?
Yes a video just like this one about Riverpod is coming 👍
@@FlutterMapp Perfect. Thank you very much ❤️
@@FlutterMappI am highly looking forward to it.
Do you have an example where u teach how to use both provider & sqflite? Planning to?
Why did you use "async" for the first provider's notifyListeners() but not use it for the 2nd one?
👌
is this rebuilds the whole page or just the particular widget ( Text widget in case of Counter example )?
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
Good idea to talk about JSON map models. I will add this to the to-do list. Thank you! 👍
@@FlutterMapp also consider usage of constructor examples
Awesome! 🤩 Can you do the same for Riverpod (Provider 2.0)?
Yes, soon, thank you
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?
I wrapped the "MyApp()" inside the "runApp()" function because it was throwing an error and was suggesting me to wrap the "MyApp()" function.
please make video on riverpod 2 a short but without no counter value
More videos 😢please !!!
I was searching and found this video OMG its 6 hrs ago
Lol, hope it was useful 🔥.
I'll stick to inherited widgets
Thnx.first comment 😅
First reply 🔥
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?
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 . 🔥
Thanks@@FlutterMapp
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
I don't need the explanation simplified I need the implementation simplified 😂
lol
riverpod is wraper this provider?
Riverpod is the "newest" version. A tutorial similar to this one will be released.
what is the last icon name
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...
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 🙏.
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
probably best redemption arc then cyberpunk
thank you for tutorial, can you make tutorial about Riverpod provider too?
Yes, it's the next one on the list 🎉
please need link of repo github
Why not show skeleton.dart ???
You haven't showed how you initialized your userNameController variable, so the emulator is giving exception errors everytime now.
Can you link the github repo please 🙏
There is no github repo. 📖
@@FlutterMapp could you please upload the code?
C'était un ostie d'ordure!
Nah just kidding - people complaining about it being too simple cleary didn't listen to the intro.
loll. Merci. Ouai c'est vraiment Provider for beginners, just to keep things simple.
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.
yo! sexy voice.. great . provider is old can you do riverpod instead. ?
100% 👍 Will do this one next.
Hahahahaha the tutorial was no garbage 😅
lol, thank you Junior!
Part2 is missing
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.