FF 101: Lesson 04 - Layout Basics Mobile

welcome to this next lesson in flutter flow 101 we're going to go over layout Basics this is going to be fun for numerous reasons have you ever seen a design on dribble and been like man that's a cool design I wonder if I could build it in flutter flow throughout this lesson we're going to hopefully teach you the basics that you need in order to come up with the elements the layout The Styling that you need for for most like impressive designs on dribble because that's the beauty of flutter flow is that you can actually build out anything you're not stuck with just templates I know we talked about flows and custom you know theme and all this stuff and and components and template pages and flutter flow 100% they're great awesome they're not for every use case right they're you don't be bound by them you can have complete Freedom you want to build a robust home iot app go for it you want to build custom charts you can do it have fun with it with custom code but you know also with the with the UI Builder we can build almost anything so uh I'm going to jump out of here actually because we don't need my expanded one and I'm going to just jump into let's go ahead and do this we're going to uh we're just going to build some UI okay so I'm going to just go ahead and create a new page create blank and we're going to take two two approaches to this first approach we're going to talk about building for mobile second approach we're going to talk about building for web and I'll make this I'll make these two videos so that you can sort of you know these are just basic layouts okay and and widgets within flutter flow they're going to be helpful so mobile example all right now again the way I got to a page was command K and then I just searched add page and then I did it now within flutter flow there's this toggle in your settings that allows you to add app bars which is a very common UI element in mobile applications you can add it to all new pages or you can remove it completely you can also drag it in from the Builder um but this will automatically provide uh safe area right so here you go if we have safe area on the page doesn't really matter if you have an app bar because it'll just automatically assign safe area uh so that your title here welcome you know doesn't get overlapped by the knot or the dynamic island or anything like that so this is a design by the wonderfully talented Isaac Sanchez he does a phenomenal job in all of his user interface designs and this is a perfect example of something that we could do in flutter flow Beyond this little like outline of a logo of an icon here you could do them I guess now you couldn't really there's no way to do two-tone icons in flutter flow that's probably like one the one caveat that's like oh that sucks um but beyond that this is something that we can build in flutter flow and it's a pretty complex layout here beautifully done by the way right it provides design principles like hierarchy spacing information architecture right the 60310 rule right we're we're drawn in here to this beautiful graph we understand uh average gross income problem is what this means so we're monthly balanced what we have in there it's properly Hier it's has proper hierarchy and then recent transactions so let's go ahead and build this page now the first thing we want to do is we want to make our page white so let's go ahead and do secondary background and we can set the app bar as well to a secondary background okay now the title for his page is actually in the center and here it's left Aline so there's an easy way to do this you can just toggle on the title properties Center title boom perfect we can also drag in a here you go text let do that let's wrap this in a column so in flutter flow in flutter sorry not just in flutter flow in flutter if you want things to stack vertically you utilize a column if you want to stack things horizontally you use a row very important those are two layout two layout elements that when you understand the nuances of them or just the basic functions really um your design can just become wild it's going to be great so all right let's go ahead and change this text we're going to say checking account and let's go ahead and do uh Bank oh this is all uppercase Bank of America now he has a little bit of space here we can do letter spacing so let's just do like dup maybe three here this is great so text elements right we have the ability to set a text style and then we're utilizing a body or a label small here in his design he also has two icons on the left and the right now when we have this we can just do icon button I will always use well not always best practice is to use an icon button they don't always work uh because they conform to material design guidelines which states that any touchable area has to be at least 44 pixels and so icons if they're less than 44 pixels icons don't scale well and I'll show you what I mean by that but not up here because it'll be it'll it'll behave differently in the app bar so okay now he has a a primary background instead of this sorry our primary background which is a slight gray so I'm going to just uh make this secondary background and the fill color let's do primary that's a slight gray there we're going to add a little bit of space here if you do six and six it's going to make a perfect circle there which is good and then we're going to say we're going to add this to a search now you can add custom icons I have added custom icons here so I will just utilize that but the material icons are are really great out of the box they do a good job we can now we can't copy and paste into the app bar so if you tried to copy and then paste it'll say must drop into leading title or action section all right not a big deal we can just do this we'll drop it in there and then what we can do is we can copy this padding oop we can apply it over here and then just add 12 pixels to the right instead of the left we can also copy this style so copy widget style and we'll just paste it over here sweet oh sorry we'll just do 12 and then we can change that to an account icon or a user icon in my uh custom icon pack so there you go all right so we we essentially have this I think his icons are even a little smaller so maybe like 20 and I think they're a slight gray so we're going to do our secondary text which is our gray text and we'll do that here as well perfect and now let's go ahead and build this uh sweet and we can utilize a column here this is great uh they he also has uh a slight page background so the top section is white the graph is on a white background and then the recent transactions is also on a white background so what I would do is is I will drag a container into here let's do Infinity width this is just going to take up the full width of the uh space and it's better than 100% for some reason in flutter Infinity is just better you know you can do 100% it's just not the same so yeah just do infinity and we'll just go ahead and increase the height for this now now since we utilize the container that also means we have to utilize another column okay containers don't have any layout properties they're just stylistic essentially you can just apply styling properties to them same thing with columns you can't apply styling properties to a column except padding which is layout and columns allow you to stack things vertically right so let's go ahead and add a column here and what we want is we want one text element two text elements and then a row because the the row is going to provide us with the ability to stack two buttons side by side and for this column we also want to make it Center the content okay so over here when you select your column or your row there are some default alignment icons here you go right space in between space around space uh yeah this is space around space evenly we're just going to Center it we're going to add a little bit of uh spacing on the column itself I like to utilize the spacing this item spacing rather than like padding on specific elements now every now and then I'll add additional padding on elements but overall I really like this spacing okay so we're going to do this one as our body small again and available oh sorry available balce sweet I'm going to also just do this one and I think display large we're going to just do that perfect now in order to get this stuff like correct right the spacing correct we have a implicit height set on this container you can actually remove explic Heights from containers right you don't need them but what we can do is we can add padding here so we can have padding 24 on the top 24 on the bottom that would be great um we can also do like 16 pixels on the left 16 pixels on the right of this row this will allow us to have some spacing on the right and left of those buttons so we're going to do that let's do 16 in between and let's go ahead and drag a button over here okay now we want a button in this row as you can see we're dragging it in the row not the not the column not the other column just this row here and we can duplicate that but first let's go ahead some widget styling some theme widgets already set up but I won't utilize them because you may not have them set up so let's go ahead and REM make this fill color our secondary background which will be all white let's remove the elevation we do not want the elevation because it's going to be a bordered or a ghost Button as they say we're going to utilize our Alternate which is our slightly gray color here and then in our text right when we went through typography in color our title is always going to be white so as you can see it's always right white here let's go ahead and change it to like body large which means it's going to adjust for dark and light mode okay sweet and we also his buttons are oval so we have border radius here let's go ahead and just make it 44 maybe just whatever whatever you want to make it always you know the oval instead of uh round rounded Corners the last thing is we want an icon so select the button come all the way down and we can select an icon uh let's see down sweet and his icon is gray so we'll do that we'll go make it 24 maybe 20 now for me when I have an icon the icon the icons and the icon in the buttons are only going to appear on the left for one and then two as you can see this spacing looks really funky to me I don't know what it is I don't know if it's a flutter thing or what but you can fix this right there's a little more space here than there is here or at least visually there's more like I I don't know if there's it's actual space but visually it seams off you can change that with this button padding let's go ahead and do it 20 on this side 24 on the right perfect now we're going to duplicate this and we want these two buttons to take up the full amount of space right and so what we're going to do is we're not going to set these to width Infinity because if you set something to width Infinity in a row it's going to break it's going to give you a layout error I'll show you boom Infinity invalid action you don't want to do that no no but what you can do is you can expand them so let's expand sweet there you go you have your two buttons let's go ahead and change the text here deposit oh oh yeah and then this one is transfer and let's change that icon very nice if you wanted to right I so on that column I said uh we want to initiate spacing from here now let's just say for the heck of it right we wanted to in his design he has this uh this column right like these buttons are a little lower and so what we can do is if we do want to set this container uh as a imp implicant height so let's go ahead and do like 220 for instance and we wanted this to float this Tech stuff to float at the top and these buttons to float at the bottom there's an easy way to do that you could use a spacer or you could just expand this row and expanding this row will just say let this row take up all of the space just like these buttons and then you're like oh well okay but I don't want the I don't want these centered oh no problem let's just align them to the bottom perfect okay so there you go and we have the space here and now when we set our primary background sweet we have it it's pretty good pretty close to the design now let's go ahead and add add a container here and what we can do is on this column let's say we want 8 pixels spacing sweet uniform and then we'll give it a pixel border radius so here what I'm doing is the Border radius is uh it's detached right this is singular you can set 8 888 or you could unify the borders and just set eight okay rock on now let's go ahead and do another another column in this container cuz like I said containers are just stylistic so let's go ahead and add a column this column can have a little bit of padding which is great so let's go ahead and give it a little bit of padding and it has a row up top right so there's a monthly deposit on the left there's a avrg on the right and uh yeah the amount below it so let's go ahead and drag a row here we can drag in a text element here we can drag in a column element here now there's two things we're going to do the reason why we're using a column element here is because we want another text element we want two of them stacked on top of one another okay so I'm going to tell you or teach you how to make these sort of go to the right or left there's two ways to do it the first is to touch or to select the row and to do space in between perfect this is great and my almost one of my favorite ways to do this but let's just say that this text is huge for some reason okay like let's just say monthly deposit of my bank all day something like that you know we we go up as you can see it's going to push off that other content now we don't want it to push off that other content so space in between does work but it's not the perfect way to do this okay the perfect way would be to say um monthly deposit or monthly balance sorry let's go ahead and set it as label small we'll also set this one as label small and then we want it to be at the top and we want this to expand perfect we can also set some spacing here so now if we did this it would wrap you may not want to to wrap and in that case you could do you could expand this column so that it always sort of grows okay does doesn't really matter but the but expanding the text that most likely will grow is going to be pretty important so we could in this column what we're going to do is we're going to set the alignment to the right and this text is going to be AV vrg so average re uh average revenue gross is I'm guessing what what it is we'll just say that this is a pretty good number 45.5k yeah monthly balance not bad not bad it is the same size in his design so we'll go ahead and do that we'll even change up the set this like 44 cool all right now we need a graph here so let's go ahead and we have a chart we can drag that chart in and again we'll just expand that chart cuz it was overflowing because it had an implicit height and we don't have spacing we just have it on the row so on this column let's go ahead and add 12 pixel spacing that's perfect let's change this uh chart type to Bar okay okay cool and let's also we can do two of these so this number list what we can do is just set to random integer for now yeah integer let's say 200 Min list uh 100 Max list 200 random list of dates okay uh seven and let's datetime format looky there we just want Monday yeah we could even just do e or E I think is going to be um perfect there you go paste this in here cool right so we have bar color border color we can change the um border radius so like four which is I think what he has and we can change this bar width so I think he has like 20 maybe that's pretty good we don't know how many it's going to have but then let's go ahead and add another data type right and let's see if we can overlap stack bars oh yeah looky there but this color sucks can yeah we'll just do that cool data source number lists bar values and and we'll set it to paste yep all random integers that should get rid of the uh the little little guy right there so all right and we're going to show labels so I think down here show Legend show labels label 1 2 3 we can update this text here let's go ahead and update this too perfect Co we have this uh chart and then we can we could do our own uh labels down or like a legend down here as well so we could just do a row we could set that row to the far right and we could say um container we'll make it like 12 set to uh last week cuz he has that green and then we can duplicate that as well we can set a little bit of space on this row so let's just go ahead and do like eight and we can drag a text in there oh and there you go sweet so there you go and then we can double we can multi select our text right cuz there are his text are really small so we can do that and we can also edit both of these at once if you wanted to this week oh it's actually changes so this week and then on this one we'll just do last week okay cool all right so we have that and now we can do recent transactions down here so let's go ahead well all I'm going to do is uh copy and paste that cuz why not we already did the work we do not need uh this C column here what we're going to do is we're going to say recent transactions we're going to change this Tex stle to maybe title large remove that remove this and in this row we're going to have two icon buttons again so expanded okay yeah we have this icon button let's go ahead and reset the uh padding here and we'll reset this item spacing on the row to 12 pixels so there you go and what it so in the design it's centered so this uh this text element is actually centered instead of top so we'll do that and we can again change our icons so we'll do filter there you go and search that's great I could have already just saved that all right now now as we get to the bottom of the page as you can see this is not uh we have some overflow issue how do you how do you fix the Overflow issue well columns and list views and grid views and tab bars um are scrollable so we can make this scrollable let's just turn on scrollable boom and now we can scroll this list view now tip of the trick tip and trick of the trade I whenever I have a scrolling element I like to add some padding or some ins spacing so 16 32 something it just provides a little bit of spacing at the very end uh whenever you query data the idea would be that you utilize a list view or a grid view those two elements are much more flexible than a row or a column so let's go ahead and add a list view okay now this out elements panel came up when I command when I press command F because I am uh in the pages view over here so we have list view here now in this list view it's going to stack horizont or it's going to stack vertically right CU we have it vertical alignment um instead of horizontal alignment and it's going to give you an error there whenever you try to change it to a horizontal alignment uh because it needs to be wrapped in a in an actual container and it also needs to be expanded so if we want to do that we would have to expand this which we can expand anyways but in this uh what they have is uh a column or a row right so you have two text elements over here and I'll show you you have two text elements over here and you have one text element over here uh there's nothing that we need to style in the background so we probably can do without a container but we probably will start with a row right and then a column on the left and a text Elma on the right now you don't need to stack your you know if you you just have a column or you just have a column over here with two text elements you have a text element over here again no need to wrap this in a column or wrap this in a row you can just expand this guy boom this is great we will cross axis alignment to the top on this column we're going to cross axis alignment to start right columns and rows they they do these things differently they flip them and we're going to just we're going to also set some space sping some item spacing on this row so 8 pixels okay that that just provides us with a little bit of space even if this does overflow um we're going to have a little bit of space before it hits this so 2.34% and we'll just make it small because that's exactly what it it is it's a negative value so let's put an error there and then we can drag that down so this text element is a label small it's going to be a ticker we're going to add a little bit of space in between this to four pixels and then we can say uh Tuesday April 25th 24 3 not bad now also in this list view we can add some space in between items so that when we duplicate this which you won't duplicate this in actuality right this will be a um Dynamic list but for the sake of this design we'll do that and he has a little bit more space in between so let's do like 12 maybe even 16 okay now this since we expanded this list View and we made it primary it has primary here right so when you when we scroll down o uh we can actually scroll within this list view as well okay so when you do Dynamic uh yeah when you do Dynamic lists making them primary and expanded so that they are scrollable is best practice in accordance with flutter it'll make your applications perform better if you have shrink wrapped on uh the it can be buggy so just just a word of wise if you want per if you're if you want performance then just do that um there's one thing that I don't like about this and it's because this scroll bar is in the middle of the page I hate that it's my it's one of my pet peeves so let's go ahead and fix it it's really easy fix we have this row and list inside of a column that column has padding let's just go ahead and remove it and let's add the padding that we want to this row so we'll just do eight eight and eight o eight perfect and then we can just set these rows with the padding and again this will be uh these would most likely be components so you'd only have to do this one once and then it will be yep F in there and now our scroll bar even there is on the side of the card very nice okay we can do that and we have our design pretty close pretty close right not bad that is mobile layout

Channel: Kaleo Design x NoCodeUI

Views: 264

Keywords:

Id: p9FMwtB5G5c

Length: 29min 0sec (1740 seconds)

Published: Thu May 30 2024