Architect Your Dialogs in Flutter | Flutter Dialogs Tutorial | Build a Dialog Manager in Flutter

[@mohabmagdy4155]

Best architecture ever for Flutter apps. currently, I am refactoring my apps to your one my stacks are filled =)

[@FilledStacks]

Yeeeaaaaaahhh 🙌🙌🙌 that's great to hear man. It is much better than the traditional convention at the moment 😁

[@wmorrison1967]

@@FilledStacks I have implemented this elegant solution and it worked fine on android but I am getting a weird error on the iphone. Is there anything special I should consider for the cupertinoApp

[@FilledStacks]

Thanks for the feedback. There's nothing special that I do for ios. What exactly is the error you're getting?

[@wmorrison1967]

Doing a Navigator.of(context) .pushReplacementNamed(ValidateEmail.routeName); produce the error Cannot read the previousTitle for a route that has not yet been installed 'package:flutter/src/cupertino/route.dart': Failed assertion: line 140 pos 7: '_previousTitle != null' CupertinoNavigationBar throwing the error.

[@FilledStacks]

@@wmorrison1967 That's a weird error. I don't know what could be causing that. Gotta go to the stack overflows.

[@rossthemusicandguitarteacher]

Just refactored my app to use this architecture and I LOVE IT. Mine had to be a little different due to my needs, but this concept was simple enough to implement in 30 mins and worked first try. THANK YOU!!!

[@FilledStacks]

That's absolutely great news! Exactly what I was hoping for. I'm trying to provide the ideas around how to architect, not a solution for the exact architecture for your app scenario. Well done on the implementation, it makes me very happy to hear such stories!

[@tylerthornton9611]

FilledStacks' architecture IS always awesome! Thank you for sharing another elegant solution with the community.

[@FilledStacks]

Thank you for taking the time to give the feedback. I appreciate it.

[@임창수-c7c]

I wanted to show error message efficiently and this is what i was looking for! Thank you so much for this video.

[@FilledStacks]

You're welcome :) Thanks for watching and commenting. I appreciate it. Happy to hear I could help

[@gmc254quads6]

I agree, FilledStacks app architecture is awesome! Your tutorials solve a lot of my coding problems in flutter.

[@FilledStacks]

That's great news!! Thank you for watching 🥳 please share it with other devs that might ask questions about handling dialogs in Flutter. That would help a lot.

[@projectaherotips3025]

You are beautiful. I found your channel through fireship, and immediately binged watch most of your videos. Really love your architecture videos! I just got done building out my backend in graphql/apollo-server/express/postgres+sequelize and will be jumping into the mobile development soon. I am sure I will be ramped up in no time mainly due to you =). If youtube has a way to donate, i would love to drop u a few coins here and there for each of ur videos. They are so invaluable.

[@FilledStacks]

Thank you very much for the great feedback, I really appreciate it. I'm so happy to hear that it'll help you. The goal is to clear the fog around Flutter architecture with practical examples. Let me know how your implementation goes. I do have a kofi page (ko-fi.com/filledstacks) where you can donate but it's not necessary. We also have a slack so if you get stuck hop over there and ask a question or two :) (Link is at the top of the page here www.filledstacks.com/ )

[@thiyraashdavid7784]

I stuck , you helped me! You are great man!

[@FilledStacks]

Thanks man 😁 happy that I can help

[@rydmike]

Great addition to your architecture and very useful too, thanks! Keep the good stuff coming, it is much appreciated! 🙂

[@FilledStacks]

Thank you for the feedback. I'm happy to see you find value in it. I'll keep sharing my tricks 😊

[@PurpleWarlock]

Thank you for the video but I still struggle understanding the functionality of Completer. You use Completer to keep track of Dialogs as those return Futures. Then you set up a Service in order to not depend on the context object of the current view. Is that correct? Thanks for the video. I'm through the Flutter Foundation playlist.

[@FilledStacks]

A completer holds execution until your call complete. that's all its functionality. so by using it you can treat the execution of showDialog as a future. when the user dismisses the dialog then we complete the future so it continues execution where it was called which allows you to run logic in that way.

[@tahamalas1322]

Nice!! I have a question though, most of the dialogs conform to the architecture you're using, but if in some dialogs I have check boxes or something like that, this would require me to change the state inside that dialog, so I must have a separate bloc for it or sometimes using the same bloc for the screen, So it's tightly coupled to the screen I'm working with, how can I approach this problem using the approach you described

[@FilledStacks]

It won't be tightly coupled. The dialog itself will maintain the state and pass back the selected items to your service. It's the same as using a textEditting controller. You don't have to make any adjustments to the current code besides keeping track of which values are selected in the dialog manager. The same as you would have your TextEditting controllers in the dialog manager that will keep the text the user enters you can have your bools for selected check boxes and pass that back once the user confirms the selection.

