Flutter Custom Bottom Sheet Service

[@tylerthornton9611]

Thanks for continuing to make development life easier for the community! Super exciting to see another FilledStacks video at last ; seeing the way you solve different problems (and hearing you talk about how/why) is super helpful for expanding beyond tutorials to build cool things. Thank you!

[@FilledStacks]

Thanks Tyler. I have a very big undertaking planned that I think will shed a lot of light on my development style. I'm going to build an actual product, it'll take a year or two haha, but I'll turn the entire dev process into small tutorials, maybe even long form videos where I discuss additional things. Since I just finished building a food delivery service for a client I think we can build a scaled down version of that in the FilledStacks community. We'll build the backend and all client applications as well. I have absolutely no idea if this will work but I feel like it's something I should at least attempt because I know the value other devs can get from it will be tremendous. Almost time to start with the planning phase which will be the first video in that series.

[@NamNguyen-jk1yn]

Very impressive! First video of flutter tutorial which I watch until the end. Thank you very much for creating stacked_services!

[@FilledStacks]

Thank you I appreciate the kind words. I'm happy you found the value in it. thanks for watching and commenting.

[@sadabwasim9850]

Thanks for this awesome work 👍

[@FilledStacks]

It's my pleasure. It makes it easy for our development as well :)

[@stankokostic725]

Hey Dane, awesome tutorial as always! Really helped my team do a great refactoring! I have one question regarding the Custom bottom sheet: if all the info presented in the bottom sheet comes from ViewModel assigned to it, do I really need a 'request' property in it?

[@FilledStacks]

Hey Stanko, It make me happy to hear that! That's awesome. You don't need to pass the request. You can simply ignore the argument in the builder function if you'd like. I have the same scenario in a few cases where the viewmodel of the sheet is smart enough to figure out what it needs to show given the context so I don't have to manually send in the title, or any of the info to show. "It builds itself". In that case I ignore the request property in the builder function by giving it the name _ to indicate it's not being used .i.e. (context, _ , completer) => SmartBottomSheet(completer: completer) I hope that helps.

[@amitlakhani1111]

Thanks really awsome videos, your videos and playlist always helps me to make production ready architecture and good guide line Keep doing Thanks a lot !!!

[@FilledStacks]

Thank you and you're welcome! I'm happy to hear that it's helped you.

[@stephensilverstein4855]

Hello. Fan of your work. Would love to see you implement / how you would reimplement navigation given the update with the flutter navigator 2.0 and router / pages which now exist. Since this can handle the URL parsing and syncing the platform specifics of navigation. Examples however of how to do this are all fairly poor or so simplistic as to be unusable for helping implement code for projects at a sizable scale. Hope you had a good holiday season and new year and to see you return to making flutter videos soon!

[@FilledStacks]

hey hey! thanks Stephen. I had a great holiday season, thanks for checking. I am planning to return to Flutter development videos very soon :) Unfortunately on your request I haven't swapped over to Navigator 2.0 so I have no experience or even any advice to give that could help you. I've seen the same sentiment everywhere around the community. It seems like Flutter dropped the ball on documentation and better examples for this new feature. I hope they get to it before I have time to write my tutorials on it.

[@louisneophetla7121]

Thank you Dane. 🙏 Please keep them coming

[@FilledStacks]

You're welcome. I'll try my best to keep making more videos.

[@ComputerScienceAcademy5220]

Hello! Awesome videos bro! Since these videos are 2 years old, can you please tell me what playlist i should watch next? OR what videos? Etc... I want to get up to date with stacked. Also, will your new web course cover stacks for beginners or what? Thanks!!

[@FilledStacks]

Hey, there is no playlist. Stacked still uses the same setups it's just built into the generator now, and yes. There will be an overview of stacked for what's needed on web. I'll make some other content after this that teach more stacked specific things.

[@ComputerScienceAcademy5220]

@@FilledStacks perfect thanks

