What are Services and How to use them in Flutter
Вставка
- Опубліковано 31 лип 2024
- This video goes over when and why I create services. This video is divided into three parts.
00:00 - What are services
02:49 - Dependency Inversion - Removing third parth dependencies from ViewModels
06:43 - Group features using Single Responsibility Principle
11:07 - Share state between ViewModels
Written tutorial: www.filledstacks.com/post/ser...
Lot of flutter videos are only about designing some specific things. Or create specific functionalities. You are the only one that talks about what's really important in a real world scenario: put together and manage in a right way a complete project. I think theese are the most important things if you want to really learn how to code and organize yourself. And it's great that you don't only share the code but you explain why is written that way and how did you make some choices. So thank you for your great work. Not everyone shares for free things like theese (written, explained and organized so well).
Hey Francesco, I appreicate your thoughtful comment. It means a lot to me. My goal is to share only things that will improve a developers mindset or code principles. I'm happy to see that you picked up on that. Thank you again for your kind words, I really appreciate it.
You are correct! This is by far on of the best channels along with ResoCoder, Fireship.io and Coding with Andrea, as they focus on design principals not only on code.
@@FilledStacks Thanks. One more thing. I have a suggestion for a future tutorial / addition to your architecture. A service to correctly handle data persistence (for example with sqlite or shared preferences).
@@francescopasin1928 I've seen quite a few of those requests. I'll see if my sql implemention of sqlite is worth sharing. i'll compare it with resocoder and the others implementation. If theirs is better than mine I'll probably not make a full video about it and just point to that one.
@@FilledStacks No it is not better then yours, unless you are working on a team of 20+ developers. Your approach is by far better for small teams and newcomers. ResoCoder tutorials are more for people who wants to work on a huge team. I think "the more simple, the more maintainable" way is better for small teams. Its like comparing Vue/gridsome you are using in your site with Angular :)
The Flutter youtube community is awesome, I'm learning so much
Awesome! It makes me happy to hear that. the community is great, welcoming and very supportive.
Absolutely. But, it needs nourishment...
Bro you do an amazing work writing a tutorial and then recording a video. Keep it up!!
Thanks man, I'll try my best to keep it up.
Man🔥 , Your videos are excellent and unique, I recommend these for every flutter student , 💓from india
Thank you! I'm happy to hear that and thank you for the feedback. I appreciate your kind words and recommendations.
I like you coding style which extends your living style! You are the best!
Thank you. I appreciate it and I'm happy you enjoyed the video. Thanks for leaving a comment
some of the cleanest flutter arch code I have seen!
Thanks man! That means a lot. And thank you for leaving the comment.
It is very informative, I definitely need to watch it a couple of more times! Thank you FilledStacks for sharing knowledge with us!
You're very welcome. And thank you for leaving a comment. I appreciate it. It's meant to be a video you can come back to at any time to rewatch certain parts. I'm happy to hear you found some value in it.
legend has it that if you're early you'll get a heart from Filledstacks. :)
was it true?
haha, You're right:) But I couldn't do it last night. I was so tired after putting out this video I went straight to bed lol. But you still got the heart though :D
@@sadhlife hehe
Your thumbnails are so asthetically pleasing.
Thank yooooou. I never know what to make buy I like the way they look.
Your coding standards make life easy for developers like us !
This video is what i was looking for ..
Else i would have been creating standards for services on my own 😂
Thanks a lot ❤️ , keep up the great work !
Yeeeaaahh! That's awesome to hear man! Exactly what I was hoping for. I'm happy that it's been helpful. I'll try my best to keep putting out good content.
Thanks a lot for the top quality tutorials.
You're very welcome. I'm happy to hear that the quality is still considered high. Thanks for watching and leaving a comment
You finally released it! Thank you so much. You sir, are a gift.
Haha, You're welcome :) I'm happy to see you were waiting for it
@@FilledStacks If it's not too much to ask, after the testing video, could you please take us through how you went about making any one of the specific services in the stacked_services package?
@@gid3onm891 that's defintely not too much too ask. Thank you for the idea. There's still the data layer that I'd like to cover which used Freezed for data model generation then I can probably go over the basic stacked services.
@@FilledStacks Thank you!! I simply cannot wait!
Maaan! I've been waiting! Another great video!
Thanks man!!
Awsome man, keep doing the good work!
I will try my best to do that.
Great! Thanks man!
Looking forward for unit testing videos :D
Awesome. Me too, I'm excited to share some of the unit testing rules I've been using
1 year on, still an exceptionally valuable video
Awesome! I'm happy to hear that :) Thanks for leaving a comment a year later after you've watched it. It helps me gauge if the video is still relevant.
Amazing work! Thank u so much . It help me a lot.
Thank you and You're very welcome. I'm happy that I could help :)
Love your tutorials sir😊
Thank you. I appreciate it :)
Great video as usual! I use almost the same approach as yours, we are both coming from a c# background. Again as i mentioned on another video you uploaded the lack of interfaces makes The Liskov Substitution Principle (LSP) harder to maintain in dart as we need to use mixins or abstract classes for contracts and as a c# dev i really hate this in some situations. Keep, up you great work.
Thanks. You are 100% correct. Even in C# I only used interfaces when I required the abstraction. Mostly to accommodate unit testing. Luckily for me here I can mock out the implementation class as an interface simply by "implementing" it on the Mock object. This has allowed me to cut out the interface/implementation overhead that I've never liked.
I still use it for actual abstraction where required for things like Authentication Providers where I have the API and Firebase auth and OAuth in one code base. I develop against the AuthenticationProvider interface instead of the class that implements it.
I don't do interface/implementation in production so I don't share it in my videos. I haven't required the benefits of it at any point so I have received no gain from it in the past, which is why I decided to drop it as one of my "must have" principles.
Great video 👍🏽👍🏽.
My architecture is basically the same: models, repositories, services, viewmodels and ui.
Awesome! I think regardless of the architecture name these principles are always present as it makes the most sense in an object oriented approach.
Brag bro this architecture is not just easy to understand it the best for me and its very scalable.!
Yeeeaaaahh!1 That's great news, I'm happy that you have find that same experience.
I love your videos
Thank you!
Great content! Cool as always... You reserve more subs.
Thank you. i shall reserve more subs for myself haha :)
@@FilledStacks Oops. That's a typo. I meant "you deserve more subs"
Fantastic! Such clean architecture! Looking forward to unit testing. Would you consider doing a 'avoid these mistakes and do it like this instead' - tutorial? Would appreciate that!!
Hey Viktor! Thanks for the comment, I appreciate the feedback. and YES, that sounds like a good idea. I will first have to see implementations and how people are using the architecture and then I'll be able to make such a video. But yes, that's definitely a great idea. I'll start asking for examples / code bases to look at.
great tutorial!
Thank you!
FilledStacks should be the official tutorial page for Flutter
Haha! That would be awesome if that was the case.
The demigod's back again 🤩🤩
lol .. I hope the video is informative.
Your tutorials are on point..I had a problem when I was new to flutter.
The stacked package...The stacked package is outstanding.
Quick questions, 1. how does one use the navigation service to navigate between a view with tabs i.e switch between tabs 2. How can I return back to a specific tab(pop) after an event using navigation service
That's great to hear. For tabs i just use an index and swap between them using active index. i also use the animations package from Flutter team to still provide a transition as I swap using a normal switch case.
2. Subscribe to the stream and pop when it gets the value you're expecting, or await the future. Pop when it's completed with the value you're expecting.
@@FilledStacks thanks for the reply. Will try that
Thank you so much for this video... Please make a video about all type of exception handling, like network error, server error, timeouts etc...
I don't have a different way of handling them. They're handled in the service or the viewmodel depending on what we have to do with the error
Congratulations on 1 million views👌👌🙌🙌🙌. Keep up the good work, I might probably contribute around 10k views.
Wooooooooooow! I didn't even know. Thank you very much. I appreciate it.
Please! add a video of How to use Authentication Service in your stacked architecture.
Hi, I won't be doing that since it'll be 100% exactly, literally, completely, 100000% the exact same as in the firebase series.
Thank you sooooooooooooo much
You're very very welcome :D I enjoyed making the video
hopefully useful knowledge
I hope so too. It's been very useful in my career, i hope it is to you too.
Hi ,
I have a suggestion with respect to productivity and faster code. The suggestion is not for the architecture but for the tooling of the architecture. For tooling it can be on the similar lines as of angular
Angular has CLI + visual studio code plugins , which helps generate the different parts of the application.
eg. ng new ..., ng generate component, ng generate service, ng generate ......
Also there are CLI's which help you build initial architecture by asking questions and a complete working application is generated with all the boiler plate and the developer is left to focus on business/domain part of the application thereby kickstarting any project. Even if the flutters default template if changed to your architecture with all parts together, it will help.
I see there are people using your architecture and developing production ready templates and they are also good.
The above is not necessary, but just an icing on the cake. Just saying, as if done by you , I believe it will be the best. I will also give a try after I understand everything deeply, currently learning flutter :)
Hey, yes I have been building something like that. It takes some time. In terms of the templates it'll take a lot of time building those cli tools but I'll most likely add them as i'm developing another internal tool.
great!!!!
thank you!
Greate video series Filled Stackes ! thank you for all the effort going into these videos, Quick question regarding the last part of this video, when you have the data cached from the futureToRun() function how can you assign that to the model data before you fetch newly updated data from the API/server backend to first show the cached data to user/UI view and then update after the retrieval from backend?
That's a great question and That's actually not built in. When the ViewModel is shown its actually constructed again so it loses all context. That's a great question, I never thought of building it in there. I usually build that as a stream because it's easier to do using it. Broadcast cached data first, fetch the new data, broadcast that when ready. So i use the stream viewmodel for it. But that should be an option for singleton viewmodels. I'll look into it.
Thought I would share how I architect things in my Xamarin.Forms projects. Not sure how it would translate to Flutter (or if it even needs to) but good thought food to chew on. There are 5 projects Root, Models, Core, Services and UI. Each of these libraries use the "by feature" folder structure. Actually I use the term "domain" in lieu of "feature" where a domain is a major section of the app. Core contains the AppManager class and all view models. The UI library is the only library with a reference to Xamarin.Forms. Root contains various helpers and extensions and no specific logic for the app being built. It is re-used across all apps. Models and services are self explanatory. Absolutely no business logic resides in the UI library. Everything has a reference to Root and Models. Core has reference to Services and UI has reference to Core.
The AppManager class is shall we say the conductor of everything that happens in the app. Has lifecycle methods that get call from Xamarin.Forms lifecycle methods. AppManager lives in Core as well as all of the view models. The method signatures for all 3rd party packages, dialogs, etc. are abstracted out via interfaces and passed to AppManager constructor on startup from AppDelegate or MainActivity. So AppManager only knows about the interfaces not the 3rd party classes behind them.
The view models can access the interface instances from AppManager as they need them. AppManager also has a data store for data that needs to be shared across VM. AppManagers constructor is also private and exposes a different set of properties and methods to services vs view models vs UI. Also UI only instantiates UI classes - never instantiates any classes that live in Core. AppManager instantiates all view models. All navigation requests exist within Core and are made by view models or AppManager. When navigation request is made, a GUID (related to a specific instance of a view model) is passed to the UI's navigator who passes that GUID on to the page. Page then requests their view model instance from the AppManager.
One thing I think most overlook is properly categorizing specific types of business logic. For me business logic is either domain business logic or view business logic. Domain logic consists of pure business rules. It's the business rules that your 1960's business analyst would know like the back of their hand (by 1960's I'm emphasizing before there was personal computers). Business rules still the same then vs today. View model logic are business rules that determine how the final result of domain business rules should appear on the page. View model business rules change as UI technology changes. Domain business rules go in services and view model business rules goes in view models. View models should not be domain smart. They should be page smart. View models are 100% de-coupled and pass data to each other via the AppManager.
Services library is broken down as follows. Each domain has an IDomainService and DomainService (e.g. IHomeService and HomeService). IDomainCloud and DomainCloud. IDomainLocalDb and DomainLocalDb. IDomainService implements IDomainCloud and IDomainLocalDb. DomainService will interact with DomainCloud when there is connectivity and DomainLocalDb when offline. Each DomainService inherits from an abstract class actually named DomainService e.g. HomeService : DomainService. CloudRepository handles obtaining authentication tokens, refresh tokens, contains base REST methods i.e. GET, PUT, etc. DomainService has properties called ActiveRepo, CloudRepo and LocalRepo. ActiveRepo will be an instance of IDomainCloud or IDomainLocalDb as connectivity is lost or gained.
Signatures for methods that interact with the server go into IDomainCloud and methods that interact with local database go in IDomainLocalDb. Method signatures for biz logic that do not interact with either the cloud or local db (such as validation methods) will go into IDomainService. Domain business rules always go into the DomainService. DomainCloud and DomainLocalDb are only responsible for retrieving data. Each method in DomainService that originates from IDomainCloud or IDomainLocalDb always returns an instance of Task. E.g. Result. DomainEnum can be Successful, Failed, Offline and other enum members that indicate which specific validation may have failed. Result also has Data property of the type specified in Result's second generic param.
So in a nutshell that's how it all works. I took this approach cause as you know Microsoft changes UI frameworks on a whim so I wanted all logic to be 100% independent of the UI framework. However I'm not sure how I would translate all of this given Flutters MVU style. I think I could but could possible leave behind putting everything in external libraries given the fact that Flutter is the only Dart UI framework out there so having everything with the Flutter project doesn't carry much risk. Especially given its goal of being re-used across desktop and web. I'm also reluctant because achieving this architecture with C# was pretty easy. Even easier with Kotlin. I know with Dart it can be done but would probably have to jump some hoops to get there.
Thanks for the detailed comment, I had a similar concern when moving over from Xamarin. I was not a Xamarin.Forms dev, I usedd MvvmCross and "native" implementation. A project per platform. That is where stacked comes from.
You're right about not needed multiple libraries to include since it's all dart and it's the only 1 out there. I've been very successful in terms of the productivity, maintenance and output using the stacked architectire. It's 100% inspired by Mvvm without two-way binding. So basically MVU I guess.
The architecture you mention doesn't sound to difficult to implement. Dart and the associated packages like get_it has all the basic requirements for you to do this. I can already see how to do most of it in my head. As someone that came from Xamarin for almost 5 years, Flutter is AMAZING! Way less code, much more productive given the hot reload and very very performant applications. Super exciting to see more Xamarin devs looking at the technology.
@@FilledStacks Yeah really impressed with what I've seen of Flutter so far. Lobbied to use it with current client - even spent a week of personal time making a POC to demo - but they are a Microsoft shop thru and thru and was just not having it. So have to get my Flutter fix thru personal projects. But yeah I'm extremely impressed with Flutter so far.
Thanks for the tutorials, they are next level. Is there a way for services to communicate? For example I have a firebase Auth service which looks after the jwt token. I have another graphql/hasura service (which would be in the api “wrapper” service) that needs to use the token and also the refreshed token when that happens- what are your thoughts as to the best approach?
Thank you!
Thank you Larry. Yes, i show that in the video. You simply get the service in the other service where it's located. I show it with the api example where I get the api service in the post service
I'm basically using the same architecture just moved services and models into a folder called "core" and I'm also using smart_services folder which stores the state of API or application.
nice naming :D I like it
Great！
Thank you!
I'm a big fan of yours. Thanks for your all videos. I have a question about how to use this Stacked under the menu structure. Let's say there is a bottom menu and 4 pages there. In this case, I don't know how to make view and view models for each page.
Hey Eric, thanks and you're welcome :) I get as much from making the videos as I assume you get watching them. I would make the menu view have its own viewmodel as well as the views in it. I wouldn't do anything special for that. It'll just be a normal view to me. The views I would swap out based on an index in the MenuViewModel
Hey thank you for your hard work. I'm new to flutter and just finished a udemy course and was atonished from the free courses you provide on youtube. They cover many daily use cases developpers need in their apps. One thing I am not understanding tho, why do we need to use get_it and injector to create an instance of the Api class, why dont we just import the class, and call API(). I know that is surely a dumb question, but I told you I am a beginner. Thank you for your hard work.
Thank you. It's not a dumb question at all. The reason we get our api from a service locator is to remove the hard dependency on the implementation of the API class. What that means is that we can swap out the API class during unit testing and provide an api class that returns exactly what we need for our unit test. If you construct that class in the class you want to use then you cant perform unit testing on it because it has a hard dependency on the implementation of the API. If you're a beginner this won't make sense at the moment. So what I suggest is to use it the way you think is most natural then try to unit test that specific class that you're creating. That's the only time you'll see the impact a hard dependency has. If you don't unit test then it's also something you'll see when maintaining a multi year project.
Say for instance you construct the API with a specific implementation everywhere in all your classes that need it. Say that's 50 classes. 30 view models, 10 services and 10 util classes. When you want to change the implementation to use a different library and you keep your old implementation and add a new one you'd have to go to all 50 places and import the new class and construct it. Lets say after that you need to pass in a parameter to your api class on start. That means you have to go to 50 places to do that. If it's registered with a locator or you use dependency injection then you only do that in 1 place so you have a lower chance of producing bugs as you develop your code base over multiple years.
amazing work! Do you have any principles regarding "hierarchy" & "sharing" between different services? Dependency inversion for packages like firebase really helped me bring a large project under (some) control. On the flip side, I have "serialisation services" that connect to a firebase/sembast/api "function service" (that performs the basic CRUD operations), and handle serialisation before passing the data onto a view model or a "feature manager (service)". Obviously, in a large project, services may need to depend on one another, but it seems like there isn't a whole lot of documentation out there on what's the best way to go about structuring this...
Hey CF, yes. Services can make use of other services, there's no rules around that. For instance when I have a posts service I usually have my API in there, my database service and my caching service. That way when posts are requested from the api I can save them to the cache, update the database and next time I'll return from the database first and then fetch from the API.
All that to say that services can be used in services. That's how they're meant to work. Lots of small services that does specific things which your major services / state management objects then make use of to build its functionality.
Thank you! Glad to hear that it works that way. Certainly helps with the unit tests as well.
I really enjoyed watching and learning from your videos. Thank you for your hard work! Here is my question: In my apps, I use a local database with an ORM such as Floor and also remote API storage. What do you do in this situation, do you use three types of models/entities (domain model (agnostic of database fields or JSON serialization), a database model, a network model with mapping between them) or do you use only one model with the database and JSON annotations?
Hey, i'm happy to hear that. I use one model, all apps have that same setup on my side. I just have 1 model that serialises what i need to and from json and a special function toDb that creates sql friendly versions of the models.
@@FilledStacks Do you use an ORM like Floor, Moor, or Sqflite for the DB?
Awesome video as always But have one question for you. You said that we can parse JSON and handle errors in service and we can also override error response in ViewModel if we want to but you didn't implement error handling in this video so can you give me some guidance on how can I do that.
If I want to handle error in service I have to write try-catch in services and return different response and if I want to do some custom error handling in ViewModel there should be also an option for that this is what I want to do and I am stuck at this problem for 2 days.
Hey, I don't have more to say than what you said. In a viewmodel there's an onError function that will fire if the error is thrown in a future viewmodel or a stream viewmodel.
In services we use try catch because it's the best way to do it.
Other than that it's per situation. Sometimes we don't want to catch an error and we're handling it higher up so we just let it break and catch and reset higher.
Regarding your example for Http response code checking, will each of the function in the API service will still have the same checking script? Or do I have to create new function in API service where they pass the status code to check it then return the result to viewmodel?
I check common status codes in a shared makeRequest function where i can handle things like token refresh, force update, etc so i don't have to duplicate that code in all the endpoint calls.
Great video. I wanna ask something, how we triggered a function in viewmodel if we go back (pop) from other page. Thank u
Thank you. you pass a value to your pop function call. then where you navigated you await the navigation call, the value you passed to pop will be returned there. Then you can use that value and perform an action.
@@FilledStacks thanks for replying, i will try it
Love the video. Do have trouble getting it running since there have been updates and it's giving errors.
Awesome, I'm glad to hear you love it. yeah compiler errors will always come, just make sure you're on stable and have the latest packages and check if they changed any naming.
@@FilledStacks One of the pubspec files had an update which made the locater GetIt instance error go away. Thank you again for all your video's. I've learned so much from you!
Hey from Botswana 🇧🇼
Sup Daniel! welcome to the communit. I hope the coding is strong up there in Botswana!
12:57 my man wanted to brag about the simplicity his providing 😜
hahahaha gotta show off sometimes 😅
How do you use more than one ViewModel inside of a View? How would I use the PostsCountViewModel and the PostsViewModel in the same View?
You don't. It should never be required. If you want to share functionality you use a service like shown in this video where both viewmodels access the same data from the service.
Hi Dane, thank you for such amazing and clean architecture. I have been following best practices learnt from your videos and it had made my code 10x manageable. I have few doubts which I am unable to resolve and was hoping if you could help me.
Questions:
1) I have a viewmodel file which uses a service I built. Now I want a variable var1 in viewmodel to continuously listen to a variable var2 in the service file. If var2 gets updated for any reason, var1 should also automatically update. And once var1 is updated in viewmodel, I can update the view by using notifylisteners. How do I achieve this relationship between var1 and var2 in your suggested architecture? I tried attaching a stream controller to var2 (inspired from firebase crud setup) but it didn't work out.
2) Could you kindly make a screen sharing and video conferencing tutorial using agora? Since its a 3rd party service, fitting it in your architecture (where we only build services) would be really helpful for me (and hopefully for many others).
3) Could you give any pointers on how to build collaborative apps. Eg: a simple text editor where multiple users can type.
Nevertheless, I am really glad I found this channel :) Thanks, again!
That's awesome man! I'm happy I could help with that.
1. You can use reactive services for that.
2. the same you would use it in a normal flutter app.
3. I have no experience with that so nothing I can share outside of what you'd find in tutorials online.
Good luck.
reactive service is here. ua-cam.com/video/hEy_36LPcgQ/v-deo.html the second chapter after intro.
Hi Dane, for the FutureViewModel is there a way to refresh the model's data to get updated values similar to refreshing using a RefreshIndicator or pressing a button in an AppBar to refresh new values from the API?
I know that by using StreamViewModel, i can get real time updated data but i don't think it is suitable for my app's implementation.
I came from a land where I am using setState everywhere, so pardon me for the beginners question.
Cheers for all the work you've put in mate :)
yes, you can simply call initialise on the viewmodel and it will re-run the future for that model
@@FilledStacks Thanks a lot for taking your time to reply :)
@@kousukeueki301 You're welcome :D
Great video, thanks very much for all your help. I was just wondering, are you able to access services in other services using the locator? As whenever I try to access on service A from service B, and service B from service A, I get a stack overflow error
its called circular
dependency
Yes you are. As you see in the posts service I access the api so that we can make use of it. Services you can think of as small sets of functionalities which large services then make use of to build their functionality. What you're experiencing is circular dependencies. A can't depend on B if B depends on A. Because that means when you request A, it will request B from the locatort, which will then request A, and since B depends on A it will request B, when it has B it'll request A but becasue A depends on B it'll request B, now that it has B it'll request A, and since .... You get the point. Circular dependencies has nothing to do with services, it's just something not possible in coding because it requires infinity in real life.
@@JahirAlam yep yep, thanks for helping out. I appreciate it.
just wow 😮
Wow, good wow? Or wow bad wow? OR just wow :D ?
wow as i started to see the benifets of the new approach 🤩
@@berosolo866 Niiiiiiice! I'm very happy to hear that.
Hey there! I think that this video is really great and I'm planning on using this in my app but the one thing that I don't understand is the importance of the locator keyword? What does that do? I really appreciate the great tutorials that you've been coming out with. Thank you.
Hey, you should watch the previews 2 videos in this series :D This is the third video. The locator is an instance of get_it which we use for service location in the app.
@@FilledStacks Ah okay thank you a lot. I really appreciate you pointing me in the right direction as well as all of your hard work. 🙏I'll make sure to check those out. (:
@@anothernumber9753 You're very welcome. I'm happy to have helped. goodluck!
Hi, I just signed up to appskeletons and it sounds like a crazy helpful idea. However i was sad when I saw BLOC was "coming soon". Is there any progress for it? Also I really do hope what you mean by BLOC is Flutter_Bloc by Felix. There is a big community using that package and having a skeleton(file/folder structure too) would be awesome. One last thing, would the structure be similar to DDD by Reso Coder?
Hi, We are working and using AppSkeletons v2 internally for our own development. I will not be added a BLOC structure at the beginning since it's not something we use during development. It will be a while before BLoC is added into app skeletons by our team. We have to first get the stacked code gen down and then we'll move onto other architectures. I might make that part of the application opensource so that we can easily add more templates into the project.
Hi, great video! Just one question. In the last section you are talking about using services to share state between view models. In your example you show that the PostsViewModel and the PostsCountViewModel share the same state (posts list). So say that I have a functionality I would like to implement - adding a new post. I want the new posts count be reflected in the UI. I add an action to to PostsViewModel that will call a method in the PostsService which will add a post to the posts array. How would the count be updated in the UI? There is nothing telling the PostsCountViewModel to build again, so although the posts array was updated the count will not be updated.. am I missing something? Again, thanks for all your informative videos.
Hi, thank you :) You have to make the service reactive like in part 2 of this series. The video before this one.
It's in the Reactive Services chapter of the video. It's sectioned on the toolbar so you can jump to it
@@FilledStacks Thanks for directing me to this video, its indeed solves the issue in a very clear way. I have some concerns regarding the usage of the observable_ish package which is not really maintained. Would you use it in a real world production app? I actually think that for sharing state from service would be easier just by using the regular provider architecture and provide the model which holds the service where it's needed.. I really like the separation you are doing with the view models but in this case I think that provider architecture solves the "reactiveness" issue easily..
Thanks for the video. I have a question. How can we build something like instagram navigation? instagram home page can be swiped left and right to open add story and recent chats page. Also there is bottom navigation bar. How can we have both page view and bottom navigation bar?
You're welcome. The most I can do with that is say that it's a pure UI question and I'm sure there's tutorials out there that have that. Infact, there's a codepen for instagram. The guy built insagram, filters, swiping for camera and the bottom nav bar. Literally everything you asked for here.
@@FilledStacks cool thanks. Is it possible to point to that source?
@@madhusudhanr3527 Sure. This is the dev that does the application clones in code pen. twitter.com/geekmz/status/1255612141148741632?s=20
@@FilledStacks Thank you
Hello Dane sorry to bother you again, I have question in the following code
try {
var user = await _firebaseAuth.currentUser();
}
catch (e) {
if (e is PlatformException) {
return e.message;
}
}
1. If we catch error which is not platformException what will happen ?,
2. btw does this firebase function only throw platform exceptions ?
Hey hey, if it throws a different exception then it'll just return nothing, which is null. It's only supposed to throw those exceptions I think. You can check the code out and see if that's the case. It's all open source code.
@@FilledStacks Thanks :D
how can i show a Future data in listview? i use FutureViewModel and i couldnt success because i couldnt connect to model.length. Thanks.
If you want to use the result of a future you have to await the future for the data to be returned.
@@FilledStacks do you have any example about using notifyListeners() instead of RXValues in service? Thanks.
Mr. Mackier. After such a long time I finally finished doing this tutorial. To be honest I'm lacking in knowledge of modern architecture. Any places you could direct me to in case you got time to spare?
No need to answer, I'm trying to learn React.js as part. No doubt more on the topic will be brought up there.
Hey Hey. Well the principles applied here is the Single Responsibility Principle which is the first of 5 in the SOLID principles. You can read up on that and watch talks by Martin fowler, Robert C Martin and Kent beck which is where I get most of my architecture / software engineering thinking from.
@@FilledStacks Thank you.
Your videos have been incredibly helpful in building my app. I have a quick question on View Models: what do you do when you need to 3 streams or futures to build a single screen. How do you create a view model with more than 1 model? In all your videos onModelReady only let's you take one model. Do I merge it into one? then entire page reloads every time one of the streams change. But if keep 3 separate models then I am unable to control viewstate if it's loading. As I am only controlling the small widgets inside the screen, so I can't show entire show some loading widget for the entire screen. So what do you recommend 3 models or 1? If 1, how do I combine multiple streams into 1 model?
Thanks so much for all the help with your videos! I would be writing some serious spaghetti code without you.
You're welcome. I'm happy to hear that it helps. I would use the multiple stream / future ViewModel. It's funny with all the rebuild questions. If you're concerned about the view rebuilding three times, once per future you probably don't want to know that your view rebuilds multiple times when you open up the keyboard, or show a dialog, or navigate. I'd say if you're having problems right now with rebuilds then you should optimise it. If you're not then you shouldn't. That's just my opinion on development in general. Flutter is built for rebuilding, that's the purpose and way things should be done. When something changes your rebuild your UI with the new data passed from the top down.
I hope that helps, don't know if I answered your question haha.
@@FilledStacks Thanks. That was helpful!
After cleaning up some code structure, the rebuilt haven't been a problem anymore.
To use multiple stream model, do I add multiple onModelReady function to the view model? Or is there something else I need to do?
@@arjunks1757 No, it's the same as the MultipleFutureViewModel. You supply a map of Streams with a key and then use that key to reference the data from the stream you provided.
@@FilledStacks Thanks! got it
Hey is it ok to call a method in a view model from another ViewModel ? as you have mentioned - "view models should not know other viewmodels", i would like to know how you achieve this.
No that's not okay. If you want to share functionality use a service. If you want something to rebuild in another viewmodel then call notifyListeners in the service or use a reactive value. If you have to do that you probably didn't separate the functionality properly.
@@FilledStacks my each UI has a ViewModel, i would like to call an api in one ViewModel from another viewmodel, if I'am making them as service then, if multiple API's exist and if i i have to refresh them from multiple places i will have to make service for all of them ?Do you have any example projects were you have achieved this ? Thanks in advance.
@@Kvsanal78 Hey, no you don't. You make 1 service and inject them / locate them in the viewmodels that need it. 1 api service class should be used by all your viewmodels.
@@FilledStacks okey, thanks.
How can I call service from another service? I',m trying to call firebase_auth service from auto_route service. But I am getting a not initialized error on firebase.
You get it from the locator. The same as you would in a viewmodel.
@@FilledStacks Hi, I got it working, but the problem was not to in calling services but initializing firebase_auth in the main function. The latest updates of firebase_auth require to initialized within the main function.
Something like this:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
setupLocator();
runApp(MyApp());
}
Thanks for the awesome architecture though!!!
@@harshtiwari9315 I see. Thanks for getting back to the comment and letting me know. Hopefully it can help someone else.
Day by day I'm becoming a huge fan of you :)
Question: Should I use viewModels or providers.. I like viewModels architecture but how can I save the state and pass it below the hierarchy. Saving state in service seems like a very good idea. When do you think I should prefer Providers over services? Can I use providers and view models simultaneously? Google's official one is provider what's your thought on it?
That's awesome to here :)
This uses provider as well. They are not mutually exclusive. My entire state management system is built using provider. So it's yes to all your questions because viewmodels and services are provided through provider or get_it. But everything is built on provider
@@FilledStacks sorry if this is a stupid question. can I reuse a viewmodel by making it a singleton and access it like provider anywhere , I get the same instance anywhere?
Instead of writing viewmodel : MyViewModel() ,, can i write MyViewModel.getInstance() inside the ViewModelBuilder
@@FilledStacks Can i access providers inside viewmodel? Thank you
Viewmodels are provided through provider. So you can just provide more. But i usually use get it since it's less code to maintain than wrapping widgets with a provider.
@@FilledStacks That's a very good idea. Thank you
Any idea how to use this method with firebase services? i keep getting this error:
[RemoteConfigService] depends on [RemoteConfig] which is not injectable!
Did you forget to annotate the above classe(s) or their implementation with @injectable?
And thank you for the tutorials, they are great!
You're welcome. I have no idea what's causing that. sounds like you're using injectable and not generating the new code maybe?
@@FilledStacks Thanks for answering so quickly! the error appears when i run the command to generate the code, and yes, i am using injectable, and lazySingleton. Are there any plans for a tutorial with firebase services using the new stacked architecture?
@@Mastereusse I see, are you trying to get the RemoteConfig from injectable as well? If that's the case you shouldn't. You should just construct it in the service. You should only annotate the service class not the other third party classes.
And on the firebase services in stacked I won't be making a video since it'll still be exactly the same as the previous tutorials. I used the first version of stacked in there (it was called provider_architecture first).
@@FilledStacks Thank you very much! i made it work with your guidance.
@@Mastereusse Great! thanks for letting me know.
how to pick pdf file and upload in firebase in flutter
Use file picker then use my cloud storage tutorial to upload the file returned by file picker
Great website bother but i want to know you that your website has no way to go back on previous page or article. Could you please implement it.
by the way this website is built on flutter?
Hey hey, I do that all the time. The back button should do that in the browser :) No it's not built in flutter. I build the website using gridsome.
Hi. Im learning to code with flutter so I'm new programming principles and so on. Would like to ask a question. You use locator to inject , i believe thats the right term, your services right? My question is why cant i just make use of import statement to make those functions available? Also, a bit unrelated to this video perhaps but ill ask anyway, so there is a consensus, I believe, that we should separate business logic from ui (regardless of programing language) and the main reasons are that code is more maintained and readable this way, it makes sence but if we have one top level class that implements a screen/view/activity why cant all the logic for that screen be in there? So we have a build method that renders ui why having a method that deals with user input, for example, better be put on a diferent class and get it injected in the class? I dont have a programming background so this might be a stupid question but although i feel that it makes sence that ui logic gets segregated to its own thing I think with flutter having the logic for that view in the class that renders the view makes the code equally readable and maintainable. I got to be wrong but I dont see where :D Thanks for the great content been learning a lot from you. Keep it up!
Hey, it's difficult to cover all that in a single answer. If you're new I would say you should build stuff the way that feels more natural to you. If you don't see the benefit of doing something I don't think it's valuable doing it. In those scenarios it's called overhead and if it doesn't out weight the benefits then it doesn't matter. In smaller apps these things don't really matter.
If you don't find it easier working with files of 40 lines of code compared to 1000 lines per file then it's not worth separating files, for you. If you have a team it might be better to have a structure so everyone knows where to fix something when it needs fixing. If you're learning then I'd say you'll probably only appreciate code principles once you've gained some experience and you feel some kind of pain developing things in a bruteforce manner.
@@FilledStacks Cool. I Definitely get your point. Lets see how the journey evolves. Can I just ask you why you are using Locator to inject a services like Api for example? Is it wrong just using import statement to make methods available?Thanks for your reply. Awesome feedback and again great content!
It's me again :D. Do you have any best practices or examples for a service which will get data from API then cache them locally and sync them when needed? Such as your PostsService, the next time users open posts screen, they will see previous cached data immediately, then after synced we show them fresh new data etc. Thank you!
Hey Hey, no other practices. That's all we do. If you wanted to use caching more formally there's cache management packages for dart that you can use. I just do it as the posts service that I showed.
@@FilledStacks Thank you! I will check these packages out 😃
@@tammaibigin Awesome
Can you please also give examples for MultipleStreamViewModel and MultipleFutureViewModel?
I didn't think it was needed. It's the same as the Single versions. You can also look at the example in the stacked repo to see the code in there.
But then what is the difference between repository and service?
Repository is historically used in relation to providing data, a service wraps the responsibility of one feature / function of the app into a single class to adhere to the Single responsibility principle.
Hello please where can I send you a private message?
Head over to the slack. you can find the link under the thumbnail of any written tutorial on filledstacks.com
Your architecture is based on a lot like Angular not sure why google didn't provide something similar with Flutter.
That's good to know. It comes from Xamarin where MVVM is the best way to build things. I duplicated that and modified it slightly to work better in Xamarin.
Why yo use a third party, code, dart has functionality to deal with services.
It does not.
I think the main concepts of this videos should be first explained in another videos
They are. This is the 4th videp I think. Maybe even the fifth.
@@FilledStacks the concepts is very dull
Welp. Can't control that can I? I appreciate the feedback 🙏 Hope you learn something from my channel.
@@FilledStacks provide us with more details about the mentioned concepts
I have in the 4 videos before this. Literally exactly all the code to get to this point. Start at the architecture setup. then the stacked deep dive. and so on
just giving input here. don't tell people with something that you totally made up. and overcomplicate things.
people are listening more and they'll apply it to their codebase. you're gonna regret it.
don't shape the community with your badly-opinionated way of doing things. just do UI like you're usually do cause you're pretty decent at it.
Haha, I haven't made a UI video in so long. Infact I've only made 1 video dedicated UI video when I first started so that I can get the easy stuff out of the way.
Could you please explain to me what the bad principles are that I'm using with some examples of how to improve. I've been writing code like this since I built games used by millions of players at Derivco and custom cross platform game engines based on a event scripting language ontop of cocos2dx.
I'd really appreciate any pointers to help improve my code structure and architecture. I've been delivering such great, well maintained applications, I can only imagine how great it would be if I followed your coding principles. You can either comment here, but I think it might be too long to type out here. You could email me at dane[AT]filledstacks.com. The main things I'd like to know would be.
1. Why is the single responsibility a bad practice?
2. Why is abstracting thirdparty libraries from your code a bad practice?
3. Why is removing interobject dependencies through services a bad practice?
And then for each of those what you recommend. I've been reading all these books that teach this I'm probably going to be able to write my own book from your answers.
Thanks for the comments and reading. I look forward to your email
I don't agree with you... The @FilledStacks approach is a great way for maintainable and reusable code. Provide more infos about your opinion or i will consider your comment as a troll or hater...
@@storylineteam I think we can assume the comment is to gather some attention :) Best we give it as little as possible unless there's valid pointers and improvements that we could all learn from.