[@luc4s93]

thanks for your great tutorials! when i call the back button from the android os, the screen in the background pops and not the dialog. is it possible to change that? and is it possible to call the native looking alerts from the flutter api in this way?

[@FilledStacks]

You can use OnWillPop to cancel that back navigation. I wonder why it's doing that. And yes it's possible to show any alert. Just use the built in showDialog function.

[@FilledStacks]

As far as i know sailor also uses named routing. You have to make sure the key being used points to the navigator that's connected to your sailor navigation. I don't use it so I can't give you any code instructions.

[@narcodico]

Nice approach, pretty similar to what I’m usually doing.

[@FilledStacks]

Awesome. Great minds think alike 😉 I'm happy to hear I'm not too far out of the ball park.

[@mathewignatious2468]

Nice Tutorial. Thanku sir. I have an doubt,I have a text field in my Flutter app where a user can enter their name. They can press "submit". But when a name is too short, I show a dialog. The problem: when the dialog is shown the keyboard gets automatically dismissed and the alert dialog jumps from above (when the keyboard is still active) to below (when the keyboard isn't active anymore, half a second later). How to let the popup's barrier covering the underneath keyboard as well?

[@FilledStacks]

They are both overlays and keyboard has the highest z-order in the drawing. It'll always be ontop. You should rather dismiss and then bring it back when you're done with the dialog.

[@hungps]

Love this. Please do more architecture tutorial video like this one

[@FilledStacks]

Thanks. I'll keep sharing my architecture tips 😎

[@aljulandaalabri911]

Thanks for the tutorial! What if you need multiple managers? For example if you want to use a dialogue manager and a toast manager. How would you keep them all alive? Also in your regular architecture, you use a generateRoute function so you can use pushNamed. Can you still use generateRoute function with this solution? Many thanks xoxo

[@FilledStacks]

You're welcome :) Yes you can use generate route. This doesn't change anything. I don't use this approach anymore. I have a dialog service that I've implemented in stacked_services github.com/FilledStacks/stacked_services which you can use. It makes use of the GetPackage, you'll have to set the Get.key where we currently set our other key. It's a lot less code and easier to manage.

[@thruaway5036]

Thanks for this FilledStacks. Your tutorials really helped me. I also use your responsive builder package. Before I dig deeper, may I ask if this Dialog Manager works without using the rflutter_dialog package? Will it work on regular showDialog? Thank you.

[@FilledStacks]

You're very welcome. Thanks for watching. And yes it will, it works with any dialog you want to show. I use the normal showDialog call in my projects.

[@thruaway5036]

@@FilledStacks Thanks again. I followed your tutorial and successfully run the app with flutter's default showDialog. I will now try to apply this on my main personal project. Thanks!

[@FilledStacks]

@@thruaway5036 Yeah Yeeeeaaaahhhh!!! That's awesome man. Happy to hear that it worked. Goodluck integrating into your main project.

[@wmorrison1967]

Found this on here and liked it. I have since implemented it.

[@FilledStacks]

Very awesome! That's amazing man. I'm happy I can have an impact on real world code 😊

[@wmorrison1967]

@@FilledStacks Would this work on ios?

[@FilledStacks]

@@wmorrison1967 I would assume so. If ios shows dialogs it should work the same.

[@aman.kataria]

Hey, Are you planning a Flutter Firestore architecture video ? :D

[@FilledStacks]

Hi The architecture I use it the same as the ones I presented. I made two videos on building a Firestore app using that architecture. kzbin.info/www/bejne/nWaQi56cg5egrLs (Building a realtime stats monitor) and the Realtime user feedback app. I use scopedmodel there so all you have to do is change the references to ScopedModel to Provider and the references of ScopedModelDescendent to Consumer then it's 100% the same :) hope that helps

[@marcosrodriguez9454]

For each dialogue I need to have a Listener in the service and register it in the initialization state of DialogManager or is there a better way? Because otherwise I would have a lot of boilerplate, please show me the light on this!!!

[@FilledStacks]

I don't quite know why you would have multiple listeners for different dialogs. Only one can (should) show at a time. It's modal so you'll always only see one. Why do you need multiple listeners?

[@raymonddexter5738]

could you tell me the plugin you use to show all the parent child connecting lines..? Thank You...your snippet videos help alot

[@Mendez_84]

marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

[@FilledStacks]

I use the normal Dart code. It was introduced in v3.1. You have to enable Flutter UI guides. Press Ctrl+, or CMD+,, type flutter UI then enable the two settings that pop up

[@mokshmahajan6340]

Because of that builder thing in the material app, when the dialog is showing and the user presses the back button on the phone dialog is not getting dismissed instead the route is popped with the dialog still showing in the previous screen. Is there any method of resolving it or we can say that there is a downside using this approach?

[@FilledStacks]

There was that downside but it's solvable using a will pop scope widget around the dialog to ensure it gets popped on the key before navigating back. i don't use this approach anymore. I use the dialogService from the stacked_services as shown in my new videos. I'm making an updated video on that next week.

[@MostAmazingTop7]

13:45 well, I back that. 👍😍

[@FilledStacks]

Haha, thank yooou :)

