hahaha, It is quite a lot to take in which why I wanted to break it into the specific sections so you can always reference it as you're working. I'm happy you find it useful
I very rarely comment on videos. But I have to thank you for your work man. You saved me a lot of time. Way more better SM than Bloc. And I have to say that you reply for every comment on your videos. That is so kind of you. You are my idol 🙌🏽
Hey hey, thank you very much for leaving the comment. I appreciate it. I struggled with BLoC and the others that were available at the time so I had to make sure no one else struggles as well :) I'm very happy to hear you appreciate my efforts. And good luck with stacked. If you want some discussions around it we have a slack with 2000 flutter devs that discuss stacked work. join.slack.com/t/filledstacks/shared_invite/zt-mcw04u5t-dTeyH0lPONuzd9i0osk9Gw
Your flutter tutorials are the best sir, please keep sharing. Sorted out a ton of housekeeping issues on my app thanks to the architectural insights you brought to light. Lots of appreciation, thank you.
Sup Tendai 👊 You're very welcome. I'm so happy I could help you improve your architecture for your application. Thank you for leaving a comment and letting me know. I'll try my best to keep sharing information like this.
It feels good to always come back to filedStacks tutorial. I was having issues catching errors from my Future methods. I spent few hours of today(4 June 2022) stepping into 'Stacked' source code. I read through a few classes like BaseViewModel, DynamicSourceViewModel, MultipleFutureViewModel, and FutureViewModel. By the time I finish, the whole implementation was clear to me, and as well I learned how to write clean code from reading your doc. Thanks to filledStacks team.
Thank you! You're life saviour. I've been developing/maintaining production apps using BLoC architecture and I find that it is very messy as I progress. The tutorial you've shown is easy to understand despite that I'm a beginner level, maybe it's due to the code readability and clean. Do please make video for the real use case of services. Subscribed & Liked!
That's great to know Luqman! I appreciate the detailed feedback. I had the same experience with my short dive into BLoC when I first started. This made me take on the task of creating a better production level application architecture for all the client apps that I build. I'm happy to hear it helped you as well. The services video will hopefully be coming out this week.
Would love to learn more about your thoughts on best practices implementing services. Currently using it for things such as an audio player and navigation and would be great to how you go about configuring these things yourself. Great video as always! Thank you 🙌🏽
@@wickedgummybear3104 Awesome. Services is winning by far. I'm excited to write it all down. I think it'll be great to get a clear guide on it for myself as well.
Hi Dane, I am following along your videos since your provider architecture tutorial , and I already finished building production ready app using provider architecture. Now, this architecture looks very clear and neat and seems to be easy maintainable if app grows in future. Hope I can refactor the existing application to this architecture. Thank you Dane for your hard efforts for making such a wonderful video tutorials. Look forward to watch more videos of you using stacked architecture using real world example.
Hey Syed! I'm happy that you've used provider architecture, you'll enjoy the upgrade we've done in stacked. It's very fun to use and makes the code pretty clean. I hope that every video I make is a real world example, because the code comes directly from my code that I write for clients :D I'll try my best to keep making more.
Finally, the wait is over. Damn this TH-cam always forgot me to send notifications. I'm really late this time. By the way as always your videos are the best. Thanks a lot. Love you 3000 !
:) It's going to be on here for as long as TH-cam is up so you can watch anytime haha. No need to be an early bird. Thanks for watching and the support, I appreciate it.
I’m developing all of my projects(they are all products) with your suggested architecture. I’m always getting stuck when it comes to testing. So my choice is a deep dive for all kind of testing strategies. Looking forward you to finish these series. Thank you a lot for being simple and being a pioneer for some of common problems’ solutions.
Hi Bahadir, thanks for the detailed feedback. I have recently started doing unit testing (again) on my ViewModels only. We have an in house solution in development that covers the integration testing so the testing will specifically be for confirming your viewmodel logic works. I'm also pretty excited to make the rest of the series. I really hope I can explain everything in a good way so that it's easy to understand and consume.
haha, I only started using it after introducing stacked because I was focussing on some other parts of the developmentt process in the team. Now that we're all working well together I introduced a unit testing requirement so I have some basic production things I've been doing that I can share :)
Thank you :) I appreciate the feedback. I'm excited to make part 3 as well. Had to skip this week due to work overload but I'm writing on Wednesday so hopefully I can release the new part on Sunday.
This stacked framework is what I've been looking for, opinionated framework for flutter with CLI Great job! 👍🏼It might be a great tool on daily basis at work to speed up work, improve code quality and sync dev team. I'm sure stacked might be more popular in production than BLoC, TDD/Clean Architecture if you will create written/video tutorials for current new 3.> version, from scratch. All stacked features, maybe with a real app example, might be for example a small app with most common features like auth, HTTP request. It will be easier to present and convince other developers to use stacked
I totally agree, I'm working on a 4 video series as we speak 😋 written posts will start coming out next week. Then videos following that. I'm very happy with stacked now. We tested it with multiple large apps and we'll now build our Filledstacks academy using it (which is what the videos will be based on). The actual building of the app.
Thanks for this explanation, most of the questions I had on how to use this library have been answered. I would like to learn more on the best practices of using services.
Hello Dane, as usual an amazing approach to minimising boiler plate code and a clean code. Personally i would like next to see a Deep dive into Services. Thanks a lot.
Awesome! I'm very happy to hear you got to the end of the video haha. I for sure thought all that setup would chase some people off :) Thanks for commenting. I'll add your suggestions to my list.
One more great tuto., good level of details to discover your new Stacked, and examples of your good practices, waiting for deep dive ;) personal choice (as you ask) : focus on services, using streams, future,... especially with real flow usages (multiple views/widget consuming "push" db update, realtime FB notification, ...)
Awesome :) The services video for today will cover mostly when I create a service and how I consume it in code. It's a video that shares the three scenarios in which I create a service to handle the functionality. For the realtime db updates, etc, you can watch the firebase series which goes over all of that. Everything is still the same besides the naming of classes when you swap provider_architecture with stacked
I have been all over the channel and your website.. this is great effort, i think everyone is grateful, me included. the only concern is we have to use stacked..i checked internal code it is dope. i wish you could explain with pure code. best regards
Awesome man! I'm happy you've found the information useful. I don't quite know what you mean with pure code, we're using only dart in this tutorial if that is what you mean.
@@FilledStacks Thanks for your reply man.. what i meant is, you kinda of wrapped provider into stacked right !! its fine, but what i mean is if its possible to do it with only provider is possible... or i will just stuck to the previous video with provider archi.. cheers for the good work
@@tagyabdo yep. I wrap provider up with the functionality I need from it so i don't have to write the same 100 lines of code for every project. So i just made it into a package. I build about 5 apps for clients a year so if it's in a package we can simply include it. It's definitely possible without stacked. All you do is go to the stacked repo then copy all the source code it. It's pure provider code so you can work directly with it if you don't want the package in your app.
i dont know your name..basically i am ios dev...last 4 months i had starting to work on flutter dev.... i had already 3 to 4 app live in flutter...but i am looking standard structure...like mvvm and mvc ... and i had watches number of videos or read number of blogs...but i could not get good architecture flow.... but you had give me some of breif with great understanding ...yesterday i had found in youtube channel... i had seen your videos... thanks to share this...i get little bit more understanding with your videos...thanks
My name is dane :) And thank you for your awesome comment. I appreciate the kind words and you reaching out to let me know about your journey. Thanks again, I hope I can keep you around with my next few videos.
FutureViewModel currently doesnot have the option to be triggered manually. Can you also add that option as well and also option for Pagination too. Appreciate the effort that you have made to make the package. Cheers
Ya i tried that but what i was looking for us something that will only be called lets say on a button click rather than in the beginning so that i can still use model.isBusy and other helpers
@@FilledStacks I think I am not able to describe. Let me try again. When Using FutureViewModel as soon as the page shows the future is called right. That's perfect for some cases when API call needs to be done at the beginning. But what if I don't want the future to run at the beginning. Instead to run the future only when the button is pressed. So I am asking if there is a way to prevent calling the future in the beginning and call future only when the button is pressed.
Thank you! And thanks for answering. I just finished the code recording, I'm about to do the voiceover for services and then edit the video to upload :)
That is what I do in these series. I always get told the same thing haha, but this is exactly how I build my production apps. I think there's a confusion between implementation details and the architecture. no matter what the app is this will be the architecture. The implementation details depends on the features and functionality required. The firebase series shows literally everything you would need in a production app exactly how I do it so there won't be much to add after that.
@@FilledStacks I have been rewatching your latest entries and feel that this is not completely true. Although the concepts have not changed, the way you abstract code now is different. Better, but more advanced. This goes for your Snippets too... You haven't done this in previous articles. They are way outdated compared to the stacked plugin you created. Don't get me wrong, I'm not asking you to do a production level app, with a little tinkering and reading I can adapt any architecture to yours now. but I did feel the need to point this out. Your content, and that of ResoCoder, are probably the best there are for learning Flutter. And I want to thank you for that.
@@wickedgummybear3104 Thanks for the detailed comment. I appreciate it. It might be flying over my head but I've been using the same architecture since I used scoped model. View, ViewModel, services. the package used for them changed but the implementation pattern has stayed the same. I'm curios if you have an example of what's outdated because we might be talking about two different things since I think everything is still exactly the same. Mostly because I've been coding the same way with slight changes in coding patterns used for 7 years now. View, Viewmodel, service. Services are used in viewmodels, viewmodels manage business logic for views and states. Besides the package changes I'd like to know what kind of differences you see in the implementation so that I can be more mindful of what other devs see as differences in implementation patterns.
@@FilledStacks Sorry for the long reply.. hahaha, but here goes. In your first comment you said: "I think there's a confusion between implementation details and the architecture." And I think that's the case here. When I said I didn't completely agree with you, I meant the part where you said: "The firebase series shows literally everything you would need in a production app exactly how I do it so there won't be much to add after that." Now I do agree with most of it, but not all. Because although the Firebase series does show all functionality you usually use, how you specifically do things and use services and the view/viewmodel side etc, has changed in your new stacked/stacked_services. For example using the HookViewModelWidget to abstract the widgets. In those video's you still use the normal router setup and not the generator. Using the annotations to add services and generating that code, etc. The small details, which can be big for others. (it's nitpicking though) The concepts and useage haven't changed, but the concrete implementation has, and as a (still kinda) newbie, I sometimes still need things spoon-fed to me to properly understand what's happening and how something exactly works. This is a fault of myself, not the way you explain and do things. And judging by the questions I see on your video's I think I'm not alone. I have only been coding for a year and half now. And most of that time was trying to understand what coding was itself and getting to know flutter. So it's sometimes difficult for me, and perhaps others, to take apart code and look beyond it to see the concepts, although I think I'm finally at that point now where I can take apart most stuff and convert it. Be it Provider, Bloc or something else, and abstract it to use as view/viewmodels and services. I think this is where most people have difficulty following you, because theres a "small" gap between using code and looking beyond it to see the concept and being able to adjust it yourself if there are errors. This is probably the thing that's going over your head a bit. But that's understandable since you have years of experience coding. What's easy and obvious to you, might not be for me or others. One of the annoying things that happened was, in the time since you made the first video with the new implementations: "048 - Flutter Architecture Part 1 - Stacked, Routing and GetIt setup", the maker of the package changed how to set up the routing a bit, which meant I couldnt get yours to work. It took me a while to figure out that HE changed something and it was not something different in my flutter files. But I guess that happens and as a dev I need to learn to think about those things. But as I said before, thank you for your contributions. I don't think I can ever properly put into words how much your content and way of coding has helped me.
@@wickedgummybear3104 Aaaah I see what you mean. And don't worry about the comment length. I'm very happy to get comments and have discussions. If you look at the generated router file it's the same code that we wrote by hand. That's why I only use the onGeneratedRoute function it generates. it avoids me having to update parameters passing in for 30+ views, which a lot of the apps we build have. Using the service annotations to generate code also produces the same code that we wrote by hand in the other tutorials where we manually registered using locator.registerSingleton(). Which we consider implementation details like you mentioned. The only reason I'm using that now is because when i'm making use of 20+ services and have 30+ views in a project it takes literally 1 hour+ to update parameters for views if we want to pass new parameters or if we change services dependencies etc. The generation just creates that code for us. One of the things I told myself when starting the channel was to enforce a culture of learning and asking questions through avoiding spoon feeding. i don't want to focus on content for pure beginners because that would take away from where i can actually provide value, which is production principles. My expertise lie in creating large mobile applications, my videos will skip over all the "basics" in terms of fundamentals, and jump straight to high level concepts, the reason for that is because the flutter community was lacking clear guidance to building structured code. My videos and content will never be beginner friendly but any beginner that puts in the time to understand the concepts that I mention or that start to think on an abstract level early on will be in a much better position down the line. I hope that makes sense. i have a core audience of devs I want to move out of the Junior mindset into the more senior mindsets where packages, langauges, frameworks, etc is all implementation details. For instance, I can go and build a production app in ionic, or react native using mongoDB even though I never have. Simply by applying the same principles and fundamentals without watching any architecture videos. That's the kind of mindset i want to create. Where the programming language is a tool in your toolbox, not the main detail. it'll take time to build a community like that but we have some very experienced devs in the community that already think like that. It'll most likely scare away some beginners at the beginning, but hopefully when they nail down the fundamentals they come back and consume all the knowledge around production patterns. I'm happy to hear you're crossing over that barrier now, programming will become a completely different task once you start thinking in a certain way. There's things other than the code itself that I want to introduce as well, designing a system and figuring out how to build the abstract part without any implementation details. Much like I did in my unit testing video. You can literally build an entire apps business logic without writing a single line of actual implemenetation details in services or viewmodels. Which means you can move extremely fast and then hand off services to be filled in by other devs making your workflow much faster. All these things comes with thinking more abstract which I think you're on your way too soon. All in all, i'm happy to have beginners here to learn the principles early and i'm happy that you have left the comments you did. I hope this message helps some others as well.
Awesome Stuff @FilledStacks. Stacked is going to be my State Manager. If possible could you show us your approach for Bottom Navigation Bar while keeping State of navigation, Thank You for sharing
Great tutorial, thank you for sharing it. I have 5 textfield widgets that are build based on different conditions. I have an issue in child widget is not rebuilding with different conditions. Is there any to force rebuild the child widgets when conditions are satisfying. So can you help me to solve this?
Hey, thank you. And yes. But I would be careful about having three systems in your code base that can rebuild UI. Multiple UI bugs can spring from that.
Thanks for another great tutorial, I would like to see deep dive into services video first. I'm currently building an app with this architecture but then again implementing tests at an early stage would also be nice. But then again is there that much to test without the services. I leave the choice in your able hands Mr. Dane.
It seems that service is the popular choice. Once that's done it'll definitely be a more wholesome testing video(s) because we'll have everything in there.
@@FilledStacks I just noticed that if I navigate to a new page and then perform a hot reload, the previous page gets rebuilt, is that supposed to happen?
@@prn-ice If it's still on your navigation stack then yes. It will be recreated, otherwise hotreload will have trouble maintaining state. It has to go through the exact same process it did to get there.
I hope you can provide an example where the Service is abstract and needs an implementation, like how are we gonna setup the ReactiveServiceMixin in that case? nice tutorial btw
Hey, you would do it in the implementation class. It would be the same way. Or you can add it to the interface and you'll be forced to override the abstract classes
I have been trying to follow along with this second version of architecture. But I am stuck and getting this error. The getter 'defaultDurationTransition' isn't defined for the class '_GetImpl' when using the stacked_services:0.5.4+2
I wouldn't need to. It's literally exactly the same as in v1 (provider architecture) which I used in the firebase series. Look at the first video there and follow along.
@@front-endanimal6359 I have, it was such a horrible experience. I use to change no code and then had to sit for an hour or two with build problems because something else changed or it just broke. I spent half my day every second day fixing build issues or trying to get hot reload to work again. I was building a payment application for one of the largest banks on Africa, when you're fighting the framework and building basic functionalities that should be given to you in a project like that it's a waste of time.
I'm using a StreamViewModel to return a stream of a list of messages from a Firebase Database. Would you recommend using a StreamController in a service and then returning the controller's stream as the getter for the StreamViewModel's stream function?
This is an absolute treasure chest of knowledge. Just a question about the observable_ish package. Do I still need to use that or has it been incorporated into the stacked architecture already? Thanks.
Thank you! You don't have to use that anymore. You can simply call notifyListeners in the service and it will rebuild the Viewmodels that's listening to that service.
Hello Dane (again :) ), I'm applying concepts from this tutorial to my new App, but got stuck with some questions: My App shows a Google Map and lets the user to add markers and when tapping a marker shows a custom info window for that marker, i'm confused about the state management of all these component together, I believe in this case i have 3 main component for this view: the page, the map(with user defined markers), the custom info window(that appears and disappear upon a click on the marker on the map) I wonder, should i put all state in one (ViewModel file), so have one pair of view/viewModel? or should i separate them, and if i separate how can i call a function from infoWindow ViewModel from the map ViewModel? Sorry for the long question. and thank you again for everything you deliver, it's really helpful.
Well your map would just be a widget that's apart of your view, most likely the back of the Stack widget. Then you can manager your selected item / showing your info windo from the viewmodel with a boolean. One view and viewmodel should be enough
Thank you for great tutorial. I ran into a problem. Using observablish, RxList the state changes when the list is empty but I am not able to change the state when using removeAt. The RxList element gets removed but the state of B does not change when triggered the service form A. What could be the problem?
You're welcome :) I think the problem is with observable_ish. I'm looking to move away from it, I'll probably build my own reactive functionality into the stacked package.
Partial rebuild part is weird. It's of course good that you can only rebuild some of the widgets on ViewModel changes (and not all of them). But what is much more important - is to be able to only rebuild some of the widgets (that listen to changes), based on which values are changed, and not all of them on every change, whether this change has anything to do with the widget or not.
I agree 100% Will be working on this for v3, which will have a few additional features, dev tooling and better docs. Thank you for taking the time to provide feedback, I really appreciate it.
Thank you for your framework and insights. Question --- It seems in the reactive section, if you click on the DoubleIncrement box first, it doesn't increment the count. It fires the method (I put a print in there), but just doesn't increment the counter at all. When you click on the SingleIncrement box, it updates both boxes, starting at 1, and from then on, the DoubleIncrement box tap then works and updates both boxes as expected. Going to keep playing with it (maybe it's something in my setup), but was curious if anyone knew anything about that.
Love it. I wonder if you can create re-usable components for common widgets. For example, for text, you can create something like ReactiveText .. or using extensions method: Text("test").reactive
You probably could but that's not the direction the binding should be going. the uI should be built from the state in the model. So the "test" there won't make sense in that text since that has to come from the models state upon rebuild/build
I'd only know if I'd do it that way after trying a few approaches but that would definitely be one of them. I have a theme manager snippet on my website that you can check out. I'd start with that.
thank you for this quality content. What do you think is the proper way of initializing a singleton service that has some async code involved ? for example initializing a database or sharedpreferences singleton service that has async code. Putting the async code in the constructor does not work.
You're very welcome :) I setup an async register module like this. @registerModule abstract class AsyncRegisterModule { @preResolve Future get preferencesService => SharedPreferencesService.getInstance(); } That will await that getInstance call and register that as the singleton
Thanks man :) This is pure gold. was eagerly waiting for part 2 . This is first architecture i'm directly using and seems good choice knowing flutter a little. Any tips don't know bloc/mobX so directly learning this would be good ? Coming for React native background , hooks part was spot on :)
You're very welcome :) Yes, I think directly learning this would be fine. Especially starting off, if you find it's not too strict for your taste you can always move over to BLoC or MobX that has more strict rules in how to interact between business and logic.
Great tutorials! How can we rebuild ViewModel A when ViewModel B triggered a change for Future or streams values? Espacially which viewmodel should i use? ReactiveViewModel or FutureViewModel&StreamViewModel?
@FilledStacks Hi man, I've watched the whole series (and coded along ofc) and Stacked seems to be really amazing approach. Now I try to make an app using it. However, I've got a question to you. Is there a way to reach to the viewmodel outside of the build function? For example, I've got a simple button that needs to trigger function from viewmodel. I don't want to store it in build function though to keep it clean so I'd rather assign it to variable. I know I can create class extending ViewModelWidget for that button but I wonder if there's another way to do it. Or should we create a seperate class for different parts of the UI even if they're not that massive? Alternatively, would buildButton(model) function be a good option? Should we pass model like that? Cheers man and keep up the good work. I love your channel since I discovered it, I'll spend a lot of time here :D
Hey, that's why the ViewModelWidget exists. You can create that and set reactive to false and it should be fine. It's always better to use a separate widget instead of a function.
Hi Dane, what a great tutorial! Is there any example implementation of Reactive Value from List/Map? How can I add those values from onChanged TextField(s) to List/Map? I do appreciate your help. Thanks, Dane.
Thank you :) Yes there are examples. I have a unit test that shows the use of RxList. The RxMap object doesn't actually work. github.com/FilledStacks/stacked/blob/669b95270b8d766cc9b9f5e7de3d63db6a3fd001/packages/stacked/test/reactive_functionality_test.dart#L63 Still have to implement that one.
Is it possible to work with a combination of stacked state management with the set state and stateful widgets? Or would this cause problems? Is it possible to replace all stateful widgets with set state to stateless widgets with notify listeners?
Hi Dane, That's an Awesome job of putting tutorials together!. I have a question in StreamExampleViewModel. I see that you have used while loop to generate the DateTime in epochUpdate(). How to push or add data to the stream manually by clicking a button in this given example? Thanks for all the videos you are posting!!
Thank you. Use a stream controller like in my Streams video. create the controller, return the stream for the required stream then you add the event you want onto the controller.
Thanks for the awesome tutorials. One question regarding controllers and hooks. Can't you just put a controller in your viewmodel and dispose it in override instead of making a hookmodelwidget for the controller?
Thank you. No, ViewModels should have no UI code in it. At least that's how I keep it separated. No controllers, nothing. UI should be in the UI files.
Hey, if i create controllers on my view model, how would I dispose them, normal with stateful widget we would dispose them with the lifecycle method. thanks in advance
Hi Dane, i am using your architecture in development and i am kind of stuck, i have a view which will get data from 4 futures and 2 streams. Is there like a way i can merge MultipleFutureViewModel & MultipleStreamViewModel so i implenent this?? or how do implement this, i will be patiently waiting for your reply
Hey Erick, I would use a normal viewmodel and handle it manually like shown before the future and stream viewmodel. Or I would use a MultipleFutureViewModel, use that to get the 4 futures then only handle the 2 streams manually.
Thanks for your packages again. i have to use Workmanager library for background works in my project and i couldnt succes to use any service and Workmanager dispatch method. Because Workmanager only allow static things. Stacked services have instance. So how can i use stacked mvvm services and Workmanager packege?
I don't think Stacked would make a difference to how you use work manager. If it's all static it means it probable won't spin up flutter so stacked won't even be active. You should use it the same way you would in normal flutter. if you want to use a service then make sure to construct it if it's null and then use it. That's a bout all i can think of saying, don't know what you're doing, what's wrong, what you expect to happen, why you think it's not happening, if it's a package that uses method channel, if that's allowed on background threads, if you need to do any setup before using it, does it have a execution time limit like iOS, does it depend on the OS to schedule a run, does it need special permission to run, etc. But I can say that you can use workmanager the same way you would without stacked since it's all widgets all packages can be used the same way.
Hi Dane! Small Doubt . In the "ViewModelBuilder" 's NAMED PARAMETER , which is [ *viewModelBuilder : partialViewBuildModel()* ] we are passing a newly created object. Where as in the previous architecture series on provider (through which this package was born), we used the "locator" from Get_it package to inject the object into the Providers of our Views as lazy singletons. I'm curious to know is that something that is being handled by the package behind the scenes? because i checked the code of the ViewModelBuilder and couldnt find anything related to Get_it package. Please help. Thanks.
Hi, you can use both. When I introduce widget testing to through this architecture we'll be using get_it again. It's not needed so I didn't use it. You can just construct the ViewModel you want where you need it.
@@FilledStacks Oh i get it, We dont have any state we want to persist throughout the app lifetime in the View Models so we dont need dependancy injection for it.... am i right?
Good morning, I wanted to ask a question not related to this video I'm using provider and I want to call an api at the start of the loading(init state) I'm using the provider.of but I'm getting the dirty state error
Hey, are you calling that within your view build method? I would advise against that, also because I don't know how you would fix that. I usually call initialisation logic in the onModelReady callback of my widgets in the stacked package.
This might be a weird comment/question. But there are some snippets on your homepage that seem outdated, especially considering this new architecture. Will you update/change those in the coming months?
I know, I probably won't have time to update that at all. It's basically how I've been progressing over time. I will just release new versions over the coming months that go over the old things and uses the new setup.
@@FilledStacks Thanks for your reply. I didn't expect you to update those, that's just too much content and most of it, if not all, can be adapted to suit the new advanced coding abstraction and services. But there are some important ones I had some trouble with, like Shared Preferences. And I might also be a good idea to let people know that they need to update to the latest way of doing things. Because the Dialog Service you created was partly broken with new flutter updates etc, untill I used the new stacked_services.
@@wickedgummybear3104 SharedPreferences I still use exactly as in the snippet. I create the service and use it as shown there through get_it. I show the full async setup as well. I'd hope the developers trying to learn from my content has the ability to adapt code to new versions without too much hassle.
Wow! A bit overwhelming but it is very intuitive architecture to build complex apps. I will do some hands on and try to get a hang of it. One thing is not clear to me however is, is ViewModel instantiated only once or is it instantiated every time widget is built?
With some testing, I have found out that my view model is instantiated everytime my view goes and comes into scope (tab page view). My tab page view has a list of items. So, everytime I swipe to this page, the items are fetched from database. Is it not better to have this in memory? (i.e.. keeping view model in memory) Is it normal behavior or am I missing something?
The ViewModel will be recreated when init state is called and the widget was completely disposed. So only when the _model value internally is set to null or if createNewModelOnInsert is true. Other than that it shouldn't rebuild. Swapping tabs removes the view from the widget tree so it's created completely new everytime. You can use a singleton viewmodel and set disposeViewModel to false. The builder will still be called but you'll get back the same viewmodel at least.
@@FilledStacks ok, thanks for clearing that up. But for my simple application, I think just using provider is straight forward. I inject my view model in main and it is not reinstantiated switching between tab pages. But what are the advantages of reinstantiating view model every time? why not just keep the instance in memory during (apart from low runtime memory usage)
@@bonmec101 I instantiate the viewmodel based on the lifecycle of flutter widgets. This means as widgets get created and destroyed so will their viewmodels and will follow the proper dispose functionality. I show in this video how you can have widgets with it's own viewmodel. If each of those widgets are in a list and their viewmodels are subscribed to a stream you'd want them to be only listening when in the tree and not listening when out. The same for most of my views. It follows the lifecycle of the Flutter widgets so I don't have to maintain a separate lifecycle guideline for stacked.
@@bonmec101 You can always make it a stateful widget and keep the model in memory. The model is kept in memory if you look at the viewmodel builder widget.
You mentioned that observable_ish is not the best approach, since it's a very old package. I need to make a reactive service but reluctant to use observablish. ls there an alternative to observablish ? Also, when can we expect a similar feature in stacked architecture?
Yes. I've stoped using observable_ish completely. I just use normal variables now. When you change something in the service and you want the viewmodels to update you can simply call notifyListeners in the service. It works the same.
The child is for a static child that will only be built once. Provider allows you to pass a static child that won't be rebuilt so if you have any UI you don't want to rebuild you can use that.
Thank you so much for this series... I have a problem, I'm using stacked, and stacked services for Navigation, the Problem is when i start the app first two routes take a delay to push maybe around 1s ... This happens only when i open app, if i pop the route and then navigate again it goes smooth... There is not any logical work... Its only UI build yet... Please help me
Hi I have a question is there any way to use a widget with a HookViewModelWidget inside a widget with a TransactionStreamViewModel and avoid rebuilding the stream, (I am trying to make a timer inside a widget that listens to a stream).
Ji Juan, the best advice here is to put your rebuilding method on the lower edges of the leaves. I would give the timer its own viewmodel and listen to the stream in there only. This means it will rebuild itself and nothing else around it will.
Hi, how would you go about resetting a list to empty? ex: A Cart Service. I know you would initialize it as RxList(); Then if the user would want to clear it, you'd just reset the array to be empty so that it would O(1). But using RxList doesn't allow re-initialization and you would lose the subscribers to the list - and emptying would take O(n) where n = number of items which is slow. How do you approach this situation?
Hi Sean, I would simply call clear on the list. I only optimise when I see a problem. Using normal clear hasn't caused any problems for me so I'm happy using only that for now.
Hello, I think there is a problem with the final code for the provider architecture from your GitHub the problem is no post fetched in the home view, can you please fix it or point the problem so I can fix it
Hey, I don't think I can. I haven't looked at that code in a while. Hopefully you're aiming to become a good dev? That gives you a great opportunity to debug some one else's code, find the flaws and fix it. It's a great practice i use to do to improve my development skills.
Awesome. Search would be the same as all other features. Pass your string to your viewmodel from your view, call search on the service then display the results in a list.
Hey just letting you know that in _ErrorMessage class the line model.error.message doesnt work but model.error().message does. Edit: i just saw that in your repo you changed it to model.modelError.message which also works.
Hey Dane, have a quick question about the Stacked architecture. How would you suggest sharing widgets with two different ViewModels? For example, in my app, I have a widget I'm extending with HookViewModelWidget, but ideally I'd like this widget to be used in two different views with two different ViewModels. Is this a possibility?
Hey there, I'd give the widget its own viewmodel and add the functionality in there. Then you can use it as a widget with that functionality wherever you need it.
Scrolling down the comments, I have to applaud you for replying to pretty much every single comment. Would be ironic if you didn't reply to this comment 🤔😅
haha, i reply to all the comments I get because I appreciate the inputs and the questions. I like helping other developers, I take a day or two to reply because I have a shit load of work that also has to get done in between me helping others :)
How do I get data in one view from the view model of a different view? Let's call them view A and view B to make it more clear. I tried creating an instance of the view model A's class in view B and checked the length of a list that should already be filled but it's showing 0. We go to view B from view A so when view A is created, that's when the list is filled with data from an API. That part if working fine. But I need that list in view B too but I don't want to pass the whole list as an argument. The use of list from view model A in view B is pretty situational and passing the whole list might be a waste of space. How do I do it?
The big difference is that the reactive viewmodel is not for dependency injection, it's a viewmodel for binding the UI to state in the ViewModel. ProxyProvider is for dependency injection, we use get_it for service location and injection in some places.
Those things you'd basically have to write yourself when you use the provider_architecture package. If you're talking about pure provider it provides a clear separation and state management implementation. Provider itself provides you with base widgets to use but there's no state management functionality or pattern it follows.
hi i got an issue, i dont if its in my code. i use the stacked navigate route and when i pass an arguments value with a null data its still fine. but when i use the variable that has a value null from the arguments and insert it to TextFormField(initialvalue) or textController(text) it has error..suppose to be it should return an empty string if null. But my constructor is still ok even if its null when i print it out..just in the TextFormField(initialvalue) and textController(text). Thanks
Hi, it's your code. You can't pass null to either 1 of those. It should be an empty string. Your code should be fine unless you're indexing into that value without any checks. then it'll also break.
Regarding "partial view rebuilds", i have a question The 3 widgets are bounded to the same view model because they are surrounded with the same view model builder? Or how does that work exactly?
If they are below the viewmodel provider in the widget tree then they can access it. It uses Provider for the "Inherited Widget" functionality as Flutter suggests we get dependencies from higher in the tree. I don't know if that answers your question because I don't know if you're asking how provider works or Flutters Inherited widget system.
@@FilledStacks thanks! I don't have a lot of experience in provider, but when I learned riverpod, one big difference between it and provider was the idea of "parent widgets" in such a way that you can create a state globally and fetch it wherever you need it. Forgive me if I'm not clear enough, but is this an issue with provider in some place? Is it fixed in stacked in some way? Thanks!!
@@ComputerScienceAcademy5220 There's no issue with provider. Stacked uses provider. It can used Inherited widget if needed, we basically just need a change notifier supplied and rebuild when we need the UI to fire. So we're probably only using 5% of provider functionality. There's been no issues we've seen over the last few years of development and apps built for clients.
Yep, you can override onError and show your snakbar. I have a snackbar services in the stacked_service. check that out if you're using get and the navigation service setup as well.
It's basically just if you want to use Flutter Hooks and the ViewModelWidget. If you don't then you don't need it. If there's no Flutter hooks tutorials out there I'll make one.
Absolutely love the architecture so organized. Thanks for this! - so... I have created a login page which retrieves a jwt token from an api service on successful login and stores it in SharedPreferences. I wanted to know the best way to incorporate it in this architecture so on page refresh or start of the app it checks the prefs for the token if null send them to the login page. Same with the routes, if the user types the url to another route they get sent back to login if no token is found. Thanks again!.. Im sure this would be a great tutorial.. haha
Awesome. I'm happy to hear that. I have a tutorial for that it's called startup logic and custom user profiles. It's in the firebase course on my channel. You can use the same logic for the startup logic.
@@FilledStacks Thanks again, I watched that video and it helped me a lot! ..I'm using that logic.. Another question, is there a way to use the override futureToRun() in a Model when extending just the BaseViewModel and not the FutureViewModel? What I am trying to achieve is to run a quick check of the SharedPreferences for an authorized user before the model is ready just in case they try to navigate to an unauthorized page via URL in the browser. Then show the page if they are authorized and navigate to login if they are not. I want to be able to use this on every view in the app. Thanks!
@@djcali00 you don't need to use the override. You can just use a normal BaseModel and a function that you can call in onModelReady. The same as we do with the startup logic in the startup logic video on my channel. FutureViewmodel is used for a Viewmodel that depends on data returned from a Future.
2 questions. 1) I presume if I use stacked, I won't need mobx anymore. Is this correct? for state management and beside readability/maintainability, is there performance improvement over mobx? 2) While waiting for more series, is there any documentation I can read to create/follow the stacked architecture?
1. Yes you are correct, this is a full state management solution 2. On the read me I explain what I explain in the first video. If you want to see how I use it in production you can look at the Firebase series. It uses provider_architecture, which is v1 of stacked which I renamed to stacked. That series shows how I build quite a few things, with Firebase.
@@FilledStacks Thanks. For point 2, I presume if I use REST API instead of firebase, it will still work right? Do you have recommendations to structure codes? probably a guideline or something.
@@ericchua3492 Yep, rest api should work fine. I show that in my apps. If you look at my first provider architecture video on the channel you'll see how I structure my api class.
Hey Dane, as I wrote in other videos, I can't thank you enough for these videos! They are more than helpful! One question about the reactive services: did you plan to include observable_ish functionality as a part of the stacked package in the short future?
Thanks Stanko. Thank you for leaving the nice comments and the feedback. observable_ish was a short term solution to get my idea across. We will be deprecating its use and removing it from the readme's as well. At the moment we call notifylisteners in the service when we want a service to rebuild. observable_ish was a good start but we're moving on from it now.
Hi Dane, about rebuild viewmodel A on viewModel B trigger "literally in the first iteration", what do you think about merging pub.dev/packages/rx_command in Stacked ? I'm absolutely not an expert but last version of rx_command (based on stream, no more on observable) seems pretty good.
Hi, I have looked at RxCommand before. It would only add an additional layer between calling notifyListeners, which at the moment is not a problem to type out manually. I don't see the benefit of using commands yet, but maybe it'll come to mind when I use it more. I currently don't use it in production and haven't needed it, if I do then I'll most likely integrate it somehow
Hey man , Started out this pattern. Bit of confusion on basic todo-list. I've screen A showing todo-list with (TodoListViewModel) ,now on button click on appbar it moves on Screen B have (AddTodoViewModel) from which new Todo can be added. Now problem is how can i update TodoList while adding Todos. Which approach is best for this ? Don't want to use Navigating back and then adding it like in typical android activity.
@@evengrant1616 That's how it's supposed to be used. If two viewmodels require the same data then we share it in a service. That's a core part of the architecture.
@@martinharris4416 Sounds good. I'll see if it can be substituted to do the same thing. I hope it has no dependency on Flutter itself otherwise it'll make the services not unit testable.
A really great content Dane! Thank you very much! One question, can i set my TextEditingController in my ViewModel instead of using Hook? Is it a good practice? I've tried to implement the Hook method but i found a problem when i want to set the value of the TextEditing after the widget already built.
It's my pleasure to make this content, and thanks for watching.The Viewmodel should have no UI code in it. If you don't like the Hook method you can simple use a stateful widget. I set my text editting controllers with a callback function passed to the viewmodel on construction. There should be a better way, but that's how I use it at the moment.
@@FilledStacks Hi, I am still going through your videos, when you said the viewmodel should have no UI code in it, what if I have a button that depends on condition that it gets from a Consumer widget, would this be also in the View? ie : Consumer => if( consumer.state ==1) return button1,else return button2
@@vontdeux That would be in the view. The view should ONLY render what's provided by the viewmodel. You can check the viewmodels state and then render accordingly. Control flow is not the same as business logic. If you're checking if something is visible or not by looking at a property in the viewmodel that's not business logic. That's just basic control flow of what you'll be rendering on the screen .
hi guys i got the issue after adding smart widgets, and i changed the home in main.dart. after that i got the error as ---- No type CounterService is registered inside GetIt. Did you forget to pass an instance name? (Did you accidentally do GetIt sl=GetIt.instance(); instead of GetIt sl=GetIt.instance;did you forget to register it?) 'package:get_it/get_it_impl.dart': Failed assertion: line 251 pos 14: 'instanceFactory != null' A RenderFlex overflowed by 199594 pixels on the right. can anyone please help me, what should i do now
I have done all the steps as you said in the reactiveViewModel but still my double Value not changing when single increment button is tapped or single value not changing when double increment button is tapped. Please help?
hey, I won't be able to help much. There's quite a lot of things that can go wrong. Observable_ish has been removed from the package so it won't work anymore. You should use the ReactiveValue or ReactiveList in the latest stacked release.
@@FilledStacks I was also suspecting rxvalue has some issue. But there is no object called ReactiveValue in the stacked package can you just update this in the notes of the pub.dev. or the written tutorial.
@@FilledStacks I faced the same issue. But when I moved notifyListeners() from updateCounter() to increaseCounter() and doubleCounter(), it's worked. But I wonder is it the right way or RxValue must be replaced by ReactiveValue?
Good day, I implemented your code but when I run the partial builds view it rebuilds everything, could you please help with the cause of that. Anyways thanks for the great tutorials.
@@amanyasin4811 Could be, or it could be because of one of the most recent fixes we pushed. Please log an issue with the example of the not working code and i'll take a look at it.
hello, noob question. how to implement initState and dispose in architecture? I'm kinda lost, I created my app without architecture and it lags when changing screen, then I saw your video and tried architecture and it made a huge difference, but I'm lost on how to implement initState and dispose since my app creates a database if there's no database yet and I'm calling it from initState, what approach should i do?
Hey, I'm happy you experienced the improvements. Having the logic separate to the view rendering helps with blocking tasks as well. you can call your startup logic in the onModelReady callback on the ViewModel builder. Put all your database code in a service then call your initialise functionality from your viewmodel.
Hi Dane, Thank you for your explanation and contribution, I love your videos very much. And you are the best flutter MVVM's expertise! I am using stacked to implement my project which deploys a google map on the home UI inside a SliverList. To keep the map alive after the user has scrolled over, I create a stateful widget with AutomaticKeepAliveClientMixin. However, I don't know how to also extend this stateful widget with ViewModelWidget. Due to the MapWidget already extends StatefulWidget, how can I also extend with ViewModelWidget? Below is my code summary. I get this error from terminal. "[ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: NoSuchMethodError: The method 'animateCamera' was called on null." I think the reason is the model.homeViewMapController cannot reference to GoogleMap controller. I'm looking forward to your kindly help! Alan class HomeView extends StatelessWidget { @override Widget build(BuildContext context) { return ViewModelBuilder.reactive( viewModelBuilder: () => HomeViewModel(), onModelReady: (model) => model.listenToPosts(), builder: (context, model, child) => Scaffold( backgroundColor: Colors.white, body: _ContentScrollable(), drawer: CustomDrawer(............... .........); ............ }// End of HomeView class _ContentScrollable extends ViewModelWidget { _ContentScrollable({Key key}) : super(key: key, reactive: true); @override Widget build(BuildContext context, HomeViewModel model) { return Stack( children: [ CustomScrollView( slivers: [ SliverList( delegate: SliverChildListDelegate( [ MapWidget(), ............ ........... }//End of _ContentScrollable class MapWidget extends StatefulWidget { @override _MapWidgetState createState() => _MapWidgetState(); } class _MapWidgetState extends State with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return ViewModelBuilder.reactive( viewModelBuilder: () => HomeViewModel(), onModelReady: (model) => model.initState(), builder: (context, model, child) => Some Widget wrapped with GoogleMap(); child: GoogleMap( mapType: MapType.normal, initialCameraPosition: CameraPosition( target: LatLng(37.354107, -121.955238), zoom: 12, ), markers: Set.of((model.marker != null) ? model.marker.values : []), onMapCreated: (GoogleMapController controller) { model.homeViewMapController = controller; model.updateMapLocation(); },
Hey, thank you. I appreciate the comment. Your error has nothing to do with the stacked setup. And in terms of the mixin you can add the mixin regardless of what state it's inhering from. In this case I'd say use a normal stateless widget and use the getParentViewModel function to get your model in the build function where you need it.
Been holding breath for 33:23 minutes, I think I'll need to see it again... and again...and..., pure gold ;-), Thank You very much Dane!
hahaha, It is quite a lot to take in which why I wanted to break it into the specific sections so you can always reference it as you're working. I'm happy you find it useful
I very rarely comment on videos. But I have to thank you for your work man. You saved me a lot of time. Way more better SM than Bloc. And I have to say that you reply for every comment on your videos. That is so kind of you. You are my idol 🙌🏽
Hey hey, thank you very much for leaving the comment. I appreciate it. I struggled with BLoC and the others that were available at the time so I had to make sure no one else struggles as well :) I'm very happy to hear you appreciate my efforts. And good luck with stacked.
If you want some discussions around it we have a slack with 2000 flutter devs that discuss stacked work. join.slack.com/t/filledstacks/shared_invite/zt-mcw04u5t-dTeyH0lPONuzd9i0osk9Gw
@@FilledStacks Thank you for invitation. I am already in. Let's rock'n'roll )
Your flutter tutorials are the best sir, please keep sharing. Sorted out a ton of housekeeping issues on my app thanks to the architectural insights you brought to light. Lots of appreciation, thank you.
Sup Tendai 👊 You're very welcome. I'm so happy I could help you improve your architecture for your application. Thank you for leaving a comment and letting me know. I'll try my best to keep sharing information like this.
It feels good to always come back to filedStacks tutorial. I was having issues catching errors from my Future methods. I spent few hours of today(4 June 2022) stepping into 'Stacked' source code. I read through a few classes like BaseViewModel, DynamicSourceViewModel, MultipleFutureViewModel, and FutureViewModel. By the time I finish, the whole implementation was clear to me, and as well I learned how to write clean code from reading your doc. Thanks to filledStacks team.
You're welcome! I'm happy you can still learn from my videos. And thank you for leaing a comment about it.
Thank you! You're life saviour. I've been developing/maintaining production apps using BLoC architecture and I find that it is very messy as I progress. The tutorial you've shown is easy to understand despite that I'm a beginner level, maybe it's due to the code readability and clean. Do please make video for the real use case of services.
Subscribed & Liked!
That's great to know Luqman! I appreciate the detailed feedback. I had the same experience with my short dive into BLoC when I first started. This made me take on the task of creating a better production level application architecture for all the client apps that I build. I'm happy to hear it helped you as well. The services video will hopefully be coming out this week.
Would love to learn more about your thoughts on best practices implementing services. Currently using it for things such as an audio player and navigation and would be great to how you go about configuring these things yourself.
Great video as always! Thank you 🙌🏽
Noted! Thanks for watching and the detailed comment I appreciate it. I'm happy you enjoyed the video.
Would also love to see a deep dive on implementing services and when you should or should not make something a service.
@@wickedgummybear3104 Awesome. Services is winning by far. I'm excited to write it all down. I think it'll be great to get a clear guide on it for myself as well.
Hi Dane, I am following along your videos since your provider architecture tutorial , and I already finished building production ready app using provider architecture. Now, this architecture looks very clear and neat and seems to be easy maintainable if app grows in future. Hope I can refactor the existing application to this architecture. Thank you Dane for your hard efforts for making such a wonderful video tutorials. Look forward to watch more videos of you using stacked architecture using real world example.
Hey Syed! I'm happy that you've used provider architecture, you'll enjoy the upgrade we've done in stacked. It's very fun to use and makes the code pretty clean. I hope that every video I make is a real world example, because the code comes directly from my code that I write for clients :D I'll try my best to keep making more.
Finally, the wait is over. Damn this TH-cam always forgot me to send notifications. I'm really late this time. By the way as always your videos are the best. Thanks a lot. Love you 3000 !
:) It's going to be on here for as long as TH-cam is up so you can watch anytime haha. No need to be an early bird. Thanks for watching and the support, I appreciate it.
I’m developing all of my projects(they are all products) with your suggested architecture. I’m always getting stuck when it comes to testing. So my choice is a deep dive for all kind of testing strategies. Looking forward you to finish these series. Thank you a lot for being simple and being a pioneer for some of common problems’ solutions.
Hi Bahadir, thanks for the detailed feedback. I have recently started doing unit testing (again) on my ViewModels only. We have an in house solution in development that covers the integration testing so the testing will specifically be for confirming your viewmodel logic works. I'm also pretty excited to make the rest of the series. I really hope I can explain everything in a good way so that it's easy to understand and consume.
TDD with viewmodel is a must for production ready app
Need this tutorial ASAP 😂
Great video as always!
haha, I only started using it after introducing stacked because I was focussing on some other parts of the developmentt process in the team. Now that we're all working well together I introduced a unit testing requirement so I have some basic production things I've been doing that I can share :)
Awesome tutorial, I find your approach really intuitive. Looking forward to part 3. Thanks :)
Thank you :) I appreciate the feedback. I'm excited to make part 3 as well. Had to skip this week due to work overload but I'm writing on Wednesday so hopefully I can release the new part on Sunday.
This stacked framework is what I've been looking for, opinionated framework for flutter with CLI Great job! 👍🏼It might be a great tool on daily basis at work to speed up work, improve code quality and sync dev team. I'm sure stacked might be more popular in production than BLoC, TDD/Clean Architecture if you will create written/video tutorials for current new 3.> version, from scratch. All stacked features, maybe with a real app example, might be for example a small app with most common features like auth, HTTP request. It will be easier to present and convince other developers to use stacked
I totally agree, I'm working on a 4 video series as we speak 😋 written posts will start coming out next week. Then videos following that.
I'm very happy with stacked now. We tested it with multiple large apps and we'll now build our Filledstacks academy using it (which is what the videos will be based on). The actual building of the app.
Thanks for this explanation, most of the questions I had on how to use this library have been answered. I would like to learn more on the best practices of using services.
You're welcom :) Awesome! Seems like most are opting for services
Hello Dane, as usual an amazing approach to minimising boiler plate code and a clean code. Personally i would like next to see a Deep dive into Services. Thanks a lot.
Hey Hasan! Thanks for always watching and commenting. I will definitely be doing Services next.
Another great video! The existing online material on unit tests would benefit a lot from a FilledStacks tutorial 🙂
Thank you and thanks for answering, Noted.
great tutorial! Especially the part with futures and streams; love that! I would love to see a deep dive on services. And possibly managers?
Awesome! I'm very happy to hear you got to the end of the video haha. I for sure thought all that setup would chase some people off :) Thanks for commenting. I'll add your suggestions to my list.
One more great tuto., good level of details to discover your new Stacked, and examples of your good practices, waiting for deep dive ;)
personal choice (as you ask) : focus on services, using streams, future,... especially with real flow usages (multiple views/widget consuming "push" db update, realtime FB notification, ...)
Awesome :) The services video for today will cover mostly when I create a service and how I consume it in code. It's a video that shares the three scenarios in which I create a service to handle the functionality. For the realtime db updates, etc, you can watch the firebase series which goes over all of that.
Everything is still the same besides the naming of classes when you swap provider_architecture with stacked
I have been all over the channel and your website..
this is great effort, i think everyone is grateful, me included.
the only concern is we have to use stacked..i checked internal code it is dope.
i wish you could explain with pure code.
best regards
Awesome man! I'm happy you've found the information useful. I don't quite know what you mean with pure code, we're using only dart in this tutorial if that is what you mean.
@@FilledStacks Thanks for your reply man..
what i meant is, you kinda of wrapped provider into stacked right !!
its fine, but what i mean is if its possible to do it with only provider is possible...
or i will just stuck to the previous video with provider archi..
cheers for the good work
@@tagyabdo yep. I wrap provider up with the functionality I need from it so i don't have to write the same 100 lines of code for every project. So i just made it into a package. I build about 5 apps for clients a year so if it's in a package we can simply include it. It's definitely possible without stacked. All you do is go to the stacked repo then copy all the source code it. It's pure provider code so you can work directly with it if you don't want the package in your app.
i dont know your name..basically i am ios dev...last 4 months i had starting to work on flutter dev....
i had already 3 to 4 app live in flutter...but i am looking standard structure...like mvvm and mvc ...
and i had watches number of videos or read number of blogs...but i could not get good architecture flow....
but you had give me some of breif with great understanding ...yesterday i had found in youtube channel...
i had seen your videos...
thanks to share this...i get little bit more understanding with your videos...thanks
My name is dane :) And thank you for your awesome comment. I appreciate the kind words and you reaching out to let me know about your journey. Thanks again, I hope I can keep you around with my next few videos.
FutureViewModel currently doesnot have the option to be triggered manually. Can you also add that option as well and also option for Pagination too. Appreciate the effort that you have made to make the package. Cheers
It does, you can call the runFuture function on the model. It's in the base class and it's what's used to run the future.
Ya i tried that but what i was looking for us something that will only be called lets say on a button click rather than in the beginning so that i can still use model.isBusy and other helpers
@@rubinbajracharya9319 You can call runFuture from the button click. Why are you not able to do that?
@@FilledStacks I think I am not able to describe. Let me try again. When Using FutureViewModel as soon as the page shows the future is called right. That's perfect for some cases when API call needs to be done at the beginning. But what if I don't want the future to run at the beginning. Instead to run the future only when the button is pressed. So I am asking if there is a way to prevent calling the future in the beginning and call future only when the button is pressed.
I loved your stacked architecture so much👌👌👌👌
Me too man. It's a joy to work with.
Finally part 2! Thank you so much!
haha, you're very welcome :) Thanks for watching
I like your videos. I love the code readability. Love to see the services video next and unit test video after that. Thank you.
Thank you! And thanks for answering. I just finished the code recording, I'm about to do the voiceover for services and then edit the video to upload :)
You should make a tutorial on how to build a production level app, like a blog or something!! ur so awesome dude!! thanks for this
That is what I do in these series. I always get told the same thing haha, but this is exactly how I build my production apps. I think there's a confusion between implementation details and the architecture. no matter what the app is this will be the architecture. The implementation details depends on the features and functionality required. The firebase series shows literally everything you would need in a production app exactly how I do it so there won't be much to add after that.
@@FilledStacks I have been rewatching your latest entries and feel that this is not completely true. Although the concepts have not changed, the way you abstract code now is different. Better, but more advanced. This goes for your Snippets too... You haven't done this in previous articles. They are way outdated compared to the stacked plugin you created. Don't get me wrong, I'm not asking you to do a production level app, with a little tinkering and reading I can adapt any architecture to yours now. but I did feel the need to point this out. Your content, and that of ResoCoder, are probably the best there are for learning Flutter. And I want to thank you for that.
@@wickedgummybear3104 Thanks for the detailed comment. I appreciate it. It might be flying over my head but I've been using the same architecture since I used scoped model. View, ViewModel, services. the package used for them changed but the implementation pattern has stayed the same. I'm curios if you have an example of what's outdated because we might be talking about two different things since I think everything is still exactly the same. Mostly because I've been coding the same way with slight changes in coding patterns used for 7 years now. View, Viewmodel, service. Services are used in viewmodels, viewmodels manage business logic for views and states. Besides the package changes I'd like to know what kind of differences you see in the implementation so that I can be more mindful of what other devs see as differences in implementation patterns.
@@FilledStacks Sorry for the long reply.. hahaha, but here goes.
In your first comment you said: "I think there's a confusion between implementation details and the architecture." And I think that's the case here. When I said I didn't completely agree with you, I meant the part where you said: "The firebase series shows literally everything you would need in a production app exactly how I do it so there won't be much to add after that." Now I do agree with most of it, but not all. Because although the Firebase series does show all functionality you usually use, how you specifically do things and use services and the view/viewmodel side etc, has changed in your new stacked/stacked_services. For example using the HookViewModelWidget to abstract the widgets. In those video's you still use the normal router setup and not the generator. Using the annotations to add services and generating that code, etc. The small details, which can be big for others. (it's nitpicking though)
The concepts and useage haven't changed, but the concrete implementation has, and as a (still kinda) newbie, I sometimes still need things spoon-fed to me to properly understand what's happening and how something exactly works. This is a fault of myself, not the way you explain and do things. And judging by the questions I see on your video's I think I'm not alone. I have only been coding for a year and half now. And most of that time was trying to understand what coding was itself and getting to know flutter. So it's sometimes difficult for me, and perhaps others, to take apart code and look beyond it to see the concepts, although I think I'm finally at that point now where I can take apart most stuff and convert it. Be it Provider, Bloc or something else, and abstract it to use as view/viewmodels and services. I think this is where most people have difficulty following you, because theres a "small" gap between using code and looking beyond it to see the concept and being able to adjust it yourself if there are errors.
This is probably the thing that's going over your head a bit. But that's understandable since you have years of experience coding. What's easy and obvious to you, might not be for me or others. One of the annoying things that happened was, in the time since you made the first video with the new implementations: "048 - Flutter Architecture Part 1 - Stacked, Routing and GetIt setup", the maker of the package changed how to set up the routing a bit, which meant I couldnt get yours to work. It took me a while to figure out that HE changed something and it was not something different in my flutter files. But I guess that happens and as a dev I need to learn to think about those things.
But as I said before, thank you for your contributions. I don't think I can ever properly put into words how much your content and way of coding has helped me.
@@wickedgummybear3104 Aaaah I see what you mean. And don't worry about the comment length. I'm very happy to get comments and have discussions. If you look at the generated router file it's the same code that we wrote by hand. That's why I only use the onGeneratedRoute function it generates. it avoids me having to update parameters passing in for 30+ views, which a lot of the apps we build have.
Using the service annotations to generate code also produces the same code that we wrote by hand in the other tutorials where we manually registered using locator.registerSingleton(). Which we consider implementation details like you mentioned. The only reason I'm using that now is because when i'm making use of 20+ services and have 30+ views in a project it takes literally 1 hour+ to update parameters for views if we want to pass new parameters or if we change services dependencies etc. The generation just creates that code for us.
One of the things I told myself when starting the channel was to enforce a culture of learning and asking questions through avoiding spoon feeding. i don't want to focus on content for pure beginners because that would take away from where i can actually provide value, which is production principles. My expertise lie in creating large mobile applications, my videos will skip over all the "basics" in terms of fundamentals, and jump straight to high level concepts, the reason for that is because the flutter community was lacking clear guidance to building structured code. My videos and content will never be beginner friendly but any beginner that puts in the time to understand the concepts that I mention or that start to think on an abstract level early on will be in a much better position down the line.
I hope that makes sense. i have a core audience of devs I want to move out of the Junior mindset into the more senior mindsets where packages, langauges, frameworks, etc is all implementation details. For instance, I can go and build a production app in ionic, or react native using mongoDB even though I never have. Simply by applying the same principles and fundamentals without watching any architecture videos. That's the kind of mindset i want to create. Where the programming language is a tool in your toolbox, not the main detail. it'll take time to build a community like that but we have some very experienced devs in the community that already think like that. It'll most likely scare away some beginners at the beginning, but hopefully when they nail down the fundamentals they come back and consume all the knowledge around production patterns.
I'm happy to hear you're crossing over that barrier now, programming will become a completely different task once you start thinking in a certain way. There's things other than the code itself that I want to introduce as well, designing a system and figuring out how to build the abstract part without any implementation details. Much like I did in my unit testing video. You can literally build an entire apps business logic without writing a single line of actual implemenetation details in services or viewmodels. Which means you can move extremely fast and then hand off services to be filled in by other devs making your workflow much faster. All these things comes with thinking more abstract which I think you're on your way too soon. All in all, i'm happy to have beginners here to learn the principles early and i'm happy that you have left the comments you did. I hope this message helps some others as well.
Awesome Stuff @FilledStacks. Stacked is going to be my State Manager. If possible could you show us your approach for Bottom Navigation Bar while keeping State of navigation, Thank You for sharing
Hey, that's awesome. I think I might just show that because I get asked about it a lot.
@@FilledStacks Fantastic. can't wait.
Deep dive for services would be great :)
Awesome. Noted!
Great tutorial, thank you for sharing it. I have 5 textfield widgets that are build based on different conditions. I have an issue in child widget is not rebuilding with different conditions. Is there any to force rebuild the child widgets when conditions are satisfying. So can you help me to solve this?
Thank you and you're welcome :) notifyListeners will rebuild the builder at any time. If you've satisfied your conditions call notifyListeners.
Thanks for this great package. Can I ask if it is ok to use providers Selector to rebuild only specific widgets whilst using Stacked? Thank you
Hey, thank you. And yes. But I would be careful about having three systems in your code base that can rebuild UI. Multiple UI bugs can spring from that.
Thanks for another great tutorial, I would like to see deep dive into services video first. I'm currently building an app with this architecture but then again implementing tests at an early stage would also be nice. But then again is there that much to test without the services. I leave the choice in your able hands Mr. Dane.
It seems that service is the popular choice. Once that's done it'll definitely be a more wholesome testing video(s) because we'll have everything in there.
@@FilledStacks I just noticed that if I navigate to a new page and then perform a hot reload, the previous page gets rebuilt, is that supposed to happen?
@@prn-ice If it's still on your navigation stack then yes. It will be recreated, otherwise hotreload will have trouble maintaining state. It has to go through the exact same process it did to get there.
@@FilledStacks Services with something like firebase_auth would be great
@@bigaloz80 It would. I've written them already in other projects. just have to get them into a package and publish.
I hope you can provide an example where the Service is abstract and needs an implementation, like how are we gonna setup the ReactiveServiceMixin in that case? nice tutorial btw
Hey, you would do it in the implementation class. It would be the same way. Or you can add it to the interface and you'll be forced to override the abstract classes
Great as always. Keep up the great work.
It'll be cool if you make a video about services.
Thank you.
Noted! And that you very much. I'll try to keep it up. I 'll be making services video next. Seems to be in demand.
I have been trying to follow along with this second version of architecture. But I am stuck and getting this error.
The getter 'defaultDurationTransition' isn't defined for the class '_GetImpl' when using the stacked_services:0.5.4+2
There's a new version of stacked_services: 0.5.4+3 where I fixed that issue.
Please! add a video of How to use Authentication Service in your stacked architecture.
I wouldn't need to. It's literally exactly the same as in v1 (provider architecture) which I used in the firebase series. Look at the first video there and follow along.
amazing as usual
one question : do we need to dispose the TextEdittingController ?? if yes . where ??
Thank you! No we don't. The hooks disposes internally, all hooks do, or should since it carries state objects around.
Use RN
@@front-endanimal6359 I have, it was such a horrible experience. I use to change no code and then had to sit for an hour or two with build problems because something else changed or it just broke. I spent half my day every second day fixing build issues or trying to get hot reload to work again. I was building a payment application for one of the largest banks on Africa, when you're fighting the framework and building basic functionalities that should be given to you in a project like that it's a waste of time.
Ahahahahah, man, you create my day. It's very full descriрtion about RN . YOU VERY HAРР. Thank you!! Change success for my channel
@@front-endanimal6359 I'm happy to hear that. and I'm very happy I could help. Thanks for watching and commenting.
Finally new video. Thank you so much.
It took some time to make because of the setup I had to show and everything around it. I'm happy I got it out yesterday :)
I'm using a StreamViewModel to return a stream of a list of messages from a Firebase Database. Would you recommend using a StreamController in a service and then returning the controller's stream as the getter for the StreamViewModel's stream function?
Yes. That's how i do it in my firebase series as well as in my own code bases.
Hi how I can implement Animation because it required StatfulWidget, not StatelessWidget, vsync: this giving error how to use TickerProviderStateMixin
Hey, you should use a stateful widget for animations. You could also use Flutter hooks if you don't want to use a stateful widget.
This is an absolute treasure chest of knowledge. Just a question about the observable_ish package. Do I still need to use that or has it been incorporated into the stacked architecture already? Thanks.
Thank you! You don't have to use that anymore. You can simply call notifyListeners in the service and it will rebuild the Viewmodels that's listening to that service.
Hello Dane (again :) ),
I'm applying concepts from this tutorial to my new App, but got stuck with some questions: My App shows a Google Map and lets the user to add markers and when tapping a marker shows a custom info window for that marker, i'm confused about the state management of all these component together,
I believe in this case i have 3 main component for this view: the page, the map(with user defined markers), the custom info window(that appears and disappear upon a click on the marker on the map)
I wonder, should i put all state in one (ViewModel file), so have one pair of view/viewModel? or should i separate them, and if i separate how can i call a function from infoWindow ViewModel from the map ViewModel?
Sorry for the long question. and thank you again for everything you deliver, it's really helpful.
Well your map would just be a widget that's apart of your view, most likely the back of the Stack widget. Then you can manager your selected item / showing your info windo from the viewmodel with a boolean. One view and viewmodel should be enough
Thank you for great tutorial. I ran into a problem. Using observablish, RxList the state changes when the list is empty but I am not able to change the state when using removeAt. The RxList element gets removed but the state of B does not change when triggered the service form A. What could be the problem?
You're welcome :) I think the problem is with observable_ish. I'm looking to move away from it, I'll probably build my own reactive functionality into the stacked package.
@@FilledStacks Observablish has no change notifier in removeAt. I have to use remove method. Thanks for reply...
@@laxmankasula4252 Yeah, I'll be looking to move over to a different package soon or write a basic version of it for stacked.
Partial rebuild part is weird.
It's of course good that you can only rebuild some of the widgets on ViewModel changes (and not all of them).
But what is much more important - is to be able to only rebuild some of the widgets (that listen to changes), based on which values are changed, and not all of them on every change, whether this change has anything to do with the widget or not.
I agree 100% Will be working on this for v3, which will have a few additional features, dev tooling and better docs. Thank you for taking the time to provide feedback, I really appreciate it.
in provider architecture you used 'onModelRaeady' i have not seen that in stacked.
It's there. I just didn't need to use it in any of these examples.
Thank you for your framework and insights. Question --- It seems in the reactive section, if you click on the DoubleIncrement box first, it doesn't increment the count. It fires the method (I put a print in there), but just doesn't increment the counter at all. When you click on the SingleIncrement box, it updates both boxes, starting at 1, and from then on, the DoubleIncrement box tap then works and updates both boxes as expected. Going to keep playing with it (maybe it's something in my setup), but was curious if anyone knew anything about that.
Never mind! Figured it out. 👍 :D
Hey You're welcome :) You probably didn't finish the video by the time you commented :) Thanks for watching.
Awesome tutorial Dane 👍
Thank you!! :)
I was missing it... thanks Dane...I want to know more on services next...when to make services and how to categories them
Awesome! Thanks for letting me know. I am definitely doing services next.
Love it. I wonder if you can create re-usable components for common widgets. For example, for text, you can create something like ReactiveText .. or using extensions method: Text("test").reactive
You probably could but that's not the direction the binding should be going. the uI should be built from the state in the model. So the "test" there won't make sense in that text since that has to come from the models state upon rebuild/build
Hi Dane, for a global Theme, would you go the way with the ReactiveServiceMixin and wrap a Model around the MaterialApp which reacts to Theme changes?
I'd only know if I'd do it that way after trying a few approaches but that would definitely be one of them. I have a theme manager snippet on my website that you can check out. I'd start with that.
Great video😮
Can you please create or refer to a video or blog about getting data from API with models using stacked
Sure, there's a video here from an older series of how I do it. th-cam.com/video/qailF0Ut_c0/w-d-xo.htmlsi=G3AYZ-BdNSlYuuVR
@@FilledStacks thank you
thank you for this quality content. What do you think is the proper way of initializing a singleton service that has some async code involved ? for example initializing a database or sharedpreferences singleton service that has async code. Putting the async code in the constructor does not work.
You're very welcome :) I setup an async register module like this.
@registerModule
abstract class AsyncRegisterModule {
@preResolve
Future get preferencesService =>
SharedPreferencesService.getInstance();
}
That will await that getInstance call and register that as the singleton
Thanks man :) This is pure gold. was eagerly waiting for part 2 . This is first architecture i'm directly using and seems good choice knowing flutter a little. Any tips don't know bloc/mobX so directly learning this would be good ? Coming for React native background , hooks part was spot on :)
You're very welcome :) Yes, I think directly learning this would be fine. Especially starting off, if you find it's not too strict for your taste you can always move over to BLoC or MobX that has more strict rules in how to interact between business and logic.
how to use animation controllers with stacked?
The same way you would in normal flutter. Make a stateful widget, manage your controllers. My personal way of doing it is by using flutter_hooks.
Great tutorials! How can we rebuild ViewModel A when ViewModel B triggered a change for Future or streams values? Espacially which viewmodel should i use? ReactiveViewModel or FutureViewModel&StreamViewModel?
Thank you! Reactive viewModel like I show in the reactivity part of this video.
@FilledStacks Hi man, I've watched the whole series (and coded along ofc) and Stacked seems to be really amazing approach. Now I try to make an app using it. However, I've got a question to you. Is there a way to reach to the viewmodel outside of the build function? For example, I've got a simple button that needs to trigger function from viewmodel. I don't want to store it in build function though to keep it clean so I'd rather assign it to variable. I know I can create class extending ViewModelWidget for that button but I wonder if there's another way to do it. Or should we create a seperate class for different parts of the UI even if they're not that massive? Alternatively, would buildButton(model) function be a good option? Should we pass model like that?
Cheers man and keep up the good work. I love your channel since I discovered it, I'll spend a lot of time here :D
Hey, that's why the ViewModelWidget exists. You can create that and set reactive to false and it should be fine. It's always better to use a separate widget instead of a function.
@@FilledStacks Thanks man!
Thank you for lighting up my way.But i have this error when calling futureToRun on ViewModel : Closure:([Object]) => dynamic from Function 'error'
make sure you're using the closure corectly if you're using 1.
Hi Dane,
what a great tutorial!
Is there any example implementation of Reactive Value from List/Map?
How can I add those values from onChanged TextField(s) to List/Map?
I do appreciate your help.
Thanks, Dane.
Thank you :) Yes there are examples. I have a unit test that shows the use of RxList. The RxMap object doesn't actually work. github.com/FilledStacks/stacked/blob/669b95270b8d766cc9b9f5e7de3d63db6a3fd001/packages/stacked/test/reactive_functionality_test.dart#L63 Still have to implement that one.
@@FilledStacks Thank you for the pointers, Dane. I will get back to you. Waiting for more great features of your packages :-).
@@itungmundur Awesome! Thanks for watching :)
Is it possible to work with a combination of stacked state management with the set state and stateful widgets? Or would this cause problems? Is it possible to replace all stateful widgets with set state to stateless widgets with notify listeners?
It is possible, we do it. But only for local state in widgets, views can in all cases (that we've found) be built with only the viewmodel
Hi Dane,
That's an Awesome job of putting tutorials together!.
I have a question in StreamExampleViewModel. I see that you have used while loop to generate the DateTime in epochUpdate(). How to push or add data to the stream manually by clicking a button in this given example?
Thanks for all the videos you are posting!!
Thank you. Use a stream controller like in my Streams video. create the controller, return the stream for the required stream then you add the event you want onto the controller.
Thanks for the awesome tutorials. One question regarding controllers and hooks. Can't you just put a controller in your viewmodel and dispose it in override instead of making a hookmodelwidget for the controller?
Thank you. No, ViewModels should have no UI code in it. At least that's how I keep it separated. No controllers, nothing. UI should be in the UI files.
@@FilledStacks Understood, thanks!
@@brianmanuputty4412 you're welcome
Hey, if i create controllers on my view model, how would I dispose them, normal with stateful widget we would dispose them with the lifecycle method. thanks in advance
Hey, you should never create controllers in your viewmodel. ViewModel is for state and business logic only, no UI code in there.
Hi Dane, i am using your architecture in development and i am kind of stuck, i have a view which will get data from 4 futures and 2 streams. Is there like a way i can merge MultipleFutureViewModel & MultipleStreamViewModel so i implenent this?? or how do implement this, i will be patiently waiting for your reply
Hey Erick, I would use a normal viewmodel and handle it manually like shown before the future and stream viewmodel. Or I would use a MultipleFutureViewModel, use that to get the 4 futures then only handle the 2 streams manually.
@@FilledStacks Thanks Dane, i'll use the second suggestion. You're the man.
@@tek_stack You're welcome. Goodluck
Thanks for your packages again. i have to use Workmanager library for background works in my project and i couldnt succes to use any service and Workmanager dispatch method. Because Workmanager only allow static things. Stacked services have instance. So how can i use stacked mvvm services and Workmanager packege?
I don't think Stacked would make a difference to how you use work manager. If it's all static it means it probable won't spin up flutter so stacked won't even be active. You should use it the same way you would in normal flutter. if you want to use a service then make sure to construct it if it's null and then use it. That's a bout all i can think of saying, don't know what you're doing, what's wrong, what you expect to happen, why you think it's not happening, if it's a package that uses method channel, if that's allowed on background threads, if you need to do any setup before using it, does it have a execution time limit like iOS, does it depend on the OS to schedule a run, does it need special permission to run, etc.
But I can say that you can use workmanager the same way you would without stacked since it's all widgets all packages can be used the same way.
@@FilledStacks i construct the services class in Workmanager and i solved with your suggestions. Thanks a lot again. (:
@@yakupbaser6423 dope! Happy to hear that. thanks for getting back to me, now I know that works haha.
Hi Dane! Small Doubt .
In the "ViewModelBuilder" 's NAMED PARAMETER ,
which is [ *viewModelBuilder : partialViewBuildModel()* ] we are passing a newly created object.
Where as in the previous architecture series on provider (through which this package was born), we used the "locator" from Get_it package to inject the object into the Providers of our Views as lazy singletons. I'm curious to know is that something that is being handled by the package behind the scenes? because i checked the code of the ViewModelBuilder and couldnt find anything related to Get_it package. Please help. Thanks.
Hi, you can use both. When I introduce widget testing to through this architecture we'll be using get_it again. It's not needed so I didn't use it. You can just construct the ViewModel you want where you need it.
@@FilledStacks Oh i get it, We dont have any state we want to persist throughout the app lifetime in the View Models so we dont need dependancy injection for it.... am i right?
Good morning,
I wanted to ask a question not related to this video
I'm using provider
and I want to call an api at the start of the loading(init state)
I'm using the provider.of
but I'm getting the dirty state error
Hey, are you calling that within your view build method? I would advise against that, also because I don't know how you would fix that. I usually call initialisation logic in the onModelReady callback of my widgets in the stacked package.
This might be a weird comment/question. But there are some snippets on your homepage that seem outdated, especially considering this new architecture. Will you update/change those in the coming months?
I know, I probably won't have time to update that at all. It's basically how I've been progressing over time. I will just release new versions over the coming months that go over the old things and uses the new setup.
@@FilledStacks Thanks for your reply. I didn't expect you to update those, that's just too much content and most of it, if not all, can be adapted to suit the new advanced coding abstraction and services. But there are some important ones I had some trouble with, like Shared Preferences. And I might also be a good idea to let people know that they need to update to the latest way of doing things. Because the Dialog Service you created was partly broken with new flutter updates etc, untill I used the new stacked_services.
@@wickedgummybear3104 SharedPreferences I still use exactly as in the snippet. I create the service and use it as shown there through get_it. I show the full async setup as well. I'd hope the developers trying to learn from my content has the ability to adapt code to new versions without too much hassle.
Wow! A bit overwhelming but it is very intuitive architecture to build complex apps. I will do some hands on and try to get a hang of it.
One thing is not clear to me however is, is ViewModel instantiated only once or is it instantiated every time widget is built?
With some testing, I have found out that my view model is instantiated everytime my view goes and comes into scope (tab page view). My tab page view has a list of items. So, everytime I swipe to this page, the items are fetched from database. Is it not better to have this in memory? (i.e.. keeping view model in memory)
Is it normal behavior or am I missing something?
The ViewModel will be recreated when init state is called and the widget was completely disposed. So only when the _model value internally is set to null or if createNewModelOnInsert is true. Other than that it shouldn't rebuild. Swapping tabs removes the view from the widget tree so it's created completely new everytime. You can use a singleton viewmodel and set disposeViewModel to false. The builder will still be called but you'll get back the same viewmodel at least.
@@FilledStacks ok, thanks for clearing that up. But for my simple application, I think just using provider is straight forward. I inject my view model in main and it is not reinstantiated switching between tab pages. But what are the advantages of reinstantiating view model every time? why not just keep the instance in memory during (apart from low runtime memory usage)
@@bonmec101 I instantiate the viewmodel based on the lifecycle of flutter widgets. This means as widgets get created and destroyed so will their viewmodels and will follow the proper dispose functionality. I show in this video how you can have widgets with it's own viewmodel. If each of those widgets are in a list and their viewmodels are subscribed to a stream you'd want them to be only listening when in the tree and not listening when out. The same for most of my views. It follows the lifecycle of the Flutter widgets so I don't have to maintain a separate lifecycle guideline for stacked.
@@bonmec101 You can always make it a stateful widget and keep the model in memory. The model is kept in memory if you look at the viewmodel builder widget.
You mentioned that observable_ish is not the best approach, since it's a very old package. I need to make a reactive service but reluctant to use observablish. ls there an alternative to observablish ? Also, when can we expect a similar feature in stacked architecture?
Yes. I've stoped using observable_ish completely. I just use normal variables now. When you change something in the service and you want the viewmodels to update you can simply call notifyListeners in the service. It works the same.
Can you explain the use of the child parameter in the builder function of ViewModelBuilder? Great video btw.
The child is for a static child that will only be built once. Provider allows you to pass a static child that won't be rebuilt so if you have any UI you don't want to rebuild you can use that.
For partial builds, can you exclusively rebuild widgets based on if and only if a specific viewmodel property they use is changed?
Not yet but I created an issue on the github for me to implement the functionality.
@@FilledStacks COOL!
Thank you so much for this series... I have a problem, I'm using stacked, and stacked services for Navigation, the Problem is when i start the app first two routes take a delay to push maybe around 1s ... This happens only when i open app, if i pop the route and then navigate again it goes smooth... There is not any logical work... Its only UI build yet... Please help me
Replied on the other comment
@@FilledStacks yes you did, thank you so much
Hi I have a question is there any way to use a widget with a HookViewModelWidget inside a widget with a TransactionStreamViewModel and avoid rebuilding the stream, (I am trying to make a timer inside a widget that listens to a stream).
Ji Juan, the best advice here is to put your rebuilding method on the lower edges of the leaves. I would give the timer its own viewmodel and listen to the stream in there only. This means it will rebuild itself and nothing else around it will.
@@FilledStacks great thanks
What is the Advantage of using useTextEditingController?
You don't have to use a stateful widget to store your controller locally as a field. It's a lot less code as well.
Hi, how would you go about resetting a list to empty?
ex: A Cart Service.
I know you would initialize it as RxList();
Then if the user would want to clear it, you'd just reset the array to be empty so that it would O(1).
But using RxList doesn't allow re-initialization and you would lose the subscribers to the list - and emptying would take O(n) where n = number of items which is slow.
How do you approach this situation?
Hi Sean, I would simply call clear on the list. I only optimise when I see a problem. Using normal clear hasn't caused any problems for me so I'm happy using only that for now.
Hello, I think there is a problem with the final code for the provider architecture from your GitHub the problem is no post fetched in the home view, can you please fix it or point the problem so I can fix it
Hey, I don't think I can. I haven't looked at that code in a while. Hopefully you're aiming to become a good dev? That gives you a great opportunity to debug some one else's code, find the flaws and fix it. It's a great practice i use to do to improve my development skills.
I must say this Architecture is a welcome one for me ... please how can one implement search using this architecture{MVVM}?..
.
Awesome. Search would be the same as all other features. Pass your string to your viewmodel from your view, call search on the service then display the results in a list.
Hey just letting you know that in _ErrorMessage class the line
model.error.message
doesnt work but
model.error().message
does. Edit: i just saw that in your repo you changed it to model.modelError.message which also works.
Thanks! that's pretty weird. I'll check that out. I don't remember making that change.
Hey Dane, have a quick question about the Stacked architecture. How would you suggest sharing widgets with two different ViewModels? For example, in my app, I have a widget I'm extending with HookViewModelWidget, but ideally I'd like this widget to be used in two different views with two different ViewModels. Is this a possibility?
Hey there, I'd give the widget its own viewmodel and add the functionality in there. Then you can use it as a widget with that functionality wherever you need it.
Scrolling down the comments, I have to applaud you for replying to pretty much every single comment. Would be ironic if you didn't reply to this comment 🤔😅
haha, i reply to all the comments I get because I appreciate the inputs and the questions. I like helping other developers, I take a day or two to reply because I have a shit load of work that also has to get done in between me helping others :)
How do I get data in one view from the view model of a different view? Let's call them view A and view B to make it more clear. I tried creating an instance of the view model A's class in view B and checked the length of a list that should already be filled but it's showing 0. We go to view B from view A so when view A is created, that's when the list is filled with data from an API. That part if working fine. But I need that list in view B too but I don't want to pass the whole list as an argument. The use of list from view model A in view B is pretty situational and passing the whole list might be a waste of space. How do I do it?
If you don't want to pass the list then use what I show in the video. Add it to your service and read it in the other viewmode from that service
@@FilledStacks I'll try that. Thank you.
What is the difference between using the ReactiveViewModel and using a ProxyProvider for dependency injection?
The big difference is that the reactive viewmodel is not for dependency injection, it's a viewmodel for binding the UI to state in the ViewModel. ProxyProvider is for dependency injection, we use get_it for service location and injection in some places.
Does this provide any real benefit over the provider package besides different way of naming things?
Yep, reactive services, refined viewmodel creation patterns and boilerplate less stream handling as well as future handling.
Those things you'd basically have to write yourself when you use the provider_architecture package. If you're talking about pure provider it provides a clear separation and state management implementation. Provider itself provides you with base widgets to use but there's no state management functionality or pattern it follows.
hi i got an issue, i dont if its in my code. i use the stacked navigate route and when i pass an arguments value with a null data its still fine. but when i use the variable that has a value null from the arguments and insert it to TextFormField(initialvalue) or textController(text) it has error..suppose to be it should return an empty string if null. But my constructor is still ok even if its null when i print it out..just in the TextFormField(initialvalue) and textController(text). Thanks
Hi, it's your code. You can't pass null to either 1 of those. It should be an empty string. Your code should be fine unless you're indexing into that value without any checks. then it'll also break.
@@FilledStacks ohhw okay2 thanks
please make updated video as well ! Thanks
Hi, you can find updated information on stacked.filledstacks.com
Regarding "partial view rebuilds", i have a question
The 3 widgets are bounded to the same view model because they are surrounded with the same view model builder? Or how does that work exactly?
If they are below the viewmodel provider in the widget tree then they can access it. It uses Provider for the "Inherited Widget" functionality as Flutter suggests we get dependencies from higher in the tree.
I don't know if that answers your question because I don't know if you're asking how provider works or Flutters Inherited widget system.
@@FilledStacks thanks!
I don't have a lot of experience in provider, but when I learned riverpod, one big difference between it and provider was the idea of "parent widgets" in such a way that you can create a state globally and fetch it wherever you need it.
Forgive me if I'm not clear enough, but is this an issue with provider in some place? Is it fixed in stacked in some way?
Thanks!!
@@ComputerScienceAcademy5220 There's no issue with provider. Stacked uses provider. It can used Inherited widget if needed, we basically just need a change notifier supplied and rebuild when we need the UI to fire. So we're probably only using 5% of provider functionality. There's been no issues we've seen over the last few years of development and apps built for clients.
Awesome 👍
Great work !! keep going guys
Thank you. I will try my best to keep making the videos.
Hi,
In FutureExampleViewModel, can I use snackbar notif to overide onError(error) ? How to use snackbar or flushbar package?
Yep, you can override onError and show your snakbar. I have a snackbar services in the stacked_service. check that out if you're using get and the navigation service setup as well.
I know this is not one of the two options but can you discuss the HookWidget concept?
It's basically just if you want to use Flutter Hooks and the ViewModelWidget. If you don't then you don't need it. If there's no Flutter hooks tutorials out there I'll make one.
Bro i m using your library but i have a issue with controller for example TextEditingController i wanna clean it but from my viewmodel can i do it?
You can but you shouldn't. No view code should be in the viewmodel. Dispose it in the dispose call in the stateful widget.
Absolutely love the architecture so organized. Thanks for this! - so... I have created a login page which retrieves a jwt token from an api service on successful login and stores it in SharedPreferences. I wanted to know the best way to incorporate it in this architecture so on page refresh or start of the app it checks the prefs for the token if null send them to the login page. Same with the routes, if the user types the url to another route they get sent back to login if no token is found. Thanks again!.. Im sure this would be a great tutorial.. haha
Awesome. I'm happy to hear that. I have a tutorial for that it's called startup logic and custom user profiles. It's in the firebase course on my channel. You can use the same logic for the startup logic.
@@FilledStacks Thanks again, I watched that video and it helped me a lot! ..I'm using that logic.. Another question, is there a way to use the override futureToRun() in a Model when extending just the BaseViewModel and not the FutureViewModel? What I am trying to achieve is to run a quick check of the SharedPreferences for an authorized user before the model is ready just in case they try to navigate to an unauthorized page via URL in the browser. Then show the page if they are authorized and navigate to login if they are not. I want to be able to use this on every view in the app. Thanks!
@@djcali00 you don't need to use the override. You can just use a normal BaseModel and a function that you can call in onModelReady. The same as we do with the startup logic in the startup logic video on my channel. FutureViewmodel is used for a Viewmodel that depends on data returned from a Future.
@@FilledStacks Got it! Thanks!
2 questions.
1) I presume if I use stacked, I won't need mobx anymore. Is this correct? for state management and beside readability/maintainability, is there performance improvement over mobx?
2) While waiting for more series, is there any documentation I can read to create/follow the stacked architecture?
1. Yes you are correct, this is a full state management solution
2. On the read me I explain what I explain in the first video. If you want to see how I use it in production you can look at the Firebase series. It uses provider_architecture, which is v1 of stacked which I renamed to stacked. That series shows how I build quite a few things, with Firebase.
@@FilledStacks Thanks. For point 2, I presume if I use REST API instead of firebase, it will still work right?
Do you have recommendations to structure codes? probably a guideline or something.
@@ericchua3492 Yep, rest api should work fine. I show that in my apps. If you look at my first provider architecture video on the channel you'll see how I structure my api class.
Hey Dane, as I wrote in other videos, I can't thank you enough for these videos! They are more than helpful! One question about the reactive services: did you plan to include observable_ish functionality as a part of the stacked package in the short future?
Thanks Stanko. Thank you for leaving the nice comments and the feedback. observable_ish was a short term solution to get my idea across. We will be deprecating its use and removing it from the readme's as well.
At the moment we call notifylisteners in the service when we want a service to rebuild. observable_ish was a good start but we're moving on from it now.
@@FilledStacks Thank you for the detailed answer Dane. Will be patiently waiting for future updates regarding this
@@stankokostic725 Updates should be coming soon!
Hi Dane, about rebuild viewmodel A on viewModel B trigger "literally in the first iteration", what do you think about merging pub.dev/packages/rx_command in Stacked ? I'm absolutely not an expert but last version of rx_command (based on stream, no more on observable) seems pretty good.
Hi, I have looked at RxCommand before. It would only add an additional layer between calling notifyListeners, which at the moment is not a problem to type out manually. I don't see the benefit of using commands yet, but maybe it'll come to mind when I use it more. I currently don't use it in production and haven't needed it, if I do then I'll most likely integrate it somehow
Hey man , Started out this pattern. Bit of confusion on basic todo-list.
I've screen A showing todo-list with (TodoListViewModel) ,now on button click on appbar it moves on
Screen B have (AddTodoViewModel) from which new Todo can be added.
Now problem is how can i update TodoList while adding Todos.
Which approach is best for this ? Don't want to use Navigating back and then adding it like in typical android activity.
@FilledStacks can you please throw some light on it ?
Sure, you can use the second example in this tutorial where I show you how to update different viewmodels based on changes in 1 service.
It's in this video so you can just watch the second part after the rebuild example and then use that code.
@@FilledStacks You mean by making reactive and then by service right ?
But won't that be much too much for this or it is very fine to use ?
@@evengrant1616 That's how it's supposed to be used. If two viewmodels require the same data then we share it in a service. That's a core part of the architecture.
as always, good content bro. deepdive into services next pls. thanks.
Thank you :) I'll note down your choice in my list of things : )
Instead of RxValue cant we use ValueNotifier ?
I don't know actually. At the time I didn't know about ValueNotifier. I'll check it out and see if it's worth it.
@@FilledStacks Yeah definitely , recently introduced by the flutter team but i've seen many apps using it.
@@martinharris4416 Sounds good. I'll see if it can be substituted to do the same thing. I hope it has no dependency on Flutter itself otherwise it'll make the services not unit testable.
A really great content Dane! Thank you very much! One question, can i set my TextEditingController in my ViewModel instead of using Hook? Is it a good practice? I've tried to implement the Hook method but i found a problem when i want to set the value of the TextEditing after the widget already built.
It's my pleasure to make this content, and thanks for watching.The Viewmodel should have no UI code in it. If you don't like the Hook method you can simple use a stateful widget. I set my text editting controllers with a callback function passed to the viewmodel on construction. There should be a better way, but that's how I use it at the moment.
@@FilledStacks Hi, I am still going through your videos, when you said the viewmodel should have no UI code in it, what if I have a button that depends on condition that it gets from a Consumer widget, would this be also in the View? ie : Consumer => if( consumer.state ==1) return button1,else return button2
@@vontdeux that would be viewmodel.property ==1 ? button1:button2
@@FilledStacks so this would be in view or viewmodel?
@@vontdeux That would be in the view. The view should ONLY render what's provided by the viewmodel. You can check the viewmodels state and then render accordingly. Control flow is not the same as business logic. If you're checking if something is visible or not by looking at a property in the viewmodel that's not business logic. That's just basic control flow of what you'll be rendering on the screen .
hi guys i got the issue after adding smart widgets, and i changed the home in main.dart. after that i got the error as ----
No type CounterService is registered inside GetIt.
Did you forget to pass an instance name?
(Did you accidentally do GetIt sl=GetIt.instance(); instead of GetIt sl=GetIt.instance;did you forget to register it?)
'package:get_it/get_it_impl.dart':
Failed assertion: line 251 pos 14: 'instanceFactory != null'
A RenderFlex overflowed by 199594 pixels on the right.
can anyone please help me, what should i do now
Make sure you have registered the counter service before you attempt to get it from the locator.
I have done all the steps as you said in the reactiveViewModel but still my double Value not changing when single increment button is tapped or single value not changing when double increment button is tapped. Please help?
hey, I won't be able to help much. There's quite a lot of things that can go wrong. Observable_ish has been removed from the package so it won't work anymore. You should use the ReactiveValue or ReactiveList in the latest stacked release.
@@FilledStacks I was also suspecting rxvalue has some issue. But there is no object called ReactiveValue in the stacked package can you just update this in the notes of the pub.dev. or the written tutorial.
@@vivekiyer9273 Make sure you have the latest version of stacked 2.0.2
@@FilledStacksThanks a lot it worked I have changed the version from 2.0.0 to 2.0.2 and changed RxValue to ReactiveValue it worked. 🤩
@@FilledStacks I faced the same issue. But when I moved notifyListeners() from updateCounter() to increaseCounter() and doubleCounter(), it's worked. But I wonder is it the right way or RxValue must be replaced by ReactiveValue?
Good day, I implemented your code but when I run the partial builds view it rebuilds everything, could you please help with the cause of that. Anyways thanks for the great tutorials.
Awesome, thanks man. Did you set reactive to false foe your views?
@@FilledStacks yes I did but seems like the new flutter version could have caused the problem
@@amanyasin4811 Could be, or it could be because of one of the most recent fixes we pushed. Please log an issue with the example of the not working code and i'll take a look at it.
hello, noob question. how to implement initState and dispose in architecture? I'm kinda lost, I created my app without architecture and it lags when changing screen, then I saw your video and tried architecture and it made a huge difference, but I'm lost on how to implement initState and dispose since my app creates a database if there's no database yet and I'm calling it from initState, what approach should i do?
Hey, I'm happy you experienced the improvements. Having the logic separate to the view rendering helps with blocking tasks as well. you can call your startup logic in the onModelReady callback on the ViewModel builder. Put all your database code in a service then call your initialise functionality from your viewmodel.
@@FilledStacks ohhh so there's a onModelReady, I'll try it right now. Thank you very much for your quick response and for the amazing videos!
Hi Dane,
Thank you for your explanation and contribution, I love your videos very much. And you are the best flutter MVVM's expertise!
I am using stacked to implement my project which deploys a google map on the home UI inside a SliverList.
To keep the map alive after the user has scrolled over, I create a stateful widget with AutomaticKeepAliveClientMixin. However, I don't know how to also extend this stateful widget with ViewModelWidget.
Due to the MapWidget already extends StatefulWidget, how can I also extend with ViewModelWidget?
Below is my code summary. I get this error from terminal. "[ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: NoSuchMethodError: The method 'animateCamera' was called on null."
I think the reason is the model.homeViewMapController cannot reference to GoogleMap controller.
I'm looking forward to your kindly help!
Alan
class HomeView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ViewModelBuilder.reactive(
viewModelBuilder: () => HomeViewModel(),
onModelReady: (model) => model.listenToPosts(),
builder: (context, model, child) =>
Scaffold(
backgroundColor: Colors.white,
body: _ContentScrollable(),
drawer: CustomDrawer(...............
.........);
............
}// End of HomeView
class _ContentScrollable extends ViewModelWidget {
_ContentScrollable({Key key}) : super(key: key, reactive: true);
@override
Widget build(BuildContext context, HomeViewModel model) {
return Stack(
children: [
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
MapWidget(),
............
...........
}//End of _ContentScrollable
class MapWidget extends StatefulWidget {
@override
_MapWidgetState createState() => _MapWidgetState();
}
class _MapWidgetState extends State with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context);
return ViewModelBuilder.reactive(
viewModelBuilder: () => HomeViewModel(),
onModelReady: (model) => model.initState(),
builder: (context, model, child) => Some Widget wrapped with GoogleMap();
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(37.354107, -121.955238),
zoom: 12,
),
markers:
Set.of((model.marker != null) ? model.marker.values : []),
onMapCreated: (GoogleMapController controller) {
model.homeViewMapController = controller;
model.updateMapLocation();
},
Hey, thank you. I appreciate the comment. Your error has nothing to do with the stacked setup. And in terms of the mixin you can add the mixin regardless of what state it's inhering from.
In this case I'd say use a normal stateless widget and use the getParentViewModel function to get your model in the build function where you need it.