If you're following along with this tutorial ignore the dispose section. The provider package already calls dispose on the model. All you have to do is override inside the model, but calling dispose again in the base view will cause an exception to be thrown in the code. If you're getting the disposed exception remove the dispose override from the base view.
@@mohabmagdyshokryabdel-hame3203 In the model you want to dispose. Override the dispose in there and provider will call it automatically. If you don't have anything to dispose of in the model then you don't need to put it there.
Thanks man that means a lot. Any feedback would be great, I'm going to be sharing how I use it in larger apps as well to give an idea on the way I keep things maintainable.
@@FilledStacks Thank you for the answer, I want to start my first simple project and I'm not sure if should go with the method with GetIT as the IOC or with the V3 using proxyProvider which is more confusing to me.
@@FilledStacks Thank you sir ! all the solutions are working and there is no big disadvantage using Get It compared to the proxyProvider so I'll give both a try but Get it si definitely simpler.
Thanks man, That's how we all get better. I gained most of my knowledge from my short career as an employee where I asked and gave feedback to my co-workers on a daily basis. It's one of the reasons I always ask for feedback and comments. It guides me to figure out what to share next.
@@FilledStacks You are totally right! I have checked out your final project from Github for this project and checked it out. I noticed that when you go into a post, and then go back to the home view, following error is thrown in console: flutter: Another exception was thrown: A LikeButtonModel was used after being disposed. Are you aware of this problem? I have not modified anything, just ran your code in original. That error is kind of weird, because he is trying to use LikeButtonModel in HomeView. But in HomeView we are not using it at all. I think this has to do something with the overall architecture, but im not sure. Can you clarify about that please. I would really appreciate that :-)
@@cloud5887 Yes, That's because one of the models is registered as a singleton and not a Factory. When all models are registered as Factories that error goes away. The model is being disposed when we navigate away but because a singleton always has one instance it returns the instance that's disposed. Registering it as a Factory should fix that.
@@FilledStacks Yes, I have thought the same thing and replaced it with factories. But unfortunately that leads to other errors (no post is shown anymore on homeView). Maybe it would make sense to make one video about GetIt, and using the existing app as example. I couldn't find a video about that library on youtube. The documentation is quite slim on the official GetIt pub page.
Maybe I'll do something on dependency injection in Flutter. Get_it is just an implementation of a general IoC container pattern. You won't find specific videos for it,but google some dependency injection videos and you'll get the idea. Also, don't get the test app to work. It's not there to work properly, I built it the way it's built to showcase how you handle situations in the architecture. When you get the architecture idea then you can go and apply it to your app.
I implemented your archicture and it was amazing ,but i am a little confused about one thing if i have a screen with multiple widgets (stepper widget if you fimiliar with it) should i create seperate models for each step or i should make a root model and call it with "provider.of(context)" *note : the steps have a lot of common logic
if there's shared logic you can have one model. I make a model for any widget that requires logic. if it's the same logic as another model I'll make a base class with the shared functional and extend that with some custom logic if needed.
Sorry to bother you but i have a problem In one of my screens i needed a global key of type scaffoldstate and pass it to a child view to open the drawer but after i did that the screen never destroyed and it keep calling the models on every build of other screens
hey thanks so much for the tutorial, it's been amazing following along. But say I want to implement a login/logout feature, where the app will redirect to HomeView every time it is opened IF there's a user currently logged into the app (and go to LoginView if there is no user logged in currently). To use the User StreamProvider wrapping the MaterialApp in main.dart could be the way but I don't know how to implement it correctly. Can you elaborate to implement that alongside this whole architecture? Thank you
Hey thanks for checking out the video. I use this setup for custom startup functionality (www.filledstacks.com/snippet/custom-startup-logic-in-flutter)
This reminds me how people use to store data in services with angular 2+. But storing data in services was not the most maintainable approach and ngxs and ngrx was preferred. What if you have 2 widgets on the same screen that are grabbing data from the same service. Then the data is changed in one widget, what happens to the other widget? Is it reactive?
It is. I setup callbacks or a stream to trigger a notifyListener() call in the other widget. All my widgets usually listen to multiple services. It can easily be built into the base model for a widget and the base service so any function call that requires UI sync can fire off a notify event and the listeners will update.
Hey! First of all thanks for the videos, I'm finding them very helpful. One thing that I'd like to know Is how to deal with streams with this type of architecture, I already built a fairly complex app using the Bloc pattern and dealing with streams is really easy. However, It feels cumbersome at times so I'm exploring other options such as provider. More specifically I'm talking about using Firestore as your database and listening for updates (in the form of streams) on objects. Thanks a lot!
Hi @Filledstacks... I got 3 questions if you don't mind answering please; in the PostsService: 1. The method getPostsForUser updates the _posts list directly. Since the service is registered as Singleton, wouldn't that mean that all reference to posts in the app will be overwritten with the posts of a single user? i.e. To maintain the reference of all users, shouldn't we save the result of getPostsForUser in a different list? 2. Assume you want to call the api to add or create a post; how would go about that? You call the api to save it in the backend then save it locally in memory? 3. I'm noticing when returning Futures that you don't actually return anything. Don't you need to return something for the Future?
1. Yes it will. That's the point, when you login with a new user you want all of that users posts.You don't care about a users posts that's not logged in. That's like wanting facebook to keep a reference to all 1 billion users on your device but you're the only one logging in there. 2. I'll do a normal http post to post the data, then I'll fire an event to indicate there's new data and I'll go fetch that from the API. Or I'll add it locally to cache. The solution depends on how the navigation will work. 3. No you don't
Thank you! That would be a very small difference but I can definitely show something like that. Basically the only difference would be that before you make any network request through your service you'll check local storage first. So on the outside your app still functions the same, but when offline you returned cache data or a default response if there's nothing yet. I will add it to my list.
yes, it's not being rebuilt. Most likely the view is not being built again due to improvement in effeciency. I'd suggest looking at the latest stacked architecture and reactive services.
Some clarifications...in the article, it was said "Don't add the dispose into the BaseView. Instead just override your dispose function in your ChangeNotifier, it will be called by provider when it goes out of scope" But on the video, 3:43 you literally add the dispose on baseview, is baseview and changeNotifier different? and when I did that I got "Once you have called dispose() it can no longer be used".
Dispose is an override in your viewmodel. Basically don't add dispose in the view as an override then call dispose on your viewmodel from the dispose in the view. The dispose is built into the viewmodel and will be called automatically.
Hello FilledStacks! Great video, it helped me alot in organizing my code. I have a question, I'm trying to implement a searchfunction in my app that utilizes a placeholder restAPI. I would like to keep using your type of code structure and state management. Would you recommend using the SearchDelegate to achieve this or would you go for another approach? Best regards Red
Hey Red. Thanks, I'm happy to hear that it helped. I don't know what all the functionality is that's required but a search I would just make a service used in the model. The function on the model would call the service and the model would be subscribed to a stream of search results. In the subscription to the stream I would set the results to the model list property and then call notify listeners. Look at my "Building a real time Feedback app" video to see what I mean. It's short so you'll get the idea in there.
@@FilledStacks Hey! I have another question (sorry if im badgering you with questions haha). I noticed that you were caching your posts in PostService but you were caching your comments in CommentsModel. Therefore I'm a bit confused what the difference is between the services and the viewmodels? Is there a reason why you decided to cache posts in PostService and the comments in their viewmodel? Thanks for all of your hard work! :)
Yes. I explain why I do it in the video. We want to share the post data between the home model and the post model so it needs to be in a place where both can access it. The comments doesn't need to be accessed anywhere outside of the comments model.
After building a complex app with this architecture, I keep getting this error. "Unhandled Exception: A (any)Model was used after being disposed." And through my observation, it happens when I run a function in 'onModelReady' on 1 page, but navigate to another page while the onModelReady function is still not done yet. Have you faced similar issue before? or any insights on what might cause it? Thanks boss.
Remove the dispose override or use ChangeNotifier.value. You can also make use of (pub.dev/packages/provider_architecture) which has the base classes without the bug. You can see the latest State & API video on my channel for how I use it.
@FilledStacks I'm a beginner in Flutter trying to grab things as fast as possible so please bear with me. Could you please be more specific about the type of things that need to be disposed in the model? i.e. When would we need to override dispose in the view model?
No problem. The more Flutter developers the better. Here's a short list that might help you. 1. When you've subscribed to a stream 2. When you have registered a listener in another class (function that will be called on an event) 3. When you're keeping anything memort intensive in your model at runtime (images, large sets of data) 4. If there's an object you want to not be alive when the model is disposed then you dispose it, set it to null and you should be fine
Great tutorial, its super helpful. I need dome help, when I click like button to increment likes, then I go back to list of posts, likes are indeed incremented but now when i go to same post view or any other to increment likes i see error: Another exception was thrown: A LikeButtonModel was used after being disposed. I/flutter (28838): Another exception was thrown: A CommentsModel was used after being disposed.
@@FilledStacks so grateful for the quick response. I'm afraid its still happening, in the comment you say to implement dispose in model. Maybe that's what i need to add?
You're welcome :) No you shouldn't add the dispose in the base view. Make sure your LikeButtonModel is registered as a Factory as well. It's not happening my side with those changes so I'd have to see code to help after that. Just check around there for any dispose calls
@@FilledStacks Thank you. I was having the same issue. I have a question regarding factory and lazySingleton: What is the rule of thumb for use one or the other? For example, I'm seeing here that you're declaring all services as lazySingleton (These are the services that will be declared once, such as auth, database, etc...) and all models as a factory. So, it's safe to assume that all models will be declared as factory and all services will be declared as lazySingleton?
Yes. That would be a good guess. I moved away from registering the models in the locator. If you do then most will probably be factory. I use singletons for some models that I need to live forever. Maybe a side drawer that contains app state, a special toolbar that reflects app state, a home view subscribed to multiple events that can fire from the other Factory models etc. So mostly factories, sometimes singletons.
Thanks for the nice tutorial. I am running 002-final. And when I enter userId for the first time and click login, the HomeView does not contain any posts, because fetching of posts occurs for the user provided by User.initial() with id=0. This only happens for the first login after starting the application. How to solve this problem?
Hi, filledstacks. I have faced with a problem, when I establish your architecture. In the StreamProvider section, it raised a a problem: class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return StreamProvider( initialData: User.initial(), create: (context) => locator().userController, child: MaterialApp( the debug says: The return type 'StreamController' isn't a 'Stream', as defined by anonymous closure. I didn't change any code in the services, the codes are the same with that you provide on github. I am using get_it: ^3.1.0 provider: ^4.0.2 I couldn't resolve the problem. I appreciate if you look at this, thanks..
Is it okay to keep data in viewmodel resistering it as singleton? If that's the case, i guess there's no need to keep data in service level. Do i have to register viewmodel as factory in this architecture?
You don't have to register it as a Factory. It can be a Singleton if there's only going to be one. You only keep data at the service level if you want to access the same data (synced up) from multiple models. Otherwise you keep it in the models like in the first part of this tutorial series.
@@FilledStacks Isn't it okay to keep data at the viewmodel even when the data is shared between multiple models if i register it as a singleton? I wonder there would be some problems if i do it this way. Thank you!
@@sheltiesu0827 There won't be a problem, but you won't be able to access the data. Viewmodels should have no reference to each other unless for some reason they're being dynamically constructed in the other viewmodel. So if the posts data only exists in the post model, when you press like in the PostDetails model how will the data in the PostModel update?
@@FilledStacks I guess it's undesirable to call the method of A viewmodel in B viewmodel triggering the notifiListener in A viewmodel. ProxyProvider seems to be a little complicated than your original structure So i want to stick with it. I guess i have to keep the shared data in the service level. Thank you for making it clear.
@@sheltiesu0827 Yeah, Provider only is not as elegant as using get_it. I use my first architecture that I showed using Provider and get_it. It's much easier to maintain even though it might "go against the framework". Its much simpler and the code feels a lot easier to understand.
Great tutorial! Thank you for teaching how to set up an architecture. I have a question. When I click the first post, and after that click the like button to increment likes, and after that go back to list of posts, it seems like the likes count wasn't incremented at first glance. However, when I scroll down the page until the end and then scroll up till the first post, it increments. Why does it work like this?
you're very welcome! Thanks for commenting. The Viewmodel has to tell the UI to rebuild using notifyListeners. I've wrapped all the functionality in this package into a package called stacked. I show that functionality in my latest video, part 2 of the new architecture series.
@@eturkoz You're welcome. It's just a name that relates to FilledStacks. The architecture can also be seen as a stack with views at the top, VM's in the middle and services at the bottom.
@@eturkoz Haha, thanks. I had to give it a name, we've been refering to it as the Provider architecture but technically block is also a provider architecture since it uses Provider to provide blocks where they are required.
Hi FilledStacks Great video, it helped a lot in understanding the architecture, I followed almost all the series of architecture its great but i have a question, it would be great if you can help me out in this and that is using "get_it" and "provider" posts are not changing likes count on home screen unless you scroll to bottom, i have read all the comments and tried everything but it just doesn't work, if you can provide the latest code where everything works with "get_it" and "provider" that would be great, and i have already tried "010-provider-architecture", "012-provider-architecture-pt2" and they doesn't update counts on home screen. Looking forward for your response. Thank you.
You can use either a callback function or a mechanism similar to the reactive services that i show in the stacked series part 2. If you've watched it then you can see how that works. basically call notifyListeners in your service and it'll rebuild all viewmodels ui that's listening to it.
@@FilledStacks I have been experimenting with code of stacked series part 2 and in that also facing the same issue , current UI screen is rebuilding and updating instantly on calling notifyListeners but when we go back then nothing changes on Home screen and if we scroll to bottom then Home screen is rebuilding, I'm new in flutter so i might be missing something, it would be great if you can guide us what's the issue and how can we overcome this that would be a great help to all the people who is still facing this problem. You are the person with great concepts about architecture and i want to follow this architecture to keep things maintainable , so i'll be eagerly waiting for your response on this. Thank you for all the tutorials :)
@@ALIHAIDER-or9dw Hey, that's what reactive services are for. I show that in part 2 of stacked architecture series. if your viewmodel is listening to the service, no matter what viewmodel it is. If it's still alive and you call notifyListeners in the service the viewmodel will rebuild. Unless my unit tests are broken I know for a fact this works. I use it in a lot of application we're building every day. There's a few things you can check to see if you're using it right. 1. You supplied the service in the viewmodel to the reactiveServices property. 2. Your service uses the ReactiveService mixin 3. You're calling notifyListeners in your Service when you want it to update. If you're doing all that please make an example repo where it doesn't work and post it with an issue on the stacked git repo so that I can take a look at it.
@@FilledStacks Yes things makes a lot of sense now, I'll try again with new code and hope it works this time otherwise i'll make a example repo so you can look at it, Thank you so much, I really appreciate that you are super helpful :)
Thanks bro for your great effort, so I should do that only and then my model will be disposed by the framework @override void dispose() { super.dispose(); } I added these two lines in my basemodel that extend ChangeNotifier tell me if something needs to be added or I did anything wrong
You don't need to add that. You only override if you want to dispose something. If you don't have anything to dispose then there's no point in overriding the dispose method. If you're just calling the super then you don't have to do anything. That's what it will do anyway.
@@FilledStacks so if we have a model that takes its data from firestore as your firebase example. I should Stop listening to snapshot updates in cloud firestore so adding this line is a must to cancel the subscription to my snapshot in dispose method is that what I should do? // the below line is used to cancel the subscription. I put it inside on dispose method _firebaseService.categoryFood.listen(_onStatsUpdateds).cancel();
@@mohabmagdyshokryabdel-hame3203 Yes. If you have a stream that you want to stop listening to then you'll cancel that in the dispose override. The code you have that won't do that because you're subscribing and then disposing immediately. You have to save the result of the listen call and then cancel that in the dispose.
@@FilledStacksI just did as what you did in your firebase video I already listened to update, then change the state according to the returned data from firebase and then I added the above line in dispose method which should be called when I no longer listening to the stream. did I miss anything? sorry about asking a lot of questions I appreciate your help
The only way to cancel a stream is to keep the subscription in a variable and then cancel it. Google how to cancel a a stream in dart and you'll see what I'm talking about. Everything else is fine. I never exposed the streams because i used singleton models that should never dispose the stream.
Thanks for the tutorial, this is the best Flutter architecture i found. But I have some questions for you. First, when I put print statement in HomeView build method it fires immediately when app starts (LoginView). I think this is not normal behaviour? Second, when i click like button on PostView screen, number of likes are changed but when i go back to HomeView screen, number of likes are not changing before I start scrolling list of posts?
Thanks man. I appreciate the kind words. This is probably due to some new changes. This video is 1 year old by now. The home view should only be printed when it's constructed. Which is in the router when you navigate to the home view. I suspect your home view is pushed before the login view due to a bug with the router and putting "/" infront of the path name. In terms of the likes not changing. Make sure it's requesting the data from the service when you get back to the view. It might not rebuild. If that's the case you'll have to fire notifylisteners manually when you get back
Hi @Filledstacks. I'm trying to implement an example using your architecture but I've been struggling for 2 days with a weirdo bug. I'm posting the main snapshots of the code here. Everything else should be setup as per your tutorials... I would be really grateful if u can spot the error: // fake api file class FakeUsersApi implements UsersApi { List _users = []; // _users are initialized with about 100 user somewhere else but skipped for brevity @override Future getUsersForRole(Role userRole) async { await Future.delayed(Duration(seconds: 1)); List usersForRole = []; usersForRole = _users.where((user) => user.role == userRole).toList(); }} // service file class UsersService { UsersApi _api = locator(); List _users = []; List get users => _users; Future getUsersForRole(Role userRole) async { _users = await _api.getUsersForRole(userRole); }} // viewmodel file class ClientsScreenModel extends BaseModel { UsersService _usersService = locator(); Future getClients() async { loading = LoadingState.Busy; await _usersService.getUsersForRole(Role.Client); loading = LoadingState.Idle; }} // view file class ClientsScreen extends StatelessWidget { @override Widget build(BuildContext context) { return BaseView( builder: (context, model, child) => Scaffold( appBar: AppBar(title: Text('Client')), drawer: AppDrawer(), body: FutureBuilder( future: model.getClients(), builder: (context, snapshot) { if (!snapshot.hasData) return const Text('Loading...'); return ListView.builder( itemCount: snapshot.data.length, itemBuilder: (context, i) => ClientListItem(snapshot.data[i]), ); }), ), ); }} Whatever I do I keep on getting this error, only when I navigate to the Clients Screen: The following assertion was thrown while dispatching notifications for ClientsScreenModel: setState() or markNeedsBuild() called during build. ... The ClientsScreenModel sending notification was: Instance of 'ClientsScreenModel'
I won't be able to look at this code and help you out man sorry. It's not easy to read, maybe come over to the slack and if i get some time I'll look at it. Slack it at the top of any post on my website.
@@FilledStacks Thanks, for responding. Also, my HomeView does not update with the posts likes until I manually hot reload. Do you have any idea if I could have done or omitted something to cause this?
Damn so much cleaner than using provider. I really don't like the boilerplate which comes with having a provider that needs access to another provider. ProxyProvider is just ugly.
I agree with you 100%. I couldn't stand using the proxy provider. Especially when I had multiple dependencies. Get_it worked out better in the long run
Too dense content with fast prez. Could you please take time and consider explaining a bit slower so we can follow up with you? Great content by the way, I'm subscribing. Thanks a lot.
You're very welcome, I'm happy you got value from it. I don't plan on changing much with the format. The complaints has become less since these videos came out, which is about 2 years ago. Watch the newer app setup videos and see if it's still the same.
If you're following along with this tutorial ignore the dispose section. The provider package already calls dispose on the model. All you have to do is override inside the model, but calling dispose again in the base view will cause an exception to be thrown in the code.
If you're getting the disposed exception remove the dispose override from the base view.
hey Dude just need more explanation on that I don't know yet where should I put dispose method in the code
@@mohabmagdyshokryabdel-hame3203 In the model you want to dispose. Override the dispose in there and provider will call it automatically. If you don't have anything to dispose of in the model then you don't need to put it there.
@@FilledStacks Thanks bro, its was freaking awesome !!!
@@shivashankar28 happy to hear that :D
what model are you pertaining to? viewmodel or basemodel?
coming from world where DI/IOC is the thing .....with flutter your architecture is the best i have seen lately in #flutter..........Thank You!
Thank you for the Feedback. I appreciate it. Happy to hear I could help.
Extremely helpful as always :)
That's very good to hear 😅 thanks for the feedback
You are the man, this is the best architecture.
Thanks man that means a lot. Any feedback would be great, I'm going to be sharing how I use it in larger apps as well to give an idea on the way I keep things maintainable.
@@FilledStacks How to reload an the View based on the global state change?
Put the global state into a stream and subscribe to it then call notifilisteners in the sub
very good and extremely helpful..
Thanks for the feedback 🙏
Super helpful for a newcomer like me to flutter and state management world ! Thanks
Awesome. I'm happy it helped you get a better understanding of it.
@@FilledStacks Thank you for the answer, I want to start my first simple project and I'm not sure if should go with the method with GetIT as the IOC or with the V3 using proxyProvider which is more confusing to me.
@@peace2941 You should definitely use the one that is less confusing.
@@FilledStacks Thank you sir ! all the solutions are working and there is no big disadvantage using Get It compared to the proxyProvider so I'll give both a try but Get it si definitely simpler.
I love how you created that video based on the community responses. Thx bruv
Thanks man, That's how we all get better. I gained most of my knowledge from my short career as an employee where I asked and gave feedback to my co-workers on a daily basis. It's one of the reasons I always ask for feedback and comments. It guides me to figure out what to share next.
@@FilledStacks You are totally right!
I have checked out your final project from Github for this project and checked it out. I noticed that when you go into a post, and then go back to the home view, following error is thrown in console:
flutter: Another exception was thrown: A LikeButtonModel was used after being disposed.
Are you aware of this problem? I have not modified anything, just ran your code in original.
That error is kind of weird, because he is trying to use LikeButtonModel in HomeView. But in HomeView we are not using it at all. I think this has to do something with the overall architecture, but im not sure. Can you clarify about that please. I would really appreciate that :-)
@@cloud5887 Yes, That's because one of the models is registered as a singleton and not a Factory. When all models are registered as Factories that error goes away. The model is being disposed when we navigate away but because a singleton always has one instance it returns the instance that's disposed. Registering it as a Factory should fix that.
@@FilledStacks Yes, I have thought the same thing and replaced it with factories. But unfortunately that leads to other errors (no post is shown anymore on homeView).
Maybe it would make sense to make one video about GetIt, and using the existing app as example. I couldn't find a video about that library on youtube. The documentation is quite slim on the official GetIt pub page.
Maybe I'll do something on dependency injection in Flutter. Get_it is just an implementation of a general IoC container pattern. You won't find specific videos for it,but google some dependency injection videos and you'll get the idea. Also, don't get the test app to work. It's not there to work properly, I built it the way it's built to showcase how you handle situations in the architecture. When you get the architecture idea then you can go and apply it to your app.
great tutorial and the best choice for the average programmer to start with .
Thank you man. Hopefully we get you from average to professional 😬
I implemented your archicture and it was amazing ,but i am a little confused about one thing
if i have a screen with multiple widgets (stepper widget if you fimiliar with it) should i create seperate models for each step or i should make a root model and call it with "provider.of(context)"
*note : the steps have a lot of common logic
if there's shared logic you can have one model. I make a model for any widget that requires logic. if it's the same logic as another model I'll make a base class with the shared functional and extend that with some custom logic if needed.
Thanks for your time ♥️
Sorry to bother you but i have a problem
In one of my screens i needed a global key of type scaffoldstate and pass it to a child view to open the drawer but after i did that the screen never destroyed and it keep calling the models on every build of other screens
hey thanks so much for the tutorial, it's been amazing following along. But say I want to implement a login/logout feature, where the app will redirect to HomeView every time it is opened IF there's a user currently logged into the app (and go to LoginView if there is no user logged in currently). To use the User StreamProvider wrapping the MaterialApp in main.dart could be the way but I don't know how to implement it correctly. Can you elaborate to implement that alongside this whole architecture? Thank you
Hey thanks for checking out the video. I use this setup for custom startup functionality (www.filledstacks.com/snippet/custom-startup-logic-in-flutter)
This reminds me how people use to store data in services with angular 2+. But storing data in services was not the most maintainable approach and ngxs and ngrx was preferred. What if you have 2 widgets on the same screen that are grabbing data from the same service. Then the data is changed in one widget, what happens to the other widget? Is it reactive?
It is. I setup callbacks or a stream to trigger a notifyListener() call in the other widget. All my widgets usually listen to multiple services. It can easily be built into the base model for a widget and the base service so any function call that requires UI sync can fire off a notify event and the listeners will update.
Hey! First of all thanks for the videos, I'm finding them very helpful. One thing that I'd like to know Is how to deal with streams with this type of architecture, I already built a fairly complex app using the Bloc pattern and dealing with streams is really easy. However, It feels cumbersome at times so I'm exploring other options such as provider. More specifically I'm talking about using Firestore as your database and listening for updates (in the form of streams) on objects. Thanks a lot!
Hey. Watch my "build a realtime feedback app" video. I use this architecture and firebase with streams.
Hi @Filledstacks... I got 3 questions if you don't mind answering please; in the PostsService:
1. The method getPostsForUser updates the _posts list directly. Since the service is registered as Singleton, wouldn't that mean that all reference to posts in the app will be overwritten with the posts of a single user? i.e. To maintain the reference of all users, shouldn't we save the result of getPostsForUser in a different list?
2. Assume you want to call the api to add or create a post; how would go about that? You call the api to save it in the backend then save it locally in memory?
3. I'm noticing when returning Futures that you don't actually return anything. Don't you need to return something for the Future?
1. Yes it will. That's the point, when you login with a new user you want all of that users posts.You don't care about a users posts that's not logged in. That's like wanting facebook to keep a reference to all 1 billion users on your device but you're the only one logging in there.
2. I'll do a normal http post to post the data, then I'll fire an event to indicate there's new data and I'll go fetch that from the API. Or I'll add it locally to cache. The solution depends on how the navigation will work.
3. No you don't
@@FilledStacks Thanks man... Much appreciated...
Thank you Sir, very helpful tuto, can i use Provider state managment for big or large projects ?
Yes. Part one of this tutorial shows you how to do that 😊
@@FilledStacks Thank you so much
Thank you for being awesome . can you make a video on how to manage an app using provider online and offline
Thank you! That would be a very small difference but I can definitely show something like that. Basically the only difference would be that before you make any network request through your service you'll check local storage first. So on the outside your app still functions the same, but when offline you returned cache data or a default response if there's nothing yet. I will add it to my list.
Thank you i Will apperciate that.
Mine does not work properly :/ The likes are increased but the home has no change until I scroll down and up. Does anyone know why?
yes, it's not being rebuilt. Most likely the view is not being built again due to improvement in effeciency. I'd suggest looking at the latest stacked architecture and reactive services.
facing the same problem. remaining things are fine
Some clarifications...in the article, it was said
"Don't add the dispose into the BaseView. Instead just override your dispose function in your ChangeNotifier, it will be called by provider when it goes out of scope"
But on the video, 3:43 you literally add the dispose on baseview, is baseview and changeNotifier different?
and when I did that I got "Once you have called dispose() it can no longer be used".
Dispose is an override in your viewmodel. Basically don't add dispose in the view as an override then call dispose on your viewmodel from the dispose in the view.
The dispose is built into the viewmodel and will be called automatically.
Hello FilledStacks! Great video, it helped me alot in organizing my code.
I have a question, I'm trying to implement a searchfunction in my app that utilizes a placeholder restAPI. I would like to keep using your type of code structure and state management. Would you recommend using the SearchDelegate to achieve this or would you go for another approach?
Best regards
Red
Hey Red. Thanks, I'm happy to hear that it helped. I don't know what all the functionality is that's required but a search I would just make a service used in the model. The function on the model would call the service and the model would be subscribed to a stream of search results. In the subscription to the stream I would set the results to the model list property and then call notify listeners. Look at my "Building a real time Feedback app" video to see what I mean. It's short so you'll get the idea in there.
@@FilledStacks Wow! Thanks for the quick response, I'll def check out your vid! Thanks! :)
@@FilledStacks Hey! I have another question (sorry if im badgering you with questions haha). I noticed that you were caching your posts in PostService but you were caching your comments in CommentsModel. Therefore I'm a bit confused what the difference is between the services and the viewmodels? Is there a reason why you decided to cache posts in PostService and the comments in their viewmodel?
Thanks for all of your hard work! :)
Yes. I explain why I do it in the video. We want to share the post data between the home model and the post model so it needs to be in a place where both can access it. The comments doesn't need to be accessed anywhere outside of the comments model.
After building a complex app with this architecture, I keep getting this error.
"Unhandled Exception: A (any)Model was used after being disposed."
And through my observation, it happens when I run a function in 'onModelReady' on 1 page, but navigate to another page while the onModelReady function is still not done yet.
Have you faced similar issue before? or any insights on what might cause it?
Thanks boss.
Remove the dispose override or use ChangeNotifier.value. You can also make use of (pub.dev/packages/provider_architecture) which has the base classes without the bug. You can see the latest State & API video on my channel for how I use it.
@FilledStacks I'm a beginner in Flutter trying to grab things as fast as possible so please bear with me. Could you please be more specific about the type of things that need to be disposed in the model? i.e. When would we need to override dispose in the view model?
No problem. The more Flutter developers the better. Here's a short list that might help you.
1. When you've subscribed to a stream
2. When you have registered a listener in another class (function that will be called on an event)
3. When you're keeping anything memort intensive in your model at runtime (images, large sets of data)
4. If there's an object you want to not be alive when the model is disposed then you dispose it, set it to null and you should be fine
@@FilledStacks got that. Thanks for the detailed clarification.
Great tutorial, its super helpful. I need dome help, when I click like button to increment likes, then I go back to list of posts,
likes are indeed incremented but now when i go to same post view or any other to increment likes i see error:
Another exception was thrown: A LikeButtonModel was used after being disposed.
I/flutter (28838): Another exception was thrown: A CommentsModel was used after being disposed.
Hi, remove the dispose logic from the BaseView. Read the pinned comment to see the why.
@@FilledStacks so grateful for the quick response. I'm afraid its still happening, in the comment you say to implement dispose in model. Maybe that's what i need to add?
You're welcome :) No you shouldn't add the dispose in the base view. Make sure your LikeButtonModel is registered as a Factory as well. It's not happening my side with those changes so I'd have to see code to help after that. Just check around there for any dispose calls
@@FilledStacks Thank you. I was having the same issue.
I have a question regarding factory and lazySingleton: What is the rule of thumb for use one or the other?
For example, I'm seeing here that you're declaring all services as lazySingleton (These are the services that will be declared once, such as auth, database, etc...) and all models as a factory.
So, it's safe to assume that all models will be declared as factory and all services will be declared as lazySingleton?
Yes. That would be a good guess. I moved away from registering the models in the locator. If you do then most will probably be factory. I use singletons for some models that I need to live forever. Maybe a side drawer that contains app state, a special toolbar that reflects app state, a home view subscribed to multiple events that can fire from the other Factory models etc. So mostly factories, sometimes singletons.
Thanks for the nice tutorial. I am running 002-final. And when I enter userId for the first time and click login, the HomeView does not contain any posts, because fetching of posts occurs for the user provided by User.initial() with id=0. This only happens for the first login after starting the application. How to solve this problem?
That happens because of lazy loading which was added a few months after releasing this video. set lazy to false for your provider.
@@FilledStacks It works. Thank you very much!
i was facing the whole problem and tried too many things to make it to work but I couldn't until I found this comment, so thanks
Hi, filledstacks. I have faced with a problem, when I establish your architecture. In the StreamProvider section, it raised a a problem:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamProvider(
initialData: User.initial(),
create: (context) => locator().userController,
child: MaterialApp(
the debug says: The return type 'StreamController' isn't a 'Stream', as defined by anonymous closure.
I didn't change any code in the services, the codes are the same with that you provide on github.
I am using
get_it: ^3.1.0
provider: ^4.0.2
I couldn't resolve the problem. I appreciate if you look at this, thanks..
.userController.stream should work. You're supplying a controller. It's expecting a stream
Is it okay to keep data in viewmodel resistering it as singleton? If that's the case, i guess there's no need to keep data in service level. Do i have to register viewmodel as factory in this architecture?
You don't have to register it as a Factory. It can be a Singleton if there's only going to be one. You only keep data at the service level if you want to access the same data (synced up) from multiple models. Otherwise you keep it in the models like in the first part of this tutorial series.
@@FilledStacks Isn't it okay to keep data at the viewmodel even when the data is shared between multiple models if i register it as a singleton? I wonder there would be some problems if i do it this way. Thank you!
@@sheltiesu0827 There won't be a problem, but you won't be able to access the data. Viewmodels should have no reference to each other unless for some reason they're being dynamically constructed in the other viewmodel. So if the posts data only exists in the post model, when you press like in the PostDetails model how will the data in the PostModel update?
@@FilledStacks I guess it's undesirable to call the method of A viewmodel in B viewmodel triggering the notifiListener in A viewmodel. ProxyProvider seems to be a little complicated than your original structure So i want to stick with it. I guess i have to keep the shared data in the service level. Thank you for making it clear.
@@sheltiesu0827 Yeah, Provider only is not as elegant as using get_it. I use my first architecture that I showed using Provider and get_it. It's much easier to maintain even though it might "go against the framework". Its much simpler and the code feels a lot easier to understand.
Great tutorial! Thank you for teaching how to set up an architecture. I have a question. When I click the first post, and after that click the like button to increment likes, and after that go back to list of posts, it seems like the likes count wasn't incremented at first glance. However, when I scroll down the page until the end and then scroll up till the first post, it increments. Why does it work like this?
you're very welcome! Thanks for commenting. The Viewmodel has to tell the UI to rebuild using notifyListeners. I've wrapped all the functionality in this package into a package called stacked. I show that functionality in my latest video, part 2 of the new architecture series.
@@FilledStacks I was about to watch the videos related to stacked package. Thanks for your efforts. By the way, "Why Stacked?"
@@eturkoz You're welcome. It's just a name that relates to FilledStacks. The architecture can also be seen as a stack with views at the top, VM's in the middle and services at the bottom.
@@FilledStacks Ah, got it. Cool name! :)
@@eturkoz Haha, thanks. I had to give it a name, we've been refering to it as the Provider architecture but technically block is also a provider architecture since it uses Provider to provide blocks where they are required.
lol its so funny when u say builder lol.... thanks for tuts...
haha 😅you know how much I laugh at my pronunciation while I'm editing. Thanks for watching 😆
Hi FilledStacks Great video, it helped a lot in understanding the architecture, I followed almost all the series of architecture its great but i have a question, it would be great if you can help me out in this and that is using "get_it" and "provider" posts are not changing likes count on home screen unless you scroll to bottom, i have read all the comments and tried everything but it just doesn't work, if you can provide the latest code where everything works with "get_it" and "provider" that would be great, and i have already tried "010-provider-architecture", "012-provider-architecture-pt2" and they doesn't update counts on home screen. Looking forward for your response.
Thank you.
You can use either a callback function or a mechanism similar to the reactive services that i show in the stacked series part 2. If you've watched it then you can see how that works. basically call notifyListeners in your service and it'll rebuild all viewmodels ui that's listening to it.
@@FilledStacks I have been experimenting with code of stacked series part 2 and in that also facing the same issue , current UI screen is rebuilding and updating instantly on calling notifyListeners but when we go back then nothing changes on Home screen and if we scroll to bottom then Home screen is rebuilding, I'm new in flutter so i might be missing something, it would be great if you can guide us what's the issue and how can we overcome this that would be a great help to all the people who is still facing this problem. You are the person with great concepts about architecture and i want to follow this architecture to keep things maintainable , so i'll be eagerly waiting for your response on this.
Thank you for all the tutorials :)
@@ALIHAIDER-or9dw Hey, that's what reactive services are for. I show that in part 2 of stacked architecture series. if your viewmodel is listening to the service, no matter what viewmodel it is. If it's still alive and you call notifyListeners in the service the viewmodel will rebuild. Unless my unit tests are broken I know for a fact this works. I use it in a lot of application we're building every day. There's a few things you can check to see if you're using it right.
1. You supplied the service in the viewmodel to the reactiveServices property.
2. Your service uses the ReactiveService mixin
3. You're calling notifyListeners in your Service when you want it to update.
If you're doing all that please make an example repo where it doesn't work and post it with an issue on the stacked git repo so that I can take a look at it.
@@FilledStacks Yes things makes a lot of sense now, I'll try again with new code and hope it works this time otherwise i'll make a example repo so you can look at it, Thank you so much, I really appreciate that you are super helpful :)
@@ALIHAIDER-or9dw No problem. Hopefully it works :)
Thanks bro for your great effort, so I should do that only and then my model will be disposed by the framework
@override
void dispose() {
super.dispose();
} I added these two lines in my basemodel that extend ChangeNotifier tell me if something needs to be added or I did anything wrong
You don't need to add that. You only override if you want to dispose something. If you don't have anything to dispose then there's no point in overriding the dispose method. If you're just calling the super then you don't have to do anything. That's what it will do anyway.
@@FilledStacks so if we have a model that takes its data from firestore as your firebase example. I should Stop listening to snapshot updates in cloud firestore so adding this line is a must to cancel the subscription to my snapshot in dispose method is that what I should do?
// the below line is used to cancel the subscription. I put it inside on dispose method
_firebaseService.categoryFood.listen(_onStatsUpdateds).cancel();
@@mohabmagdyshokryabdel-hame3203 Yes. If you have a stream that you want to stop listening to then you'll cancel that in the dispose override. The code you have that won't do that because you're subscribing and then disposing immediately. You have to save the result of the listen call and then cancel that in the dispose.
@@FilledStacksI just did as what you did in your firebase video I already listened to update, then change the state according to the returned data from firebase and then I added the above line in dispose method which should be called when I no longer listening to the stream. did I miss anything? sorry about asking a lot of questions I appreciate your help
The only way to cancel a stream is to keep the subscription in a variable and then cancel it. Google how to cancel a a stream in dart and you'll see what I'm talking about. Everything else is fine. I never exposed the streams because i used singleton models that should never dispose the stream.
Thanks for the tutorial, this is the best Flutter architecture i found. But I have some questions for you. First, when I put print statement in HomeView build method it fires immediately when app starts (LoginView). I think this is not normal behaviour? Second, when i click like button on PostView screen, number of likes are changed but when i go back to HomeView screen, number of likes are not changing before I start scrolling list of posts?
Thanks man. I appreciate the kind words. This is probably due to some new changes. This video is 1 year old by now. The home view should only be printed when it's constructed. Which is in the router when you navigate to the home view. I suspect your home view is pushed before the login view due to a bug with the router and putting "/" infront of the path name.
In terms of the likes not changing. Make sure it's requesting the data from the service when you get back to the view. It might not rebuild. If that's the case you'll have to fire notifylisteners manually when you get back
Were you able to fix the like button behaviour?
@@VineetGandham With the new architecture you use a reactive service that updates the viewmodel when you indicate notifylisteners in the service.
Hi @Filledstacks. I'm trying to implement an example using your architecture but I've been struggling for 2 days with a weirdo bug. I'm posting the main snapshots of the code here. Everything else should be setup as per your tutorials... I would be really grateful if u can spot the error:
// fake api file
class FakeUsersApi implements UsersApi {
List _users = []; // _users are initialized with about 100 user somewhere else but skipped for brevity
@override Future getUsersForRole(Role userRole) async {
await Future.delayed(Duration(seconds: 1));
List usersForRole = [];
usersForRole = _users.where((user) => user.role == userRole).toList();
}}
// service file
class UsersService {
UsersApi _api = locator();
List _users = [];
List get users => _users;
Future getUsersForRole(Role userRole) async {
_users = await _api.getUsersForRole(userRole);
}}
// viewmodel file
class ClientsScreenModel extends BaseModel {
UsersService _usersService = locator();
Future getClients() async {
loading = LoadingState.Busy;
await _usersService.getUsersForRole(Role.Client);
loading = LoadingState.Idle;
}}
// view file
class ClientsScreen extends StatelessWidget {
@override Widget build(BuildContext context) {
return BaseView(
builder: (context, model, child) => Scaffold(
appBar: AppBar(title: Text('Client')),
drawer: AppDrawer(),
body: FutureBuilder(
future: model.getClients(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, i) => ClientListItem(snapshot.data[i]),
); }), ), ); }}
Whatever I do I keep on getting this error, only when I navigate to the Clients Screen:
The following assertion was thrown while dispatching notifications for ClientsScreenModel:
setState() or markNeedsBuild() called during build.
...
The ClientsScreenModel sending notification was: Instance of 'ClientsScreenModel'
I won't be able to look at this code and help you out man sorry. It's not easy to read, maybe come over to the slack and if i get some time I'll look at it. Slack it at the top of any post on my website.
@@FilledStacks No problem man, thanks for your offer... I sorted it out... I love your tutorials... super helpful. Please keep it up.
With the cleaner provider syntax as described ua-cam.com/video/BulIREvHBWg/v-deo.html, do you think right now it would be better to use only provider.
To me it's personally not better. It's actually not as readable as I thought it would be.
@@FilledStacks Thanks, for responding. Also, my HomeView does not update with the posts likes until I manually hot reload. Do you have any idea if I could have done or omitted something to cause this?
Damn so much cleaner than using provider. I really don't like the boilerplate which comes with having a provider that needs access to another provider. ProxyProvider is just ugly.
I agree with you 100%. I couldn't stand using the proxy provider. Especially when I had multiple dependencies. Get_it worked out better in the long run
Thank you. Get it is the way to go. The rest just don't cut it for me.
Agreed. Toooooo much code. Get it keeps things nice easy to read.
@@FilledStacks I even tried Kiwi but still got back to get it. thanks for the video.
@@gmc254quads6 Oooooh, that reminds me. I need to see if there's anything nice to use in Kiwi and write something on that.
your twitter account please
Hi thanks for watching. twitter.com/filledstacks
Too dense content with fast prez. Could you please take time and consider explaining a bit slower so we can follow up with you? Great content by the way, I'm subscribing. Thanks a lot.
You're very welcome, I'm happy you got value from it. I don't plan on changing much with the format. The complaints has become less since these videos came out, which is about 2 years ago. Watch the newer app setup videos and see if it's still the same.