Flutter Provider Package In Depth - FutureProvider
Vložit
- čas přidán 27. 07. 2024
- The provider package offers incredibly flexible and powerful state management solutions for Flutter. In this series we take a look at the different kind of providers available in the provider package as well as different ways to import them into our widgets.
In the third part of this series we take a look at FutureProvider as a way of streamlining your UI when awaiting a future from an API or other source.
Github:
github.com/nhandrew/futurepro...
Social Media:
Twitter: @andyjulow - Věda a technologie
Just wanted to say thank you for your provider series. It has been a great resource for me to go through the examples you provide and you explain each step along the way which is brilliant. It's been a few years now but this is as good a tutorial as I have found on the provider package and its various incarnations.
besides the null safety now - this is still wholly applicable. thank you.
Thanks for taking the time to reach out. Glad to hear it is still helpful
I've been struggling for a week trying to understand and get FutureProvider implemented in my app. This video is by far the best explanation and example I've come across. Thanks for your time in putting this together.
Glad it helped
until now this is the best explanation that i found for the provider . thanks @Andy :)
very clear, well paced, simple. great video, thanks.
Best practical example of provider, thank you very much Andy ,👍♥️
Great tutorial. It's been a year or so since I touched flutter and it looks like some things changed since then so I needed a quick run through to get me rolling again and this type of tutorial is perfect. -- Edit, I just saw you have a firestore tutorial as well that you just released which is perfect, because that is precisely what I was planning to learn to use. I greatly appreciate it. 👍
You are amazing Andy Sir. God bless you always :)
Very informative tutorial ! Now i had learned the concept. Thank you 😊.
Very helpful! Could you do a tutorial on complete state management with login and CRUD????
Thanks, As simple and clear as needed!
Thank you so much from this, the truth i just learn flutter / Dart. Join bunch of course here and there, but your video is just straight forward. And it's pretty damn clear sir ..
Cheers!! from Indonesia
Very helpful tutorial, thanks
I really enjoyed watching this, thank you its a great video.
Great video on provider
عمل عظيم، شكرا لك
Very useful.. thanks :)
Nice video! One thing though, you don't need to fetch another request from the api to get the data of each record, cause you already had a list of employee, instead pass the record with index from your list to the next page (employee page).
In general, it's correct, but he has made it for educational purposes.
Smoooth tuts
Tip : If you are not getting suggestions for importing a particular class just drag the cursor to the name of the class that u just typed in & click on the quick fix (the bulb) and there will be an option for importing that particular class if not had imported.
love from india is this approach is good for big project
Thanks for uploading this, subscribed
Great explanation, but what if we want to send userId in url to get list of that user and userId we get using Providers (notifications-provider).
great thanks
Thanks Andy, great content! how would one handle nested json content coming in from the api?
Hi Ron, that probably deserves it's own video, but I did do it for Google Places json in the Google Maps project czcams.com/video/Dme03oxZRU0/video.html between 30:08 and 43:45. There are some packages that will do modeling for you, but I haven't had a chance to dig into them to see how or if they handle nested objects.
Thank you for your tutorial! When i use FutureProvider, in some cases, the build method is called again, and the API is call one more time. Could you suggest me the solution to call the API just one time ?
Error: Could not find the correct Provider above this Home Widget
This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:
If you met this error, check your provider's initialData property. Set the initial data as null then it will be solved.
How can you refresh future provider in stateless widget?
I try to implement the future provider in a search delegate ... but I'm having trouble in updating the query ... The documentation is not the best on pub.dev ... So I am in the point where I type the first letter and it consumes the provider and that's it .... Is there a way to update it, or the Future Provider just creates it and consumes the future and that's it?
Thank you, but bigger fonts please
Hey, great video, is it okay to pass fetchemployee as a static method on the class in the create of the FutureProvider, instead of creating an instance ?
And just a quick question , all this future/stream... providers.... don't you think is better to use just Provider and pass a whole Service Class with streams, and futures inside of it? and access it as Provider.of(context, listen: false); as immutable
Hey Andy, thanks for the detail video. Quick question I'm trying to figure out how you should go about structuring an app, what design pattern do you use if any? if you don't follow a design pattern how do you go about structure your app?
I"m new to Flutter and ideally I'd like to find out from more experiences people what the ideal / most popular design pattern is...
At present when I look at an App this is my ideal flow
Login Screen > Login Provider > Services > call external API | responds back.
Is that the normal flow an app would follow?
I tend to stick to the patterns I picked up from Stephen Grider's Udemy course. It was the second course I took and his architecture has worked well for me. Your flow is what I would consider ideal. Sometimes a stateful widget makes sense, but if you can separate those concerns into a provider or bloc in that second layer I feel like it becomes much easier to maintain. So far I am putting my views in a screens or widgets folder and my backend in a blocs or providers folder. I am starting to feel like it might be easier to organize our applications with the view and backend code grouped together in a folder (for example login/login.dart and login/login_provider.dart), but I haven't yet tried it out in an application.
@@andyjulow4388 What course did you take? I'd been keen to see and potentially enroll. Thanks
@@scottatkinson6339 Here you go, Udemy's course prices fluctuate wildly so check every couple of days and you should be able to get it for under $20. www.udemy.com/course/dart-and-flutter-the-complete-developers-guide/
@@andyjulow4388 awesome, thanks.
hi Andy,
if we handle error in FutureProvider then it stucks on that error
but if we don't handle error it's running smoothly
why ??
Great video, can you make a sqli tutorial and using rest apis and making a offline ready app? In your free time. ? :)
This tutorial is very helpful. Thank you so much for making this video. But one question: "Why not just filter the received data (based on user id) from first api call instead of making another api call? Won't it be better?"
Either that, or pass in the Employee object rather than the id into the EmployeePage. I did a second call just to reinforce the use of FutureProvider.
@@andyjulow4388: Understood. thank you so much again. I like the way you teach.
Hello, thanks a lot for all provider tutorials which are really helpful.
Do you have some knowledge about annotations in Flutter/Dart that you can share with us in new video? There is almost nothing about this topic in documentation/tutorials. Thanks.
Thanks for watching. I've used @required and @override quite a bit but am not super familiar with any others. Were there some in particular you were thinking about.
@@andyjulow4388 I come from Java and Java has lots of annotations so maybe I'm looking for something that isn't even used in Dart/Flutter :D
Hello Andy and thanks for a great tutorial. I just got a problem in the code, though folowed your code all the way. I am not sure if this is a bug or a feature of fatarrow. I used a fat arrow on catchError to print the error.toString(), then I got the red screen of flutter death stating that the provider should be inherited in the top. The error message were not clear. Any idea why?
Thank Daniel. I'm not quite sure on that one. If you are using the arrow, you'll want to take out the curly braces and put it all on the same line, but besides that I'm not sure why you are getting an error there.
I don't know if you know this already or not. You can use "remove all comments" extension to remove all the comments and use the "dart data class generator" for JSON serialization and constructor creation for your model class.
I do, thanks. I try not to use extensions in my tutorials so everyone is at the same starting point.
Has anyone tried running this recently? I suspect something changed with the Provider package, for the life of me I can't get past this error after initializing List employees = Provider.of(context); in home.dart
Error: Could not find the correct Provider above this Home Widget
This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:
Is it because Flutter requires an initialData parameter when setting up the FutureProvider now?
You have to specify FutureProvider in main.dart like this :
return FutureProvider(
create: (context) => employeeService.fetchEmployees(),
initialData: [],
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
),
);
This worked for me !
Did you solve the problem? I met the same issue. I avoided the issue by changing the type of employees variable as List? but this can't call the phone property on Consumer.
Solved it! Please don't mind to my comments.
Just a starter here. But, is FutureProvider related to the Provider Package introduced by Google ?
Welcome. Yes provider was featured in a talk at Google I/O in 2019. There are a number of different flavors of provider featured in the package.
@@andyjulow4388 Can I just use one provider type from that package and use it on my project? Or, I have to use those types of providers in one project?
You can definitely just use one type. In my experience if you are mixing more than one, you might want to rethink your design. I used one app in the first two parts of this series for ChangeNotifierProvider and StreamProvider and things were already getting messy with just the two.
@@andyjulow4388 Thank you so much. I think your FutureProvider example is easier to understand for me as beginner? What do you think? Maybe I would consider FutureProvider solely for my first app ?
I'm partial to using streams out of a BLoC, but if FutureProvider fits your need then go for it. It creates a nice elegant UI and is fairly light on the backend too.
Just a quick question related to the Future feature you are using. If your detail page was another list, would Flutter fetch the complete list every-time you called the Future, or only changes to the new list, and the rest from cache? Been battling with getting a straight answer on this for days. I guess this applies to your initial list as well.
Sorry but I don't see the value in examples like this. 32 minute video to use one method from a package?
Personally, I really appreciate the complete examples that Andy does. There are plenty of videos on CZcams that do a quick conceptual overview, but seeing an app built from start to finish helps me see how Future Provider works in practice.
video is too long :(
@@derencewalk except this video shows up when people are trying to Google the Flutter provider package and learn more about it. If it was a bit more to the point with better structure then you and everyone else will be better off :)
I really appreciate the effort that Andy makes to provide detailed explanations and complete examples.The pace is perfect for beginners and the structure is great in my opinion. I hope you find what you're looking for though.