FlutterFlow: How To Design A Beautiful and Functional UI | FlutterFlow NoCode Training 2022

what's good guys so in today's video we are going to be talking about how to use flutter flow in order to build beautiful apps and more specifically we are going to be talking about the ui how to use the ui all the widgets how to combine it into a beautiful user interface uh best practices and stuff like that so this video is gonna be divided into two parts in the first part we're gonna look at the ui i'm gonna talk about some of the best practices some of the features some of the widgets some of the functionality so that you can kind of better understand how everything works and then in the second part we are going to try to mimic the ui of a very very popular app and see if we can come very very close to what's existing right now now before we begin if you're a fan of no code if you want to learn how to build all kinds of apps help people and make money without learning how to code without writing a single line of code and make sure you smash the like button on this video right now subscribe to the channel if you haven't yet already and make sure you leave a comment just to let me know what you think about this video i don't care you know if you like this video or or you don't like this video just let me know in the comments below what your opinion is that really really helps out the channel and it really helps the to get this video out to as many people as possible now having said that let's begin and so here we are in flutter flow so what i'm going to do is i'm going to create a new project here and i'm just gonna call it a ui test app okay we're gonna say create new we're gonna say next step start building and so here we are inside of flutter flow and this is the ui stuff so what typically is gonna happen you're gonna be looking at these three things here you have your pages you have your widgets here but this includes uh this includes this thing right here components and this includes ui elements as well which which i'm going to get to in a second as well and we also have the widgets free which is very very useful for a couple of very important reasons now the first thing that you want to understand is that we have these most frequently used elements right so these are the elements that you know you're going to be using most of the time okay it's kind of self-explanatory we also have the layout elements these are very important we have the container row column and stack these three are going to be the main layout elements you're going to be using so what is a layout element a layout element help helps to layout to align the content typically these elements are all containers right so these first three and many other ones as well but i'm just referring to the first four actually container row column and stack they are all containers basically they contain other elements okay so we have that we have base elements right and these are your primitives uh you would call them just text image circle image icon button icon button and and you know it's very very important to kind of get familiarized with a lot of these elements because even before you're building the app you want to go in here and you want to see what's available okay and just to give you an example right if we go here we have you know buttons and stuff but we also have a toggle icon so a toggle icon is very useful if you want to favorite an item if you want to favorite something yeah typically you can use a button for that but a cycle i icon is much more intuitive okay so before i did know there was an existence of toggle icon now that i'm a little bit more experienced with it i understand the functionality so make sure you get started by kind of you know giving it a quick scan you don't have to memorize everything here right but it's important just to understand what's available so that next time you're building an app and you're like man i really wish they had this title icon or that had you know something i can just click not a button but something that i can you know toggle on and off favorite unfavorite you know add to uh card or remove from card you know something like that that's what it's for so you want to kind of do that right uh the next thing you want to take a look is this tab right here these are templates and these are amazing right here we have a comment with uh um with replies here as well so like you can drag and drop this whole thing here and you're gonna have like like a whole thing here right you don't have to this is all built obviously from uh you know primitives right so for instance this is text you can click on it you can go to this uh this wizards tree and you can see exactly what's happening now a lot of times you can just drag and drop and you can have this thing available okay sometimes you have to build it on your own but regardless you you want to kind of take a look and see what's out there we have social sign-ins you can just drag it here drag and drop it here and you have these icons here right you can add your own you can just go to our widget stream you can say container right click and duplicate and you're gonna have another one right it's it makes it so so easy very very easy right so you can go back here and you can take a look and there's a lot of interesting things right do not underestimate this right we have a checkout screen here right you know it's going to take a long time to kind of do it we have a form uh this form has you know various fields um etc we have a credit card form this is this is a specific kind of um widget and look at this it's beautiful it has the right fonts it looks really really nice so make sure you kind of take a look you're going here and you kind of get a better idea because what's the point of reinventing the wheel if you can use some of these widgets some of these templates here ready there's no need to go out and to build it on your own right i highly recommend it look at this they have this travel card which is awesome right you can use that uh if you're building something like um trip advisor or you know airbnb or some kind of a travel side you also have uh so if you're building something like airbnb you have this thing right here you can just search find your dream space this could be airbnb or you know another similar service so there's a lot of really nice uh templates so do not underestimate them but definitely spend some time here just to get familiarized with them okay now before we go and actually show you how to build an app a very very popular app how to kind of mimic it using flutter flow i want to briefly talk about the little widgets here right so i talked about the layout elements how that works so typically what you want to do is you can have a container here and then inside that container this is the container you can have you know an element or you can have a row in here right you can have a roll and that row can have various fields and then you can have another row or you can start with columns right so for instance i can have a column like this so i can have a column here and then that column can have rows right i can put another row and this thing is uh is a row inside the column and if you're confused kind of the setup you can go to this wizards tree here and you can see what exactly is happening and you can actually delete so you have a column here with a container with a row but i also have another column i can just select it press delete now it's gone and i can understand i can also drag and drop it so now this column here is kind of it takes up the whole screen but it has a row and it has a container so the row is empty and has a container there as well so i can delete the row if i want and that's going to leave me with a column and a container another thing that's very very useful and i do this all the time is let's say i have a column here and i want to put a row in there instead of basically you know finding a row and dragging it into the uh the column i can just click this thing here search for the row click it and i have a row here i can also put it higher if i want i can delete the container but it makes this hierarchy a lot a lot easier and once i have the row next thing i want to do maybe a text field okay now i have a text field so i have a row here i can highlight i can duplicate and i'm going to have two rows inside that column which is kind of what you want right typically you're going to have columns and inside the columns you're going to have rows and inside rows you're going to have these primitives or you might have something called the stack or you might have something called the container it really depends how you're doing all right so now that we talked about kind of the basics how to you know how it works how to you know the best practices how to navigate these uh these settings here let's go in and let's try to mimic a ui of a popular app and so the app that i chose uh for this specific tutorial is we're gonna be using airbnb everyone has heard of airbnb it's a very very popular kind of apartment booking place hotel booking site etc etc and if i go to airbnb.com and actually view it in a mobile uh mobile uh friendly format this is kind of what you're seeing here so i don't need to actually pull up my phone and take a look and and what we want to do is we want to try to mimic this ui and so here we have kind of your search search screen here search bar here and here we have different settings right design arctic whatever shared homes etc etc so these are essentially like different tabs and then on each of these pages we have the actual listings okay so let's see how far we can get uh trying to mimic this uh in flutter flow okay so i'm gonna go back and i'm gonna delete everything that i have here okay so i have this header here actually don't even need i don't even need the app bar okay so i have this empty page and the first thing i want to do is i want to create this search search bar here now there's a much faster way of doing it is you can go to the ui builder you can go here and you can drag and drop this thing right here okay this thing right here this thing is awesome right it has everything that you want so you can delete all this just have this okay so this is what i recommend obviously in this video we're going to be doing it for scratch for educational purposes but if you're doing this for real i would highly recommend just dragging this then going to a widget tree and deleting the stuff that you don't need or simply highlighting and just deleting it you can just leave you know just leave the search bar here if you want so i'm gonna undo this and we're gonna do it from scratch okay so we're gonna go back here uh we're gonna go to our component screen and what we wanna do is we wanna have a container first right it's kind of a container it's going to contain so this thing right here all of this stuff inside of something and here it's going to be a container right so we have this container here now the first thing that you want to do is you want to make it kind of on the whole screen right you want it width to be covering the entire width of this uh screen that you have here so in order to do that we're going to come in here and now we have the whole thing here uh next you kind of want to start adding stuff so i like to go to my widgets tree and i can press this button here and i can go to text okay i'm gonna hit text and now actually not text so i'm gonna come here and i'm gonna scroll down and what i want is a form element i want a text field okay so now we have a text field right here okay so if we scroll down we have this text field selected we can go in here and we can type you know whatever you want hey this is a label right here just to kind of just so that you guys understand this is going to be a hint right here and then we have initial value here so i can say initial value okay the next thing you want to do is you want to come in here you want to select the text field and you want to have kind of a leading a leading uh icon here okay so if you come in here you see that it has this magnifying glass so that's kind of what you want and what what you want to select is this leading icon here and you want to search for search okay something like this there's a lot of options and so maybe something like this search sharp okay uh the next thing you want to do is you want this a whole container you don't want it to be taking up the entire width you want some padding so what i'm going to do is i'm going to do a padding of 10 maybe 15 maybe something like this and now you can kind of see it you can kind of see it standing out okay now let's go back here what do we have we have kind of a shadow kind of a drop shadow so that's what we want to do here we want to scroll down and you want to select the shadow right here okay so we're going to go we're going to go in here maybe something like this you can do a blur look at that now it's starting to kind of come together there's so many things that you can do go back to our container scroll down you can do a spread that's a little bit too much maybe one okay something like this you can also do offsets you can do a gradient uh there's a lot of things that you can do but right now it's kind of similar to kind of what we want now it's a little bit you know it's a little too big right now right because if you go to this one it's it's fairly um it's fairly thin so we want to decrease the height a little bit right so we're going to go back to this container and we want to make sure that the height is a little bit smaller so something like this maybe yeah that looks about right right like half it it was 100 now it's 50. that looks a little bit better and we also have some color right it has a we have the shadow color but we also have the fill color we can kind of unset that if we want but we can kind of leave it as well so for instance i can choose white and now it's something like this okay so now it's kind of coming together let's take a look we also have another icon here these are kind of our filters here so what we want to do is we want to go to a text field and we want to scroll down and we want a trailing icon and so uh i don't even know if we can find that so let's say filter yeah so this is good enough i think something like this is going to work and now we have this kind of filter icon there in the back okay so kind of what we have here now as you can see this is where to and then you have on the bottom you have some other text there and that's kind of what we want to do so if you go back here to this text field and you want to scroll down and so here it says initial value right so this initial value is going to be anywhere any week anywhere um any week any time right is that what it says at any week add yes so a bunch of text here anywhere any week okay so something like this now you can change how it looks right now it's semi-bold we can make it normal we could make it something like this this is the theme we're using now you can edit the themes you can say this could be body text 2 it could be body text 1 you can kind of edit this theme it's not an issue at all you can also change the font here and so that's kind of what we have now it says here label and we need we needed to say where to okay so something like this now remember you can change the font open size you can make it so and so whatever font you want this is kind of what you want uh what you want to do here now you can also change the label style so it could be something different remember this is label right here label is where to so i can select this option here and i can say well i want label to be something else right so for instance we have label style i can open that up and i can say well i want it to be bigger okay so i want it to be bigger and this one i want it to be smaller which is kind of what we have here this one is bigger and this one is smaller and if we scroll down we want it to be this initial value we don't want it to be bold so i'm going to go in here i'm going to say normal right because it's not bold i can also increase the line height something like this maybe just to give it some space over here you can kind of play with that and then you can select max lines and all that and so right now we kind of have the start of it all right and you can create actions on that you can you can make it do all kinds of interesting things the next thing that we need to do is we need this part here and this is kind of this tab setup right we have these tabs with different names different labels but we also have this this content here uh that appears once we click on the particular uh kind of tab and these are listings i suppose right we have arctic we have shared homes different categories essentially and the way we want to do it here in flutter flow is you want to go back to your um frequently used elements and you want to select tabs you want to type tabs and you have a tab bar here so we can drag this tab bar here and what we what it's telling us is how do we want to do it right what we want to do actually a much better way of doing it is you want to add a row here first so what we're gonna do here is we have a home page i'm just gonna add a row all right so now i have a row here this is gonna be in another column right i essentially have a column here and this is gonna be another row and in this row we are gonna do tabs and so now we have the tab bar here okay so we have example one example two example three tab view one and if we go back to our hierarchy this is the tab bar here okay so this is the tab bar that we have just created now obviously we wanted to look similar to what we have here we want this to be these little kind of icons with design uh like design arctic we want it to be kind of a little icon with some text below it and so what we want to do it is that you see these tab bars here right and so what you want to do is you want to replace this tab this is actually the content this is a placeholder for the content right now it's just it just has the text widget but we're going to be replacing it with something else here this tab we want it to be something different so there's a couple of ways of doing it but a really easy way of doing it is you can select an icon here and for instance uh let's say house you can select the house and now you have a house with the text under it right kind of what we have here house design and i can say this is design okay and you can you can change how it looks right you can change icon size you can make it bigger right something like this design same thing here we're going to say icon arctic snow snow cold so i'm just gonna pick pick random icons here and we're gonna say snow uh arctic and then the third one so i'm not gonna do all of these i just wanna do you know like three of them just to give you an idea and the third one is camping let's say we say camping icon is gonna be do we have camping okay so something like this i guess you guys get you guys get the idea so this is 40 this is also 40 actually it's pretty big 30 30 okay and you can change the colors and you can do a lot of things you can also change the font you can make it custom if you want okay this is something called the tab but you can make it custom you can just create a container and do everything manually if you want that's also an option but just to get things very very quickly uh that is kind of what we have here is that we're using the built-in functionality the next thing is we need this little card here right and this is essentially a card and the reason i say this is a card is because we have an image here we have this heart which is essentially a toggle you know something that i talked about in the beginning of the video and then we have some text here so this is you know an image we have another row uh we have another row with you know bunch of rows here we kind of have one column with an image this is row number one row row this could be another row another row another row essentially this is row this is row this is row this is row that's kind of what we have and that's kind of what you want to do obviously this is going to be a list a list view here so if you go in here you're going to be using it as a list view or a list tile if you want so you can just drag it in here and now you have a list view here but we're going to be coding it from scratch and so what you want to do is you want to add a stack and what this will allow us to do is it will allow us to create an image and then stack something on top of it so let me show you what i mean so if i come in here i can just search for a stack then inside the stack i can add an image okay now i have a stack i have an image and i'm also going to add that toggle button but the first thing i need to do is i need to make sure this image is taking up this whole area here okay and to do that i need to make sure it's expanding okay so i'm gonna go in here i'm gonna expand it expand the stack and then expand the image as well okay so now the image is taking up the whole um the whole area the whole container there next thing i want to do is i want to go to the stack and i also want to add that toggle button okay this is the toggle icon and here's the toggle icon so on the website this is the inactive state but if i click on it and i log in it's going to be red so what i want to do is i want to do the same thing but first i need to make sure it's positioned correctly and the way you want to do it is you want to drag this thing here you want to do that and then you want to drag this thing here and that's going to allow it to to be positioned in this corner right here the next thing if you scroll down we have on icon and we have off icon so on icon is going to be a heart we're going to search for a heart it's kind of a heart like that which is like a filled in heart and we're going to say the color is going to be red okay and then off icon is also going to be a heart actually not this heart it's going to be a empty heart so like this and the color is also going to be red i'm just going to make i don't know why it's black here i'm going to make it red okay so that's kind of what we're seeing if you click on it in the logic uh it's going to we're going to make sure it's going to be uh it's going to be on icon here but we're not going to be doing any logic in this tutorial this is only ui stuff okay so that is kind of what we have we have a column here we have one column here so if we're going here we have this one column and we have a stack that includes these two things now if we scroll down we scroll on this it has a bunch of other things so these are just a bunch of rows here with information so what we want to do is we want to add more rows so we have a column i'm going to add a row to that column i'm going to say row and now we have a row here and now we can kind of fill it in so i'm going to say text text and it says hello world and this is going to be essentially it's going to be a row with two columns so this is one row and then the first column second column that's kind of what we want to do so we have a row and i'm going to say column okay so now this row in fact i'm gonna delete that it has two columns so i'm gonna right click i'm gonna say duplicate and we have two columns now i can go on the row and i wanna align it i can click on these things this main axis alignment i can center it i can align it uh in between i can do all kinds of interesting things look at that really really great so let's say i want it to be kind of like this space between so now i can go to this column i can add a row i can add a row and then i can add text okay and then i can do the same thing um row then i can say text so for instance this thing is going to be the name of the whatever uh gordon revere it's going to be essentially a city so i'm just going to simplify it i'm going to say rome italy okay and then this thing right here what does it say new you know obviously this is going to be logic new you know something like this okay and there you have it and like i said you can kind of change the spacing if you want maybe you want it to be i don't know something like that but this is nice also i want to add some padding so i'm just going to say this is 10 padding here 10 padding here so it's not all the way uh next to the uh next to the um to the margins right so there's a little bit of padding in fact all of this has padding right so we want to have padding for everything right so i'm going to go back here i'm going to go to this column 2 and i want to actually make sure that this tab bar page uh this column here has padding as well so we're going to say 10 perfect 10 okay and then i don't need individual padding for this row we're gonna remove the padding here okay so now this padding this padding is done on this on this column level you see i i you know highlight it and the whole thing is highlighted and then we have this row with two columns and then i can add another row so i'm going to just duplicate it i'm going to duplicate it here and then we have another row i'm going to delete these columns because i just want a row i'm going to duplicate it duplicate it and then i can essentially add the content that i have so yeah it's just one column designed by may 30th june 6th etc etc so i'm going to come in here i'm going to add text and an easier way is just create one row and then just duplicate it a couple of times so duplicate it duplicate it so we're going to have three more rows is that right yeah three more rows this is gonna say this is gonna say design by james doe and this is gonna say you know whatever may 30th to june 15 and this is going to say uh 500 i don't know whatever whatever that number is and obviously you can kind of change the font here it's using body text one you can make it normal which is kind of what it is normal normal there you go and you can keep adding more things right and so maybe you want to make this a little bit bigger text and you want let's say maybe 16 and you can change the font so that's kind of what we have here we have this toggle icon we have this uh image of the thing and the image it looks like kind of a square oh it also has rounded corners so that's kind of what we want to do we want to go to this image and we want to make sure it has a border radius okay so we're going to lock that we're going to say 10 20 let's say 50. okay that looks a little bit better i think that's a little too much so let's scroll down let's do 30. okay how about this okay that looks a little bit better right you might need to align this thing and it's also uh the width is also um you know you could make it 50 50 50 you can do it in pixels so that you could do a 100 or actually you can do it whatever 500 and this could be also 500. so now it's kind of like a more or less kind of like a square right 500 500 pixels or you can do it 450 uh maybe 400 okay or something or even more or less okay that looks a little bit better right something like this and you can obviously change this thing here as well all right there you have it and so now it's a little bit tidier now obviously this is going to be a component widget that's going to be displayed using something like a list view okay that's kind of how it's going to look like and you're going to do this for all the tabs so if you click on here you have the savvy you can just simply obviously these are going to be different items different categories right so you can just come in here and you can see so for instance we're going here we have this tab bar here right so if we open it up we have a column you can just copy that and you can copy and paste it all for the other ones okay now we're kind of done with the ui here another thing that you may want to do is have this kind of bottom um a bunch of options here bottom navigation items here so like explore wishlist and login and that's also very very easy to do we're going to go back to our wishes tree we have the tab bar we have a column here right and so what i'm going to do is i'm going to add another row right and so as you can see i have a column container and tab bar i'm going to click here and i'm going to say row and that adds a row right here and now i can go ahead and i can build this thing out okay so i can have a container that has an icon explorer etc etc so you can have a container with two rows okay so for instance something like this you have a row and i can add a container and that container might have two rows so something like this a row and another row we're gonna duplicate it and what we have now is a container with two rows essentially and what you can do essentially is you can duplicate that and now you have another one you can duplicate that and now you have another one so you can go back to this row and then you can align it how you want so something like this where it's evenly spaced and then you can go inside the row and you can add your items so we have an image and we have text so i'm gonna go in here i'm gonna say i need an icon icon button i'm going to go in here and this is going to be an icon and i also need text so i need text below it and then for the next row i'm going to add text and now we kind of have it aligned perfectly and obviously you can kind of align it how you want you can do this you can center it here look at this you can center it and it's all very very flexible in fact a better way of doing it is you want to kind of delete this you want to delete these containers and you want to just duplicate it because they're inside the row it's not going to be any issues we're going to say duplicate and duplicate and you can duplicate as many as you want it's going to align it perfectly according to the rules that you have here so as you can see i'm using this space evenly alignment method and you can do it something like this you can do it this is very very easy and now you kind of want to fix your text right so we have uh hello world and we have what do we have explore wish list and login so explo um this should be explore this should be wish list and this should be login and obviously you want to change the icon which is very simple um explore maybe a a compass and then this list what are they what are they using a heart okay that's very original a heart and then this login may be a person perfect okay there you go and you can change the color and so as you can see they're using kind of a grayish color and then when something is selected it changes color so we can do the same thing here we can come in here and we can you know pick something like this so you see it's a different color now we can do the same thing here and you obviously want to want it to be all the same color but i'm just going very quickly here just to show you how it works and you can change the color of the text as well and now we are kind of done there's still a bunch of other things that are left to do you want to add more functionality you want to have a map view etc etc but the gist of this that the main thing is pretty much done and now it's a question of kind of doing the logic uh you know connecting it to your database uh having events that are fired so if i click on it i can go in here and i can configure this action flow editor and all of that is something i'm gonna be covering in a future video in this video i only talked about just designing just the ui stuff so if you enjoyed this video make sure you give this video a fat like that really really helps the channel a lot and it really motivates me to create more videos and teach you some more interesting things also make sure to subscribe to the channel because on this channel we talk about ways of writing amazing apps without a single line of code and leave a comment just let me know what you think about this method if you have any questions concerns something you did not understand and i'll do my best to help you out thank you so much for watching this video and i'll talk to you guys in the next

Channel: James NoCode

Views: 21,451

Keywords: How To Build A Powerful UI with flutterflow, How To Build A Powerful UI

Id: 5iL3-3tTQ00

Length: 34min 17sec (2057 seconds)

Published: Sat May 21 2022