import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Take 5 - Adaptive Dialogs - Flutter

<SocialEmbed platform="youtube" id="AQybpww4MgQ" />

## Description

Source Code: https://github.com/rodydavis/flutter_take_5

In this video I walk though how to build an adaptive dialog that looks good on desktop, mobile and web. Whenever you launch a dialog you are not guaranteed that the size is constant. In this example we will show you how to fix those edge cases.

## Transcript

**0:00** · hey guys my name is ready in this video we're gonna be building an adaptive dialogue if you want to get to where we are now make sure to watch the previous videos where we go through creating a master detailed screen as well as responsive UI and just building the flutter project at the beginning so let's go ahead and get started what we have is a simple contact master detailed

**0:23** · scaffold and when you select a contact we see it on the right and if we were SCI's down it'll push down to the detail screen now this is great but what about when we show dialogues in the app we want to make sure this is responsive as you know if we just show an entire dialog it's gonna look really weird plus if we show a dialog like an alert dialog and then we sized down to a size that's smaller than the dialogue it's also going to look weird especially on mobile so let's go ahead and see how we can fix this first of all go ahead and create a

**0:54** · new file inside of a common called adaptive dialogue and we're going to give it a make it a stateless widget so go ahead and report material do adaptive long let's go ahead and make sure we give it a size two we'll use this later on let's make it 450 by 700 we want to

**1:33** · pass in a child so let's add this to the constructor you can use the helper method right here and then it will automatically create it for you let's make this required and perfect so there's a couple different things we want to have happen if we start with a dialog from mobile we want to be able to

**1:54** · resize it to a tablet dialog when they resize up but then right back to the mobile size so what we want is a layout builder since we want this to redraw every time the screen size changes so here we have our uploader we're going to pass it a context and dimensions and the default use case is going to

**2:16** · return the adaptive dialogue but we want to check to see if we're we can even show it so first of all I'm going to check to see if the dimensions dot max width is less than the K dialogue size which we're going to grab right here dot width or we wouldn't do the same thing but for the height perfect and we just

**2:45** · want to return the child since which we'll show in a second otherwise we want to return our adaptive screen or adapted dialogue so let's do a center with a child of size box from size our size will be our K dialogue size now we're

**3:12** · also going to give it a child of an aspect ratio which will I'll explain more later but here we have our aspect ratio and we have our child and our other child awesome looks great so now

**3:27** · let's go ahead and test it out we can go ahead and update our index which just allows us to keep all of our exports in one place and go to our contacts screen so we're going to add a button right here where you can filter the list and show different filter options so let's go to line 57 where we can add some actions to this app bar let's go ahead and create an icon button we're gonna do a filter list awesome go

**4:09** · ahead and have it on top so first we're gonna check to see if we're in the tablet mode so let's also pass in our box constraints you're gonna do this right here actually let's put this in the front okay perfect and here we go

**4:39** · now we're just going to take this exact same logic point in check to see if we're tablet so if we are tablet we're gonna show the dialog otherwise we're going to push to a new screen so this will be right here instead of the contact details however we're going to create our adaptive form so let's just for simplicity or exits at the bottom just create a new screen called contact list filter options cool and

**5:17** · just make this as simple scaffold with an app bar okay and we're just going to right here or turn this but make sure that it's a full screen dialog otherwise we want to show our adapter dialog so this would be show this would be show dialog context we're going to have our

**5:53** · content or a builder rather be our alert dialog and we're gonna have our content be this sorry we need to wrap

**6:19** · this with our adaptive dialogue so adaptive dialogue child this perfect and let's just double-check everything not be able to replace this in material but we'll check that in a second so go ahead and run it here we see that it graying out so it means that it's not the correct size let's go ahead and change this with material wonderful okay and

**6:55** · let's just make sure that it shows on mobile first so here we have our contact screen right click on filter perfect it shows our scaffold now let's click on here and we have our our dialogue which is great but it's not good because we it's quite behind everything so we can update our material object here so we can say we wanted to have a color that's transparent awesome I'll do this again

**7:26** · and you'll see that we have our dialogue what's great is we can customize this however we want and it's just a regular widget but it has the awesome feature where if we resize down it'll go to a mobile view but if we start with mobile

**7:43** · it's going to show the dialogue which makes sense and if we have a tablet and we resize it vertically it'll also go to these this mobile view here we have our child and it will always be the correct size and position now you can customize this however you want but this is just a silly example of how to do it in a pretty basic way later on in future

**8:09** · videos we're going to really flush this out but just wanted to show you real quick how how easy it is to do adaptive dialogues and no matter where we are on a desktop it'll always be the correct aspect ratio okay awesome so make sure to stay tuned and look out for the next video if you have any questions please reach out to me and as always the link is in the description with the source code where you can get this up and running and thanks for watching