Responsive Web & Mobile Apps in #FlutterFlow using Conditions

foreign [Music] development where you're going to want to introduce responsive design into your applications in this particular project I'm building a web Administration dashboard that I'm going to be using in a future series on my channel but I thought I'd take this opportunity to show you some of the responsive features of flutterflow that I'm using with inside this project to adapt the UI depending on the size of the device that it's being run on so let's have a quick look at the demo now so here's the dash the dashboard running in the web at browser now as a published application and on the left hand side here you can see I've got a number of options here if I just choose project you'll see that I've got these kind of cards that kind of get displayed and this is where I'm going to want to show you the problem that I've got and the problem that I'm looking to solve so of course if I grab hold of the right hand side of the user interface as I just bring these in obviously I'm going to start seeing these cards kind of wrap across the actual screen here they're going to sort of go down in a vertical kind of position but as you can see there's nothing really responsive about these particular cards now some of the UI is responsive because you can see the navigation that's disappearing on the left hand side you can see some slight changes in sort of panel sizes and stuff like that but the cards is going to be what I want to make responsive so let's go back over to flutterflower I'll show you how you can use the power flood flow to introduce responsive capabilities into these cards so here we are then back in the widget tree and let me give you a little bit of information in terms of structure just to set the scene for this particular video please do go and check the link of course above here or in the description which is talking about the conditional Builder this is a previous video of mine where I talked about using the conditional Builder to kind of show and hide components depending on what you select in with inside the navigation here but in this particular video we're going to focus primarily on these cards and how we get these responsive so on the left hand side here you can see that I'm on my I've just got one page here which is admin home and I've got the projects page here which is the one that this is being displayed at the moment now the conditional Builder is actually showing me this particular component at the moment if I just click on the actual projects page you can see that I've got a a wrap a wrap widget here okay and with inside that I've got a series of other components now each of these particular components are passing in a number of parameters and that's the reason to why you're getting a kind of like the a different visual on each of those for example I'm passing different titles I'm passing in kind of the total number of light tasks here for example or the tasks there and of course I'm passing some other detail here now each of those components are listed here so they're just quite simply in a wrap now the wrap is just being kind of dragged and dropped straight into a particular kind of like a row and of course with inside that then I've then put these particular components in there themselves and you can see that's kind of how they are positioned at the moment of course if I just move these in and out you can see that they just simply wrap down to the bottom which is what you kind of want to see as you kind of bring your application in and out like that you'd want to see that kind of wrap the problem is is that in our application these are oversized we don't want them to be that big when they're being viewed in this particular view of inside our application and that's kind of where we will now make adjustments with inside flutter flow to kind of make them more responsive okay so with inside our application we're going to want to adapt our UI depending on the width that our UI hits okay so as we bring in the hit the size here on the right hand side the our application is going to hit a particular break points okay these breakpoints will denote what size the current application is currently set up and geared up for from a responsive perspective so of course here if you go really really wide you could be a desktop you could just kind of reduce the size here you can get to more tablet territory and then when you carry on down here you then start getting into Mobile World okay now because you're going to want to adapt the size of your widgets with inside the application depending on which breakpoint it has been hit so whereabouts are these break points then configured okay where where do we kind of find the detail of these they are actually with inside the themes setting here on the left hand side and within the design system section here and you've got this breakpoints area here so these are the ones that's always worth keeping in mind okay so we know that everything between zero so zero in size which is practically nothing up to the size of four seven nine in pixels so as I increase we know that we're inside that mobile range as soon as we hit over 479 but we are below 767 in pixel width we are then going to be in a tablet a kind of sort of scale for our responsiveness okay and then of course we go up there between 767 and 991 and we're in a kind of like a tablet sort of landscape and of course anything above 991 is then in desktop territory okay so these are the sizes that the flutter flow team have preset with inside the uh beside the projects and they are very very suitable they're very very um useful for pretty well much most use cases of course there's going to be times when you're going to want to maybe introduce different sizes here but to the most part um they are pretty pretty close to what we're looking for so then how do we then we're going to sign our application hook on to these breakpoints let's go and have a look now at our our kind of our cards and let's see how we can make that adaptable depending on which one of these get hit so back then within the widget tree we're back on the projects page here let's have a look at this specific component then so I've got this uh section up here called common with inside there we've got the and we've got the actual summary a panel component which is each and every one of these particular panels and just incidentally this particular panel has some uh some as mentioned before actually has some component parameters in here like title progress count all that kind of stuff and these are really just being referenced within each of these okay so just to let you know kind of that's how it is pretty well much structured now this is pretty much a vanilla component there really isn't much intelligence in there whatsoever the only thing to point out is here by default on the on the actual left hand side so on the right hand side here we got a minimum width of 250 and then we've got a Max width of 300. now these are explicitly set because if I don't put those values in there then the actual wrapper component will not wrap the widgets down in that vertical uh position that you saw previously so we are going to have to make some adjustments to that because all the time that we've got these set um specifically like that we're not going to get that responsive behavior that we're going to want to see we're going to want to kind of reduce those container values if we can so then it just makes everything look a little bit more snug with inside our mobile view so how do we go about changing this kind of stuff so what I'm going to first do is I'm going to look at introducing responsive sizing with inside this particular section in here so this is that whopping great kind of uh sort of value this kind of here we're going to want to make this a little bit smaller if we bring in the sizes so how do we do that we're going back to flutter flow here we can see that on the right hand side here we've got font size which is currently set as 64. now what we can do is we can click on this little option the little selector here just choose that and we've got this option that's appeared called responsive value so if you just choose responsive value we're now into some like a conditional but it's based on some already preset break points for us as we know we've already seen um the small which is anything that is below 479 in our case which is going to be for mobile and then of course we've got then we've got then the next size up which is medium and then we've got the kind of the large so we can now use this um this particular uh sort of conditional block here to Now set the values that we need so for example within a small so this is a mobile view we can actually put in here the font size so we know that the the most larger size we've got is 64. but I'm going to change this I'm going to say this is now a 34. um for mobile and I'm just going to simply just increase this then up to say uh 44 for the medium size and I'm going to put this up to then 54 and then of course anything else which is then going to be 64. so desktop is going to be the most largest that we're going to set okay the anything below that um we're just going to reduce the size by 10 pixels and that is all that we need to do if I just hit confirm there if I Now quickly fire this up now in the in the desktop in the desktop browser view then you'll see that in actions let's do that now so here we are now with the publisher web app so let's choose a project on the left hand side and we see our cars come in display so now this is exactly how we want it we've got the 64 uh kind of size for a desktop but as I start bringing this in now you should if you just look very very carefully on the actual the the numbers there you should see them start to be reduced in size so as I just move here you can see that the typeface is just adjusted there slightly smaller going a little bit again you can just see there I've hit the two break points so you can just see the 21 17 24 38 just reducing in size so of course that's perfect that's just what we're looking for now we've seen that reduction Now using those break points but of course what we want to try and do is in Mobile World we want to try and have two cards on the screen so if I come down to a breakpoint size of roughly what a mobile is I just want to see two cards that's actually positioned here so let's now go back to flutter flow unless you use these breakpoints now this use the responsive features of flutter flow to introduce that on here as well so here we are then back with inside the actual component itself you can see here I've got my container selected on the left hand side and if I scroll back down here on the right hand side you'll see these values that we saw previously this Min width and Max width okay so we know that we're never going to have a container that's going to be larger than 300 and we're certainly I'm not going to have one less than 250. now these are the values that I'm going to want to apply to my most largest breakpoint so this is the desktop viewer okay so if I just select this particular option here if I just choose the selector here we're going to want to choose the responsive value so just choose that so we now know that this is the the minimum width that we're adjusting here so what I'm simply going to do is I'm just going to choose 250 in here so that we know that's going to be the most largest value now how do I reduce down from there onwards well what I'm going to do is I'm going to as a real test in here I'm going to reduce this by by 25 pixels every single time okay so here we're going to do 225 and then I'm here I'm going to choose 200 and then here I'm going to choose 175 life okay so that's going to be for the mobile size okay so that's good so I'm just going to hit confirm here and then I'm going to do the same here as well I'm just going to reduce by 25 and again until you test this out that you can be a little bit more accurate I'm just going to choose the uh the max width here so I'm just going to go back into the responsive values and I'm just going to move back up here so we know that this is going to be 300 I know this is going to be 275 let's do 250 here and then let's just do 225 here and hit confirm so I've got those now conditionally set and this is the great thing when you when you're actually building applications in flutterflow try to make sure that if you are creating reusable widgets that you do create components they're really really useful because I know that I can just apply these changes in one place and if I'm using this this component right the way through my application I'm going to be getting this the benefit throughout I'm not gonna have to go through individual widgets and I'm gonna have to make those change so certainly try to use components where you possibly can if you're if you're trying to use reusable um sort of looking fill with inside your UI so let's now hop back over to the published View and let's see how that behaves so here we are then with the published application let's now try resizing here on the right hand side let's bring this in let's see our card widths reduce which we can slowly start to see that they are actually reducing but I think the time I've determined that actually we've probably not gone uh that we've the width is still a bit too much okay and the way I know that is because I'm just going to show you another little technique within Google Chrome here if I just press F12 if I now click on this particular option here you can just see it down in the bottom left here called toggle device toolbar if you choose that you can see here at the very top here you've kind of got your responsive Dimensions up here and this is really handy because I can actually now reduce in you can see that the width is now reducing there at the top here and you know roughly what your responsive breakpoints are and you'll see as I start reducing this in you'll start to see that we start moving into our breakpoint territories um you know the sort of the the ranges in between the actual device sizes but you can see it where we get a little bit slowly we know that 479 is our breakpoint and you can see here we just see that adjustment that's happening now but you can see that whenever when I think I kind of Hit the 479 I'm not seeing two cards that I need to so I know that I need to reduce a little bit more so let's now um let's go back in the floor flow let's get that corrected so here I am back in the component and I've made these changes okay what I've done is I've been a bit more crazy this time I've actually reduced them by 50 pixels each so this would have been 175 it's now 125 and of course I've reduced all of these as well and I've done exactly the same with inside the max width as well I've just reduced all of these by 50. so let's jump back into the published mode and let's see what that looks like so we go back in Google Chrome and I've pressed F5 and I've kind of in this particular View and you can see here that I've got a width now of four seven eight so as I bring this in you can see that that's looking pretty good we know that we're probably going to be in the region there of um the responsive size for a mobile device but we do have a little issue right I'm just going to point this out if I go back up to just a 2478 which we know we're just under as soon as I hit 479 it all of a sudden we're now back into that single column again so what that basically is telling us that our bra our sizes that we set with inside that middle that that second option with inside that conditional block we're probably still too oversized as well if we're looking to include um kind of at least two of these particular uh sort of panels these containers with inside the actual view as well so just bear that in mind of course do keep testing these responsive designs and just to make sure you get the right size that you actually need but you can see here I just need to go in and make some subtle adjustments to improve the actual response of nature of this particular screen so just finally then please do remember you can't set responsive conditions for some properties with inside flight or flow itself of course you wouldn't want to apply to Shadow color free for example you wouldn't want to be showing a different a shadow color depending on your uh kind of your your responsive breakpoints okay but um obviously on some of them that you can and just one thing that I have actually put a kind of feature request in should I say into the flutter flow team I really hope they support this in the future but it might be that you might want to adjust your padding based on the breakpoints themselves I know that perhaps in some applications you're going to want to make your uis a little bit more Tighter and it wouldn't be it would be so great wouldn't it to actually be able to set um these responsive conditions based on the pan as well like for example I might want to reduce this down to just eight all the way around instead of it being 16 so I really do hope the flowflow team actually have a look at that request and Implement that in the future and of course they may have already introduced it depending when you're watching this video as well foreign so that's pretty well much it for this particular video I hope you've enjoyed this little summary here of using some responsive features with inside flutterflow if you love this type of content please do like the video and of course please do subscribe to the channel as well it's great to have you part of the community and of course until the next video I'll see you soon

Channel: The Digital Pro's NoCode Academy

Views: 5,896

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, flutterflow responsive design, flutterflow responsive ui, flutterflow responsive layout

Id: hkDfo-JFysA

Length: 15min 59sec (959 seconds)

Published: Mon Jun 05 2023