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


# Take 5 - Responsive Design - Flutter

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

## Description

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

In this video I walk through how to build a flutter app with an adaptive scaffold. This is using a technique to have each widget define layout behavior based on breakpoints. This is very useful for having total reuse over all your screens. Responsive layout doesn't mean you need to have duplicate code.

I also mention the package I created to abstract this for you and it can be found on pub here:
https://pub.dev/packages/navigation_rail

In the upcoming videos I will go more in depth on how to adapt the individual screens. This video is mostly about how to do the main navigation in a responsive way.

## Transcript

**0:00** · hey guys my name is ready today we're gonna be building an app with responsive design with flutter this is part of our flutter take 5 series if you want to grab the project we're working on all these videos work together so you can look at the last video and get to this point or look down in the description to grab the project alright first of all if

**0:19** · we see what we built we just built a simple app with a single screen that has a scaffold now this is great for mobile applications but what about when you want to target desktop and especially tablet so another nice tip is when

**0:35** · you're working with flutter development I would suggest trying to build it with the desktop tooling because it allows you to have hot reload develop really quickly and to test all your different designs in a very fast manner I mean I found layout bugs and seconds after working with the desktop stuff that you just don't see when you're developing on mobile so to get started we want to define some variables for us to use so inside of our UI folder let's do create

### create a file called breakpoints

**1:09** · a file called breakpoints and inside there let's go ahead and give some variables so I'm going to do tab tablet breakpoint let's do 720 and let's also do desktop

**1:34** · let's give it 14:40 awesome so now if we end let's move this to the top level UI folder so you see we have UI and then home ok and now we want to wrap our scaffold with a layout builder so let's go ahead and do that so perfect and then let's

### wrap our scaffold with a layout builder

**2:10** · create a new file here at the top called tabs and let's go ahead and import material and we're gonna create a new screen called tab home we're gonna make

**2:29** · this our new home for our widgets and this will be our navigation as it were so let's also create a new file our new folder called settings give it a file inside there called screen doubt Dart this will have the same as that so we can do port material let's go ahead and

**3:03** · copy this and then let's also give it one more tab let's say about screen dark and like I said everything will be in the description let's go ahead and rename it all right perfect now that we have those two screens let's go back to our tabs and here we also want to layout builder so

**3:35** · let's go ahead and return our default mobile case so this will be a scaffold with an app bar actually no app bar the bottom navigation bar get some items

**3:57** · let's give it a current index let's go ahead and make this a stateful widget since we need a current index for this and let's out it here give the on top property

**4:22** · and if I'm going too fast you can always slow down the videos and see go to your own pace so here we're gonna add a couple different navigation bar items so let's give it a title let's call this home let's go to an icon let's give it the home icon let's give it some more tabs about settings and the appropriate

### add a couple different navigation bar items

**4:57** · icons for that okay perfect now we need for let's also change this type so we want to do a navigation bar type fixed and let's give it the background color of the theme scaffold background color

**5:21** · perfect for the body we're gonna create an index stock this allows us to kind of reuse our widgets without having to rebuild them every time so we're gonna need our home screen our out screen and our settings screen

**5:44** · perfect we also need the current index it's important that these are always the same all right perfect we can use once we have this this is good so once we have this we can also kind of abstract out what we need so I'm going to extract this method since we're using it multiple times and we're going to call it build body perfect and we're also

**6:10** · going to be doing this one a lot so let's call this one on tap and we can actually make this inherited perfect okay awesome so the next thing we want to do is create our tablet so we're gonna do if

**6:29** · dimensions dot max with it's greater or equal to K tablet this is the one we just made earlier this is gonna be our tablet view now what we what do we want to have on the tablet well we probably want to have like a navigation around the side we still want our app bar at the top which will be coming from the children but then the content will be here so we want to return a material

**6:54** · since we want to have a top level material widget let's give it a child a row let's give it some children and we're going to let's give it a navigation rail this is just got recently merged into the master so if you don't see this you can always switch to the new master Channel let's give it a current index let's define the on tap

**7:26** · which is what we did earlier and let's get some destinations these are very similar to the bottom navigation bar items but we can still add them here so we have actually we can go ahead and rename those I think we just changed this to label yep perfect and let's go ahead and

**8:03** · create and expanded this we'll fill in the remaining and we're going to do build body perfect so now we have that but what about desktop and remember it's important to do these in the right order so here we're gonna do if dimensions dot max width is greater than equal to K

**8:27** · desktop now we want to return the desktop let's also add another variable in here well actually we can keep it in there since it's all I can be local but we're going to do cons k side menu with let's give it to 50 and now we're going to return another material would you get a child this time we'll give it a row as well

**9:02** · but this time we're going to turn a container with a width of this and then a child of a ListView so it's scrollable and the children will be these items except this will be list styles and this will make sense in a second so there's a couple other things we have to add but I'll come back to that so let's do this as leading

**9:38** · we need to have a is selective property which is current index is equal to zero grind index is equal to one and current index is equal to two awesome so we can also copy this since will also have an expanded here and that looks good and we

**10:06** · also need the on top so this will be on top this is why we abstracted earlier

**10:22** · zero and if you're curious I create a package that makes us a lot easier but in this case we're just writing it out so we have our body we have our width right irreal awesome so now we have an adaptive scaffold now let's go into each one of these and just quickly flush them out actually here we can remove this

**10:51** · layout builder for simplicity sake and let's copy this over just so you can kind of see what we're dealing with in later videos I'm going to go over how you can make master detail and different types of responsiveness alright so home screen and let's change to about screen alright let's go ahead and run it go ahead and create a launch

**11:19** · configuration and run now just going back over what I did basically we define all of our children in here for our navigation we have our breakpoints file which defines our breakpoints we have our various screens and then we just

**11:38** · call that from the main which allows us to return to our tab screen now it'll make sense why we did this this way right now because later on we can still reuse all these screens individually that the title the app bar for example is not bound to the tabs the only thing

**11:58** · this does is provide a navigation for the application so here we have let's start off with mobile and if we stretch it out we have a navigation rail which real quick we can change this to be let's change this navigation rail to look the same as tab so we can go down here get down to navigation rail I'm gonna do a label type which is this

**12:26** · navigation wheel type of all and you see it's so fast to heart reload these changes and we have this on the side and if we stretch it out even further we now have our list styles you can still

**12:42** · select them and you see it changes up here on the left if we bring in the navigation rail still works and if we bring it even further we have this down here awesome so stay tuned for the next video we're gonna take this one step further