Create Responsive Flutter Apps with Minimal Effort

the biggest appeal of flutter is being able to create apps that can run on multiple devices with just a single code base with the stable release of flutter for the web the apps you create become even more accessible even though the apps you create will run on all compatible devices we're faced with the challenge of displaying the optimal ui on a huge variety of screen sizes that is why it's more important than ever to make your apps responsive in this tutorial you will learn how to use the responsive framework package to easily make your app ui adjust to different screen sizes [Music] hello everyone my name is ashley and welcome to risocoder our goal here is to provide top-level education and teach you the skills needed to become an in-demand flutter developer don't forget to subscribe and hit the bell icon so you don't miss a single video let's get started in this tutorial we're going to transform a simple e-learning ui to become responsive we'll set up breakpoints using the responsive framework package and then depending on those breakpoints the app will be able to resize and scale then the course tiles will change from column to a row certain widgets in the app bar will appear or become hidden and also the font size of the header text will change this tutorial will demonstrate how to use different features of the responsive framework package to optimize the ui for different screen sizes and be sure to check out the written tutorial from the link in the description where you can find all of the code written in this video and go through this lesson at your own pace in this tutorial we'll be using a starter project that has the ui pretty much fully built out for you so make sure to grab the project files from the written tutorial if you'd like to follow along let's familiarize ourselves with the included files and folders so you can easily navigate between them in the tutorial in the main.dart file we've got an app widget which returns a material app and the material app has a courses page as its home argument then the courses data.dart file has a course class which we use to get the mock data for the course tiles the courses page.dart has a stateless widget for the only page in this app the courses page so this page right here it has a scaffold with an app bar and the app bar has a title and some action buttons which are these action buttons over here the body of the scaffold contains a list view which has a page header widget and a column which displays the course tiles that we have over here the last thing we have here is the subscribe block this one over here which displays some text and a button these ones over here next we've got a widgets.dart file that separates some of the widgets we use in the courses page into individual custom widgets to keep the code cleaner and less overwhelming lastly we've got an assets folder which contains three images one for the header image and two for the course tiles awesome now that you know your way around the starter project let's add the responsive framework package as a dependency i'm going to use the vs code command palette to do that using the new dart plugin feature so i'm going to add dependency and it's called responsive framework and here it is for this lesson we're using version 0.1.4 so as always be mindful of any potential breaking changes with future updates if you're watching this in the future next we're going to get into a little bit of theory to gain a better understanding of some fundamental concepts all right so before we begin coding let's take a deeper look at how the starter project currently behaves at different screen sizes this project has no special responsive configurations everything you'll see here is how flutter behaves by default with the way our ui is currently set up to show you the changes in screen sizes i will use the chrome devtools device preview feature here at the top i set it to responsive and it shows me what the current screen size is with these numbers over here it might be a bit hard for you to see the numbers but unfortunately i couldn't make them any larger so if you have a hard time seeing i will make sure to mention when we reach any significant break points and their values so here i'm running the starter project in the browser and now let's observe what happens when the screen size changes let's increase the screen size to about a thousand and then we can shrink it back down did you notice any changes let's see it again the first thing you'll notice is that no matter how large the screen gets the up bar stretches to fill the full width of the available space and it keeps stretching or shrinking to adjust to the screen with changes another easily apparent thing we can see is that this header image over here shrinks on smaller screens and then grows up to a maximum of 800 pixels in width when the screen size goes up so as you can see flutter by default exhibits some responsive behavior known as resizing flutter tries to resize the widgets in order to fit them on the screen to understand how this works a bit better let's see what exactly is happening with the app bar and the header image so the app bar has a width of double dot infinity making it stretch to fill the maximum available width no matter how large or small the screen gets that's why it resizes accordingly now the header image in our code has a defined width of 800 pixels but as you can see its size isn't always 800 pixels it doesn't get bigger than that on large screens but it does shrink in size on smaller screens this happens because of ongoing negotiations between the parent and child widgets regarding how much space the child widget can take up the image width then changes based on the constraints defined by the parent widget we won't be getting into the depth of how constraints work and how the widgets determine their size is so if you aren't familiar with these concepts you should definitely take the time and familiarize yourself with them the flutter documentation has a section on understanding constraints with tons of visual examples if you want to get a link to that section in the docs you can find it in the written tutorial which you can access from the link in the description to this video so now that you can see how the starter project behaves with the default resizing behavior you might think that this isn't too bad and that's kind of true because the app is still usable just the way it is however we can definitely make it better we've now seen the default resizing behavior in action and although it is suitable for some screens in other cases it would be nice if the ui could also scale proportionally in height this is where the responsive framework package comes in the ability to scale is the core feature of the responsive framework package so how does scaling differ from resizing well let's take a look at the app bar again when we increase the screen size the upper width increases but the height always stays the same the icons and the text don't increase in size either if we were to introduce scaling then the app bar would not only increase in width but it would proportionally increase in height as well the title the menu text and the icons would also scale making them more readable and if we activate the scaling behavior it would also affect all of the other widgets on the screen now that you know the difference between scaling and resizing we can almost start adding this behavior to the app first though we need to determine at which screen sizes or break points we want the app to scale and when we want it to resize we're going to do that by using the responsive framework package to define breakpoints for our app and for every breakpoint define the desired behavior you might wonder how come we can just have the app scale continuously well let's see what happens when we do that as you can see when the app scales continuously it gets way too big really quickly so instead of scaling continuously it's best to set that behavior only for specific breakpoints where it makes the most sense there isn't 100 set rule on how we can determine when to resize and when to scale but as a general guideline we can go along with the following mindset for instance our standard ui with the default resizing behavior looks perfectly fine on small screens like cell phones so for those kinds of screens we can leave the default resizing behavior and not add scaling on the other hand on tablets and really really large screens it may be beneficial to add some scaling that will prevent the text and widgets from appearing too small to show you how this would work let's see it in action here we can see the app resizing on smaller screens specifically screens smaller than 600 pixels and then when we pass the 600 pixel break point which is now the app begins to scale up until the next breakpoint which in our finished project will be 800 pixels now that we've got the theory nailed down let's get into practice head over to the mean.dart file in the starter project and here we're going to import the responsive framework package so import responsive framework responsive framework.dart then let's move down to the material app and here we're going to define a set of breakpoints to do this for the entire app we're going to use the builder argument of the material app this argument accepts a callback function and this callback function has two parameters context and widget then from this function we're going to return a responsive wrapper.builder provided to us by the responsive framework package for the first argument of the builder we are required to provide a widget and this will be the widget we get from the callback function now we can just provide the widget but based on the official package examples we're instead going to do this a bit differently we're going to use the clamping scroll wrapper dot builder which takes in a context and the widget and we're gonna add a bang operator here and let's add a comma as well so providing the widget through the clamping scroll wrapper is meant to disable the over scroll glow which appears by default on android this wrapper comes from the responsive framework package and you can also use the balancing scroll wrapper instead of the clamping one if you prefer the bouncing over scroll effect over the clamping one next we're going to define our breakpoints using the breakpoints argument so let's add the breakpoints argument here and here we need to provide a list of responsive breakpoints objects so let's add a list and first let's add a breakpoint for smaller screens we want this breakpoint to have resizing behavior so let's add responsive breakpoint dot resize we need to provide the breakpoint value to the resize named constructor so let's set this breakpoint to 350 pixels then we're also going to specify a name to easily reference this breakpoint throughout the app for the name you can use any custom string or you can use the constants included with the package i'm going to use the included mobile constant next let's add a breakpoint for larger screens like tablets and give it scaling behavior so here i'm going to add another responsive breakpoint but this time to set scaling behavior we're going to use the auto scale name constructor and over here we're going to set the breakpoint value to 600 pixels and the name to tablet which is another constant provided by the package now by default the scale factor is set to 1 as you can see here if you want to change that you can using this scale factor argument now let's add another breakpoint for 800 pixels and this one will set to resize so responsive breakpoint dot resize and it's going to have the value of 800 pixels and we're going to call it desktop now we're going to add one last break point for the very large screens at 1700 pixels and this one we're going to give it a scaling behavior so let's add another responsive breakpoint dot auto scale and the value is going to be 1700 pixels here and for the name we're going to add a custom string here call it excel so here we're using the resize and auto scale name constructors to create our break points but you can also use the auto scale down and tag constructors the auto scale down creates a break point that will have the same behavior as the auto scale one but it will also be able to scale down in addition to up the tag constructor can be used when you don't want to set a specific behavior for a break point and instead just want to create a break point that you can reference by name elsewhere in the app for this app we've defined four breakpoints but ultimately it's up to you how many breakpoints you want to set up and which behavior you want to assign to them there isn't a hard set rule for this and it will also depend on your use case you can always experiment with this to find the right solution for yourself now let's also add a const over here because the flutter lengths are telling us that we can use a const over here and that's it so for this project our main.dart file is complete but before we move on let's briefly go over the responsive wrapper arguments which we haven't customized here but you should be familiar with first just like the breakpoints you can also use the breakpoints landscape arguments if you would like to set breakpoints for when a device is in a landscape orientation by default landscape breakpoints will be active only when the app is running on android ios or fuchsia if you want to add more platforms to this list then you can use the landscape platform's argument the min width and max width arguments can be used to specify the minimum and maximum width of the entire app then over here you'll see that we have default name default scale and default scale factor arguments maybe you already noticed that these arguments seem to be similar to the ones for the responsive breakpoints we just set up that's because these default values will be used when the app is running on a screen size that doesn't have a defined breakpoint for our app we didn't customize any of these values so we won't have a default name the default scale is set to false by default and the default scale factor is set to 1. since our app doesn't have a breakpoint defined below 350 pixels for any screens smaller than 350 pixels these default values will be used to determine the behavior for the app so because we're going with the default scale set to false here our app will not scale on screens smaller than 350 pixels then we've got some other landscape specific arguments here and the last thing i'm going to cover here is the background and background color arguments you can use these to set a background color or image for your app in our case we didn't set this and even if we did it wouldn't be visible that's because we have a scaffold with a white background which stretches to fill the entire page if we were to set a max width for the app and the screen were to be larger than that width then the image or color you specify using these arguments would be visible in the section of the screen which exceeds the app width now let's run the app in a browser and see how these breakpoints we set up affect its behavior now our app is running and before i test it i should also mention that when you're running your flutter app in the browser hot reload is not available only hot restart is and from experience hot restart doesn't always work either so if you're working on the app and you want to see the changes in your code reflected in the browser your best bet may be to stop the app and run it again all right so let's test this app now from 350 pixels until 5.99 the app resizes so now it's at 5.99 and then from 600 pixels it begins to scale so you should see it scaling now all the way up until the 800 pixel break points and now we're at 800 pixels so it goes back to resizing all the way until we reach the 1700 pixel breakpoint so let's keep going and here we are now from here it's going to go back to scaling there you go now you may have noticed that when the app switches from scaling to resizing the ui snaps back from the scaled size to its original size let's go back to the well it's here to the 700 it's about 750 pixels here so let's go up until we reach the 800 pixel break point and oh there you go did you see that it snaps back to its original size so this will occur when a new breakpoint is reached then the behavior for the next breakpoint will begin from the snapped back dimensions you can use this in your favor in certain scenarios let's assume you want your app to scale from 600 pixels to 1000 pixels as we saw earlier when you scale continuously for a long break point range the ui quickly becomes way too big so to fix this we can break that one long range up by adding another breakpoint in between so if we have a breakpoint set to scale at 600 pixels and then a breakpoint set to resize at 1000 pixels we can add another breakpoint at 800 pixels and set it to scale what this will do is have the app scale from 600 pixels to 800 and then at 800 pixels the ui will snap back to the original size kind of like it happens here and then it will begin scaling again from there until it reaches the 1000 pixel breakpoint this would ensure that the ui doesn't get too big but still can scale across that range of breakpoints all right next we're going to explore other features of the responsive framework package our app is already more responsive than before but let's see what else we can do to make it better for instance wouldn't it be great if our column of course tiles could turn into a row on larger screens the responsive framework package comes with a handy widget that can help us achieve this let's make our way to the courses page.dart file and find the column containing the course tiles this column over here the responsive framework package comes with a responsive row column widget which can display the child widgets in either a column or a row based on the conditions you set so let's convert our column to this widget now so let's change this column for a responsive row column widget and we can auto import this from the responsive framework package now we can customize this widget in different ways first let's add a row main axis alignment and give it a mean axis alignment of center so that the row items are centered then let's give our row a padding using the row padding argument and give it an edge in sets dot all of 30 and we can make this a const then we can specify the row specific arguments and we can also specify the column specific arguments so let's add some padding to when this widget is in a column state by using column padding and giving it a edge instance dot all of 30 as well then we can use the layout argument to specify what layout this widget should be in whether it should be a row or a column and we can do this dynamically by setting it as a condition so first we're going to get the global responsive wrapper using responsive wrapper dot of context and then checking if this wrapper is smaller than and here we can provide a name of a breakpoint so we want to check if the wrapper or the screen more accurately is smaller than the desktop breakpoint so we can use our name reference to this breakpoint here and since we use the constant which was shipped with the package we can use this desktop constant to reference the breakpoint so first we're checking if the screen is currently smaller than desktop and if it is we want this layout for this widget to be a column so we're going to do this by writing here responsive row column type dot column and this will ensure that if the screen is smaller than the desktop breakpoint then we will see a column if instead the screen is larger than the desktop breakpoint value we want this to become a row so we're going to say responsive row column type dot row and give it a save so you can see what's happening here we're checking to see if the screen is smaller than desktop and if it is we're going to set this to a column and if it's not then we're going to set this to a row great now there's one more thing we have to do we can't just add the course tile widgets here just like this we have to wrap them in a responsive row column item widget so let's do that now so let's wrap them with a widget and this widget is responsive row column item and let's do the same thing for this one responsive row column item and now here there are other arguments you can specify what we're going to add is a row flex of one to prevent overflow errors and we're going to add the same thing here so row flex of one and that's it so that's pretty simple there are a few other configurations you can set up for this for the row column widget itself as well as for the row column items but you can explore those on your own time so now let's run the app again and see these changes take effect so now the app is running and let's increase the screen size when the screen width reaches 800 pixels the column instantly changes to a row just like we wanted perfect another cool widget that comes with the responsive framework package is the responsive visibility widget you can use it to wrap your widgets and hide or show them based on the breakpoint conditions you specify to show how this can be implemented let's make certain widgets in the app bar hidden or visible depending on the screen size we're going to make the menu text button widgets these ones over here visible only if the screen size is larger than the tablet breakpoint so larger than 800 pixels and when the screen is smaller than 800 pixels we will instead display a leading menu hamburger icon button first let's add the leading icon button to the app bar because we currently don't have one so let's add it over here leading and we're going to add the icon button and we'll just have an empty function here and for the icon let's add icons or i should say icon and icons dot menu great then we're going to wrap this button with a responsive visibility widget so responsive visibility the only thing we're going to specify for this widget is one condition using the hidden when arguments so let's add that now hidden one and this argument takes a list of conditions and we're just going to add one condition like this condition dot and you can use either equals larger than or smaller than we're going to use larger than and here we need to provide a reference to our breakpoint and you can either use the breakpoint value or the breakpoint name we're going to use our reference name which will be the tablet constant amazing we're using hidden when because by default as you can see here over here the visible argument is set to true which means by default this button will be visible and only disappear when the condition we specified here is satisfied now before we run the app again let's wrap our menu buttons with the responsive visibility widgets as well so let's move down to the menu text buttons and wrap them one by one with a responsive visibility widget so over here these buttons we're going to set by default to be not visible so we're going to set the visible argument to false and then for our conditions we're now going to use the visible one argument instead of the hidden one because by default these will be not visible so we want to say when they should be visible so here this also takes a list just like the hidden one argument and here we're going to add a condition so it's going to be actually the same condition only now we want it to be visible when the screen is larger than tablet so we can just copy this condition and paste it in and then do the exact same thing for the second menu button so we're going to wrap this with a responsive visibility widget and then here we're going to set the visible argument to false and we can just copy this visible one argument and condition and give it a save so it formats and that's it awesome you can add another comma here and now before we move on let's quickly satisfy our flatter lens and make these into cons and same as this one over here we can make this whole list a constant amazing now let's run the app again to see what we've done so our app is running and let's see what we've got here so right now the screen width is at 500 pixels and as you can see we don't see the menu text buttons but we do see this hamburger menu icon button so now if we increase the screen size to 800 pixels the hamburger menu icon disappears and these text buttons appear there you go works just as expected there's just one last responsive framework feature we're going to implement this package provides us with a responsive value class we can use to create an object that contains different values depending on the breakpoint conditions we specify the values can be of any type but we're going to keep things simple and use this class to create a responsive double for the font size of our header text switch over to the widgets.dart file and then let's head over to the page header widget this one over here then let's find the text widget that displays the our courses text so this text widget over here all right now let's change this font size that's just set to 60 right now to a responsive value so we're gonna delete this 60 and now here we're going to add responsive value and we can import this from the response to framework package and we're going to create an object here responsive value takes in a context and it also takes in a default value and this needs to be a double so we're going to set it to 60 60.00 then we can use the value 1 argument to provide a list of conditions and the first condition we're going to set will be condition dot smaller than and we want it to be smaller than the mobile break point so we're going to set the name to mobile for this condition and here we can also provide a value that we want this responsive value to have when this condition is satisfied so we're going to do that by saying value and providing it a value of 40.00 next we're going to add one more condition and this one is going to be condition dot larger then and for the name for the breakpoint name it's going to be tablet and for the value we're going to set it to 80.00 awesome so as you can see we're getting some errors here and that is because we can just provide this responsive value object to the font size argument it needs to be a double so to do that we need to get the value from this object and by using that value and there we go and also i missed this over here and that's it so now everything's working fine let's give it a save so it formats and let's review this so we're creating a responsive value object that by default will have a value of 60 for the font size and if none of these are conditions are satisfied however we also have these conditions so if the screen size is smaller than the mobile breakpoint then the font size will be 40 and if the screen size is larger than the tablet breakpoint the font size will be 80 and we're getting this value out by getting the value field from this object using dot value and that's it now we can also make this list a constant as per the flutter lens and that's all the cleanup it looks like we need to do here so now let's run the app one last time to see the end result all right our app is up and running so now let's test this responsive value we set up so the screen width is at 500 pixels right now let's shrink it down to below the mobile breakpoint which is 350 pixels to see if the font size changes let's keep going and there you go as soon as we went below 350 pixels the font size changed to 40. and when we go up above 350 pixels the font size goes back to 60. now let's check the other condition so for the other condition when we reach a break point that is larger than tablets so when we reach a screen size that's larger than 800 pixels the font size should go up to 80. and there you go so we just passed the 800 pixel width but it didn't look like anything happened well actually it did so over here if you remember from 600 pixels up until 800 pixels the app scales so that includes this header text over here and when we pass the 800 pixel break point just like this everything snaps back to the original size there you go accept this header text over here and that is because its font size actually increased to 80. so it stays large and that's it before we wrap up this tutorial i just want to quickly mention two other features of the responsive framework package that we haven't used here but you may find useful one of them is you can use the responsive constraints widget to wrap around your widgets it will return a container with box constraints based on the conditions you specify that container will wrap around the widgets you set as a child of the responsive constraints widget then the other widget i want to tell you about is the responsive grid view widget this widget can help you create a grid view with additional grid layout controls for more details on these two widgets and anything else we didn't cover in this tutorial you should check out the package source code this brings us to the end of this tutorial thanks for sticking around all the way i hope you learn a lot here today you should now be familiar with the main features of the responsive framework package and have the foundational knowledge needed to utilize them for making responsive flutter apps to go through this tutorial at your own pace once again and to get all the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flutter developer who can build real apps for clients or at a job go to flutter.education to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to the mailing list to get the best flutter resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this be sure to subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skills because here at risocoder we're determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer like the video if it helped you leave a comment and see you in the next one [Music] you

Channel: Reso Coder

Views: 18,028

Rating: 4.9521365 out of 5

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter responsive ui, flutter responsive ui tutorial, flutter responsive layout, flutter responsive

Id: bXwK1Lrfihw

Length: 43min 9sec (2589 seconds)

Published: Sat Oct 02 2021