[@dc5]

Hi Dane, excellent video and has already saved me some time. Thank you!

[@FilledStacks]

Thank David. I've just posted the written tutorial of the updated one we're using in production. It completely removes the dialog manager and leaves you with the dialog service only.

[@dc5]

@@FilledStacks excellent.. I'll update mine as well then. Thanks a lot Dane.

[@FilledStacks]

@@dc5 Awesome! I'm busy uploading the new video now :)

[@dc5]

@@FilledStacks Thank you so much Dane, again. You might want to do some video in the future to show how you find time to do all this. Thanks a lot, very nice work man.

[@dc5]

@@FilledStacks Since you're showing what you're using in production, do you have any examples of using Firebase Anonymous Auth, so users can start using the app as soon as they install it without signing up or asking for anything, and then get promoted/linked to a real account after some meaningful action or whenever they want. I have an implementation of this built on top of most of what you have shown in your videos but would be interesting to see your way of tackling this use case. Thx!

[@Mistiansen]

What is the purpose of Provider here? It seems you don't actually make use of it. You have ChangeNotifier and Consumer but they seem to serve no purpose.

[@FilledStacks]

The purpose of provider is to bind my View to my ViewModel which allows for separating my UI code from my business logic code. You can see the purpose of it in my latest Firebase Authentication video. You'll see how easy it is to handle showing dialogs / navigating when the code is separated from your UI.

[@mukhtarfauzi5824]

hey Dane, can you tell me what is the best approach to using FCM? is architecture like this possible? so FCM can be called in every screen state

[@FilledStacks]

Why would FCM have to be called on every screen? In Flutter you register once, provide your message handlers and that's it. You can wrap it in a service and initialise before the app starts. If you have to navigate then handle the messages in a stateful widget. This means the service takes in callbacks instead of registering them directly in the service

[@mukhtarfauzi5824]

@@FilledStacks so i need make a widget that handle the message, and wrap all my screen with that. thx Dane, i know what to do now 😆

[@FilledStacks]

@@mukhtarfauzi5824 No none of your screens should be wrapped in it. Just your application, you can use the same approach as the dialog setup to keep it alive or just wrap your Material app.

[@mukhtarfauzi5824]

@@FilledStacks I tried setup configure firebase messaging in Manager and tried to wrap Material app too. but I can't get a message, it says "W/FirebaseMessaging( 5722): Unable to log event: analytics library is missing", which means I can't get track of the configure message. Are you have an idea about how to solve this? the goal what I want is to make firebase messaging configure alive and we can get all message in all over screens

[@FilledStacks]

@@mukhtarfauzi5824 I usually have my FCM registered in a push notification service that would have access to the other services through injection. The dialog manager / service shouldn't have any code other than dialog code. That's the point of keeping things separate. You can send a message to the dialog service from your push notification onConfigure callbacks. Setup your FCM as you normally would. When you're done move the FCM related code into a file called PushNotificationService, make sure all the same functions are being called on initialise. In your push notification service you can then get your dialog service, when you get a message, construct a dialog request with your notification info and then make a request to the dialog service to show it. As for your error, seems like there's a dependency missing.

[@zvrk]

Hey Dane, i am trying trying to implement this Architecture in my app but I'm running into a issue. I am using navigation key and calling key.currentState.pop() in iconButton. Now what it happens it pops the screen behind the dialog, dialog is still active. Now if i use normal Navigator.of(context).pop() it works fine. So what is your opinion on this should i keep the normal Navigator or is there a way to use the navigation key ?

[@FilledStacks]

The dialog service should have it's own key that you use internally when one of the buttons are pressed. Look at the dialog service in the latest code I pushed to github.com/filledstacks/flutter-tutorials

[@zvrk]

@@FilledStacks Thank you for your reply.

[@hanantoekosaputro9961]

@@zvrk hey i have same here. but my case is just when i pressed the hardware back button the screen pops at behind the dialog. did you solve this ?. Sorry for my english :v

[@hanantoekosaputro9961]

@@FilledStacks thanks before. i have try your latest code, but the issue still there, when i press hardware back button

[@FilledStacks]