[@consciousmayank]

Hi Dane, a quick question. I used bottomsheet service and i noticed the height of bottomsheet could not be more than half the screen. Is this intentional. Or i missed something and the height can be more then half of the screen. What if my ise case requires me to have a bottom sheet till the appbar below it ?

[@FilledStacks]

Hey, this is possible to do. You can set isScrollControlled to true.

[@vstacked]

Sorry for my bad english, but i want to ask. can i call another viewModel to other UI ? example i want to call functions in favoriteViewModel, to my search UI when searchViewModel is initiated. Use the locator maybe? Thankss

[@FilledStacks]

No, viewmodels shouldn't know about each other. You can move the shared functionality into a service and call it from there. One of the rules of Stacked is that the viewmodels shouldn't know about each other.

[@JohnMcclaned]

hey dude, do a riverpod architecture v4 video. i've modified your v3 to it, but i wouldn't mind getting your input

[@FilledStacks]

Hey hey, if there's a significant benefit to using it then I'll look into updating stacked to use riverpod. Otherwise I'll most likely stick with provider. I'll have to use it to see what additional benefits it may expose for the stacked architecture.

[@JohnMcclaned]

@@FilledStacks yeah i was cautious about it, but then i realised it was made by the same guy who wrote provider. After reading the docs, it's obviously made to improve upon provider. Still wouldn't mind seeing a FilledStacks vid exploring it for those looking for more information, even if you don't integrate it into stacked. 🙂

[@wickedgummybear3104]

@@JohnMcclaned I've looked into the vids of Riverpod too and was wondering the same thing. Although it would probably not make that much difference for the user end (for me using the stacked packages), it might streamline the backend a bit. For as far as I truly understood Riverpod...

[@SHORTCUTPLUS]

Subject : Questions...... first of all i am really a big fan of your work as i really don't want to use bloc. Great tutorials 👍. i have some questions that i am facing an issue with. 1. how do we set state in a ViewModelWidget as you know unlike like viewmodel builder it cannot be used like so. 2. how do we make a child of a viewmodelwidget? is it also going to be a viewmodel widget or something else. 3. is there a better way to use global varaibles? like for now i am using a global service using injectable....in..thirdparty services.

[@FilledStacks]

Thank you, I appreciate it. 1. The ViewmodelWidget should depend only on the state from the ViewModel. If you need an additional UI state then I'd suggest using the stateful widget instead and getting the ViewModel using the getParentViewModel function and passing in the viewmodel type. That will still rebuild when calling notifyListeners 2. ViewModelWidgets usually are children below the main ViewModelBuilder. Everything under a ViewModelBuilder can be a ViewModelWidget. 3. services are basically global. I add some hard rules to keep it maintainable, like not using it in views, but in reality it's still all accessible throughout the entire code base.

[@consciousmayank]

Waiting for localisation service too. Please do that too

[@wickedgummybear3104]

I just had to use that today, it's pretty easy to set up using this link: www.flutterclutter.dev/flutter/tutorials/internationalization-i18n-in-flutter-an-easy-and-quick-approach/2020/213/

[@FilledStacks]

The thing with the localisation service is that I the way it's currently being done I don't like. So I'll only share a solution if I'm happy with it. I've started building a package that I find easier to use and maintain so once that's done I'll make a video about it.

[@FilledStacks]

@@wickedgummybear3104 Nice, Only think I don't like there is the const string values being passed in. I'd like for all existing keys to be generated for the dev to use.

[@wickedgummybear3104]

@@FilledStacks Yeah, tbh I prefer things the way you do it. But at the moment there are still functionalities out there that we need to use that are not in your package. And it does work (without spending too much time on it). It's just difficult sometimes. I already need time and energy for other components so... When things change I'll just implement or remove old stuff. The same way I did with the bottomNavigation and bottomSheet etc. Untill then I try to find the cleanest way and use it for now xD EDIT: I know eventually all things that are used alot will make it into your architecture one way or another :P

