Flutter Responsive Design Guide

with the recent release of flutter 2.0 flutter has moved from a mobile framework to a portable framework meaning that responsiveness has just taken some new heights on the importance level we're going to cover some different tips but we will also have our own custom widgets to help with our responsive designs if you like these kind of videos make sure to like and subscribe you can find the full write up at robertpornhunger.com and of course before we begin make sure to smash the like button and let's get into it let's start off with the first one which is the layout builder so with the layout pillar we can get the constraints or the dimensions of the parent widget and depending on those constraints we can build our child widget with different heights and width and so on it's also relatively easy to use so you define a layout pillar which will give you the context and constraints now for example if we want to show something or display something depending on the max width we can use selected constraints.max with and then we can compare it to a arbitrary number in this case we'll just put it to something like 600 so if the max width is larger than or equal to 600 we will have a container with a specified height and width and a color of blue this will just give you a understanding of what the layout builder is about so now in all of the other cases so in the else statement we'll do the same thing but we will change the color to red instead so now looking at the website we can see that we have this blue box now if we would change the window size we can see that we are going to get a red box as well now we don't really have a parent widget that decides this size so it will just take the full size of the window we can also see an example of this by using the media query with media query we can get the size of the window wherever we are so even if we are in a deep child component we will be able to get the constraints from the full window size so a typical use case is that if you have a app bar and for example in different sizes you could hide the app bar or display the app bar and to get a media query it's very simple you can define a variable i'm just going to take the screen with and the media query is a inherited widget so you can just write mediaquery.com and we can select the size and now take the width as that's what we defined the variable for now we can use the ternary operator to say that we want a app bar depending on the size of that screen width now of course you can invert what i write here and you will get a example of when the website is large you will not have an apart and if it's minimum or small we will get a upper but in this case we will get the complete offset so most of the times you want to do the offset of what i did here but you get the thing now these two are the main components for building responsive uis but it's very hard to manage without constants or breakpoints so let's define a new file we can just call it breakpoints to make it simple but you can also call it constants or whatever you prefer now if we navigate to this file we can start actually defining some constants we'll prefix it by a k so it's very simple to find all of these constants and for example we can have a k tablet breakpoint and we'll set it to a pixel size or a double to what we wanted to actually breakpoint for the tablet version now there are no specific rules that you need to have but this should work just fine we can do the same for the desktop breakpoint we can set the desktop breakpoint to 1440. also of course you can define more breakpoints or constants if you want it here as well so for example if you have a menu bar to the left you want it to be 300 pixels on desktop and maybe on a smaller device or a tablet you maybe want to use a navigation rail instead and this constant makes it very easy to be consistent with that so with this we can actually build a responsive layout widget so let's start off by just creating a new file i will just give it the name responsive layout but in essence you can rename this to whatever you actually prefer and the purpose of this widget is to display the mobile version the tablet version and the desktop version depending on these breakpoints that we have created so first off let's define a stateless widget and import our dependencies now we can define our variables that we want to use so a final widget for the mobile body and we do the same for the tablet as well as the desktop so when you use this widget you'll just be able to pass another widget and you can display those widgets depending on these different breakpoints let's go ahead and as well add a constructor for this i will put it at the top so it's a bit easier to follow so let's just add a comma at the end so we can get a nice formatting of it and for the mobile body we will actually make it required this will force us to actually pass a mobile body for it and we don't actually have to pass a tablet body remember this is before null safety so if you want to use it when you have null safety there are a bunch of different ways and if you have problems with that just let me know down in the comments now we're going to create a layout builder you can also use the media query if you want to do that instead but in this case we'll just use a layout builder so let's define the builder which is the context and constraints and i prefer most of the times to use to rename these constraints to dimens for dimensions but it doesn't really change the fact what it is now we can actually do some if cases for determining when we want to display what actual widget so the first if we can check the dimensions and then select the max width and if this is less than the breakpoint we created for the tablet we're just going to assign the mobile body in a way this forces us to be more of a mobile first design which is most of the times what i prefer anyway now for the else if statement we're going to shake the max width on the dimensions once again and we're going to compare it two times so first off we're going to compare it if it's more than or equal to the k tablet breakpoint as well as we're going to check the dimension max with that it is less than the k desktop breakpoint now this is what it makes it possible to use be able to pass the mobile body so in this return statement we're just going to pass the tablet widget or the tablet body now this is what makes it possible to actually use the mobile body here so when we return the tablet body if that is null we will instead return a mobile body and we'll do the same for the else statement meaning that we are going to pass the desktop body and if that is null we are going to display the mobile body that way we always have a way to go back to the mobile body if we haven't passed a tablet or a desktop version of it now let's look at the implementation of this widget and it's rather simple actually so going over to the main.dart file in the scaffold for the body we can define our new widget that we just created and the name was responsive layout so at least use that now this one requires us to pass a mobile body so let's just define a mobile body use for the sake of it so let's just define a temporary one let's call it my custom mobile content and this one just extends the stateless widget we don't really care about what we return here right now because this is just a showcase of it we'll create a similar one for the tablet as well so you can get a bit of understanding of how it works so now going up to the responsive layout we can pass our custom mobile content widget so right now there is no specific difference between not having the widget at all but we actually have the implementation to use pass a tablet body if we ever want to the same can be said for the desktop version now one major thing you see in websites is that they have a max width of the content and that it's centered in the middle of the site and to implement this it's actually a lot more simple than you probably think we're going to define a new class i'll just give it the max with container as a name but you can of course name it to whatever you want and this will just be a very simple stateless widget so let's define that and give it a name of max with container don't forget the import statement for the stateless widget and first off before we write anything in the build method is that we actually have to define some variables and the only variable we're going to define is a child or in this case a widget now of course we can create a constructor put it at the top that's just my preferred style and we're going to make the child a required parameter now as this is before null safety you should probably use addy assert as well but we will not care for that because null safety is on its way now the first widget we're going to have in the build method is actually a center this will force all of the content to usb centered in the vertical axis as well as the horizontal but this will more be in the vertical statement in this case we're going to use a widget called constraintbox this will make it possible to have a child which will be the child we passed into our widget as well as we can pass our constraints and our constraints will be the max width that we want this content to be able to have now there are a bunch of different numbers for what the max width should actually be but as we use a 1440 a very normal use case is to use have it to 1180 in width that should give you a good base case and if you want to explore further on what you actually want there's a bunch of different materials on that out there and of course to utilize this as a constant we can go to our breakpoints file and define a new constant we'll just define it as the max width and we will set that to 1180 now moving back to our widget we can now replace this number to our constant instead so you just write k and we will get the k max width now to use this it's very simple you just wrap the widgets that you don't want to actually extend past this max width after that you're actually all set so an example of this is that you can go to the main file and let's say you don't want this responsive layout or the shiller of that to ever pass that breakpoint or max width so we can just use the tooling select the responsive layout and just wrap it with a new widget change that widget to the max with containers that we just created and that's all we have to do now of course this is just one way to do all of these things there are a bunch of different packages that already have all of these things implemented and probably in a better way as well but with this you should get a understanding on how you can actually define or create your responsive layouts let me know down in the comments if you use a approach like this or if you use any specific package and share that knowledge with others if you like these kind of videos make sure to like and subscribe as well as checking out patreon where i have a bunch of different perks all kind of support helps so it really means a lot i have some awesome other videos coming up on the screen right now so make sure to check them out and i will see you in the next one time

Channel: Robert Brunhage

Views: 31,740

Keywords: Flutter, flutter engage, flutter tutorial, google flutter, Flutter responsive, flutter responsive ui, flutter responsive tips, flutter layoutbuilder, flutter mediaquery, flutter custom widget, flutter adaptive design, flutter hide navbar on web, flutter desktop, flutter mac, flutter linux, flutter app, flutter tutorial for beginners, Robert Brunhage, Flutter web, Flutter 2, Flutter 2.0

Id: EH92XnCU1Cc

Length: 11min 59sec (719 seconds)

Published: Sat Mar 13 2021