@@hanantoekosaputro9961 in your navigation service where you do your pop you have to check if the dialog is open by using the dialog service. If it is you perform a closeDialog call, if it's not open you perform your usual pop.

[@hilmyhaidar1002]

Your videos are great!

[@FilledStacks]

Thank you kind sir! 😁

[@rossthemusicandguitarteacher]

Love this tutorial

[@FilledStacks]

Awesome! Awesome Awesome!

[@julianarnold7992]

How do you integrate your onGenerateRoute: router.generateRoute from your Routing Tutorial into the MyApp class shown here?

[@julianarnold7992]

Snippet: www.codepile.net/pile/a0b3ZrB9

[@FilledStacks]

I usually handle it the same way, meaning my navigation service controls the navigation for app using the onGenerateRoute and the named routing. The navigation service has a specific key assigned to it so it's always going to use that router, the one with onGenerateRoute setup. Then I also have a navigationKey for the Navigator of the DialogService. It's not the best solution at the moment, so when I press OK or require to close the dialog itself I call pop on the dialog service which makes use of the NavigatorKey for the dialog (the one above your Dialog manager) and removes the dialog from the stack.

[@Dev-ry9cx]

Learning flutter these days and this helps a lot! I am also making JS videos 😀😀

[@Dev-ry9cx]

Inspired by you and fireship 🔥

[@FilledStacks]

That's awesome man! Thanks for watching. I checked out your Javascript Scoping video. Keep it up, I like the explanations.

[@Dev-ry9cx]

FilledStacks thanks a lot, really appreciate it!!

[@acctest-uw3ic]

thanks your tutorial. i have a question. i have a loading dialog. when i call api , i show loading dialog and when it done, how can i dismiss dialog. can you help me dismiss dialog without click button on dialog.thanks

[@FilledStacks]

You're welcome :) create a function that you can call that closes the dialog. Use a separate navigator key for the navigator above the dialog manager then call pop on that key.

[@acctest-uw3ic]

@@FilledStacks i use Navigator.of(context).pop() to dismiss dialog. is it ok?

[@FilledStacks]

@@acctest-uw3ic If it does what you want it to do then yes

[@berosolo866]

amazing as usual ❤ ❤ ❤

[@FilledStacks]

Thanks ☺️

[@rossthemusicandguitarteacher]

Yessir thanks

[@FilledStacks]

Yup yup!

[@CCGreenParadise]

Awesome as always, it just feels very dodgy to have 2 Navigators in the app with the named routing solution, bu to far so good!

[@FilledStacks]

Thank you. you don't need two navigators with the named routing. one should be fine for navigation. the other one is for the dialogs only.

[@CCGreenParadise]

@@FilledStacks There is the one added with the Navigation Widget inside the builder of the material app, and the other one provided as second parameter of the MaterialApp builder's function itself. I guess that by the inherited widget system the calls to Navigation.of(context).xxx matches the first Navigator up the tree, which happens to be the builder's one (with all the routing) for anything within the pages, and the higher one, (manually created Navigator inside the builder function) for Dialogs. Makes a lot more sense not that i'm writing it down! If i want to navigate through pages from the dialog i guess i'll have to use the main navigatorKey from the service. Thanks man, keep up the great work, yout tutorials and the ones from ResoCoder convinced me to rewrite my app, i'b caming up great !

[@joeng7424]

Using this approach, I can't deal with localization as it needs BuildContext. And I don't want to pass down BuildContext. Anyone has a solution for this case?

[@FilledStacks]

The Dialog Manager manager has access to the build context. Before you pass the title and show the dialog in the manager you can translate and show the translated string instead of the one passed from the viewmodel. If you want translation in your viewmodel setup a localisation service where you can pass a key and retrieve the intended translation for the language. There's many ways to do it, but you have the context in your Dialog Manager, that's why the manager is there in addition to the service.

[@mukhtarfauzi5824]

nice tutorial.. thx

[@FilledStacks]

You're welcome man. Thanks for watching

[@mawulijo]

13:46 is so true. hahaha

[@FilledStacks]

haha had to sneak it in there :)

[@martinharris4416]

can we have a video for FLUTTER VS CODE SHORTCUTS?

[@FilledStacks]

Uhhhm, maybe. i'll see if I have anything worth sharing there at some point.

[@martinharris4416]

@@FilledStacks As a beginner we usually struggle with shortcuts and end up writing boiler plate code every time. It could make for a short and crisp video with a large audience, a big green light for youtubers i guess.

[@FilledStacks]

@@martinharris4416 i'll see. I don't use anything special but if I think it's worth sharing I'll definitely make a video about it.

[@sarusethi987654321]

bullder

[@FilledStacks]

Haha is that how I say it 😂😅

[@sarusethi987654321]

@@FilledStacks nice content, keep up the good work.