[@FilledStacks]

@@wickedgummybear3104 Agreed. I actually just decided to increase the efforts we put towards our packages coming from FilledStacks. Up until today I was the only one maintaining all 6 packages, while being the lead on multiple client projects, developing suuuper large client apps, as a single dev and making content haha. So I've written an "Open source agenda" which I literally just sent out to the team devs. I think with this change we'll be able to provide the cool functionality we're using in client apps to you guys in a much shorter time and also stay on top of additional functionalities / new package development. Really hoping to improve on that in the coming year. Thanks for always taking the time to write detailed responses and input, it's really helpful. I appreciate it a lot.

[@francescopasin1928]

Hi, it's me... Again :) May I ask you one thing? What's the correct way to pass the model to a child widget? For example: I have a view with a viewmodelbuilder and inside I have a widget that needs to access to the model. Currently I pass the model as a parameter. Is it right? P.s. you could create a discord or some other channels for your community, so we can help each other with flutter and stacked :) Thanks for your work!

[@FilledStacks]

Hey hey, you can either use the ViewModelWidget or you can use the global function getParentViewModel to get the ViewModel above that widget. And we we do have a slack channel with almost 2000 developers :) join.slack.com/t/filledstacks/shared_invite/zt-kjy2db0n-XJSiovQ69kVc1xcvekjA3w

[@GabrielCosta-xr5vr]

Thank you for one more amazing tutorial! Do you have any updates to the test automation tool that was announced on Facebook some time ago? Do you plan to release some part as open source or in a video tutorial? I was very amazed seeing it!

[@FilledStacks]

You're welcome! Hey you remembered! That's awesome man, makes me happy :) We're making some good progress. I can see why no one has built a good one haha. It's challenging. Internally we're at the place now where we're aiming to get all our testers test cases automated for our client apps. When we get to about 50% functionality coverage I will be happy with what it can do and do a public beta. The goal was to get to that point in this year but we were delayed in the implementation. I've been using it so we're definitely releasing that in the next year. And yes, I will most likely have a full series come out from that plus written tutorials weekly dedicated to how we do our automation and testing.

[@GabrielCosta-xr5vr]

@@FilledStacks Wow, glad to hear that! It seems very challenging, I've tried to implement this automation tool but I got a bit confused about where to start and couldn't advance much. I think that the community will be interested in helping and advancing the tool when you release it, it's an awesome tool! Looking forward for that!

[@FilledStacks]

​@@GabrielCosta-xr5vr Yes I think so too. Very excited to get it out to developers to start using. It's focussed on the testers first but we'll add some required dev functionality in there as well when the initial versions functionality is complete.

[@razaabbas861]

What you think is the best way to reset all your viewmodels when you logout?? ... I used reset method and then called setuplocator again...

[@FilledStacks]

The only ViewModel that we had to reset in our code base was the HomeViewModel which was a singleton. The others die and dispose themselves following the normal flutter lifecycle for widgets. The way we did that was by adding a stream of type dynamic into the user service, subscribing to it in the HomeViewModel. When the user logs out we put a value on there. In the viewmodel we then listen and then run the logic to reset the viewmodel.

[@alvin3171997]

@@FilledStacks if I have a profile page that also changes when user is logged out, Then I would need to listen to the stream in the ProfileViewmodel too, right?

[@FilledStacks]

@@alvin3171997 Yes that would be correct.

[@francescopasin1928]

Hi. I've used you stacked package for my first "real" complete Flutter app and I'm going to use it also for my second ;). I like it a lot and I think is really simple and straightforward. I like the organization of the MVVM architecture and the use of services. The only problems I had were few doubt regarding controllers and stateful widgets. If I understood well I should never use a state inside my widget unless it's specific related to ui only. But how should I manage things like animation controllers or other controllers (like google map for example). And also how shoul I manage streams like geolocation? Where should I put it? Thanks

[@FilledStacks]

That's great man! Thanks for sharing that feedback with me. I appreciate it. Before I answer, you can use stateful widgets if you need it. If your UI needs state then you use stateful widgets. There should just never be any business logic in your UI file. 1. You can use state in your widgets if it's relating to uI. 2. Animation or other controllers are all UI code so you can use it normally in a stateful widget. As long as the viewmodel never knows about them. 3. Stream of geolocation data should be a service. I have a tutorial on that.

[@francescopasin1928]

@@FilledStacks maybe I missed that. Thanks btw. But what about the "data holders" of the libraries? (In this example the Position object of geolocator). Should I recreate it in my service in order to completely hide the external package to my VMs?

[@FilledStacks]

@@francescopasin1928 Yes. I create my own models to completely abstract from the library itself. Think of it this way, when you swap out that library only 1 file should be affected. The libraries wrapping service.

[@francescopasin1928]

​@@FilledStacks Nice. Thanks a lot! Can't wait for your next video :)

[@FilledStacks]

@@francescopasin1928 You're welcome :)

[@jeremaine]

wow new video! thanks bro.

[@FilledStacks]

Yep yep, I'm working on a improving my process and teams contributions so that I can put out more videos more consistently in the future.

[@cptsakamoto]

Thanks for the video, can we expect Riverpod videos

[@FilledStacks]

If I can provide something that resocoder or Robert didn't provide then I'll make a tutorial. The furthest I'd go with using it is probably changing stacked to make use of riverpod. But I won't use riverpod directly.

[@cptsakamoto]

@@FilledStacks 1 question on stacked. Is the dialogue service is limited to strings. I want to customize the dialogue contents by adding my own custom widgets. Will it be possible

[@FilledStacks]

@@cptsakamoto Yes it is possible. You register a custom map of builders, the same as the bottom sheet service and then call show customDialog and pass the map value you registered the UI builder for.

[@JahirAlam]

How can use scrollable bottomsheet?

[@FilledStacks]

You'd have to make your own bottom sheet service using that widget instead. Or you can set scrollControlled to true I think.

[@JahirAlam]

@@FilledStacks bro is stacked internationalisation ready to use?

[@FilledStacks]

@@JahirAlam No. It's deprecated

[@theforestapp]

awesome dane!

[@FilledStacks]

Thank you! I appreciate it

[@AjilSathyanLMCEC]

*Hello Sir Can you make video about fully functional instagram clone. That would be awesome* 😊.

[@FilledStacks]

Hey I can not, there won't be much value in that. Using the videos I've shared you should be able to do that already.

[@hashankannangara8723]

Thanks!

[@FilledStacks]

It's my pleasure.

[@akshattamrakar9071]

Please make animation tutorial using new Rive

[@FilledStacks]

Hey, I'll see how much different the UI is. Last I checked it was the same so I don't want to just make the same tutorial again. But if I need one for BoxtOut then I'll make it and record it and share that video.

[@akshattamrakar9071]

@@FilledStacks you are the best, please have a look into it...it's similar but it feels so different....

[@FilledStacks]

@@akshattamrakar9071 you'll see a video when I do look into it.

[@pradeepkumarreddykondreddy7048]

I could not understand.

[@FilledStacks]

Which part? Are you a beginner in programming or flutter? because then that would make sense. This video is not for a beginner, you need to know about code separation, the reason it's important, why we use state management. Why it's important to separate the business logic from UI. Why you need a single responsibility per file, and why service location is being used over dependency injection.

[@pradeepkumarreddykondreddy7048]

@@FilledStacks I'm beginner in flutter. Developed couple of game apps using flutter, following KZbin tutorials and published to play store.

[@FilledStacks]

@@pradeepkumarreddykondreddy7048 Then it would make sense why you're confused. What state management did you use for your app published to the playstore?