Intro to layouts in FlutterFlow

this video i want to give you a basic introduction to layout in flutter flow so let's say you've got a mock-up of an app and i've got one right here it's like a travel app right and so i'm going to come into flutterflow and just lay out the basic architecture of it so this is probably a section up here you know that includes this text right here and this card and this icon and then down here right so i come into flutter flow and if you come into your widgets here and we go down to our layout elements we've got all these layout things and we think okay well maybe we want this to be just like one section right here so what do we have okay maybe a container like that sounds right so i just drag and drop that in that looks good let's uh you know increase the width i can do this infinity right here all the way across and of course once i dump stuff in here it's gonna fill out the height you know so okay that looks good and then down here i'm gonna have like another section so why don't i just like dump another container in here so i dump another container in here and i get this sort of warning thing right here and this says you're about to replace the widget inside of your home page that's our home page that's just our main sort of body scaffold that's just what flutter calls it behind the scenes which already contains a container so what this is assuming is that in our home page we can only have one widget now other widgets can contain many other widgets inside them but the home page itself can only contain one so we get this nice sort of helper pop up here and it says you know if you don't want to replace it you can add any of these widgets right here so we can add a column or a stack or we can replace it so we were trying to add in another container so if we just said hey let's add a column then we get this nice thing we've got a container here that was our original container let's look at our widget tree so we we tried to have two containers right but we couldn't because our homepage can only have one if we collapse this we can like see this you know we've only got one widget one child here but inside here we've got our two containers so now we can you know do what we wanted to do so that's helpful okay so that's the first thing about layout that your homepage can only have one child now that's almost true the only other exception is the app bar so if we go into our widgets and we look for app bar we can see that we can drag this in and that's no problem because our app bar is kind of this like universal thing that kind of stands outside not really but kind of outside of our main sort of like layout flow here but that's the only other thing so that's the first thing about layout now we've got all of these other layout elements right here so let's go in and get a basic overview of each one of these layout elements see what they kind of do and when we would use them so these are the eight main layout widgets in flutter flow so the first one is our container and the container is kind of unique because the special thing that it can do is it can provide styling let me show you so here let's delete everything we've had up till now so we're just back to our bare home page and let's dump a container in and um if we scroll down on the side here we see all of our options and we can see you know we can do things like add padding we can push it off from the side of our app but then when we get down here we can see all of our styling options so we can add a shadow to our container so you know what let's just push this let's make this full width and full height but let's push it off from the side you know like 25 let's do 25 there we go and let's get a little color in here we'll just grab one from our palette let's just get a normal shadow color of black and maybe a blur of 20 and we can see we've got that blur right there we can add in a border radius to round off our corners right there so if we unclick it we can see we got some rounded corners and we get all of these great options for styling gradients background images right so that's the unique thing about containers you get styling here in this travel app we've got a container right here and so you can see this one implementation of it so we're using the styling options of we've got a background image we've got some border radius some rounded corners and so this is the kind of thing that you can build with a container now the one thing to keep in mind about a container is that a container can only have one child one child widget so you're always going to be using a container with another widget so typically you'll have a container and then inside your container you're going to have another widget that can accept multiple children right because if you think you just think about apps that you use all the time you're just like scrolling on the screen and you've got a bunch of things on the screen a bunch of elements so a next obvious option would be your row or your column and these are just kind of what they sound like right you're just stacking stuff horizontally or vertically and of course you can scroll vertically but you can also scroll horizontally so let me show you some of these here in our travel app you can see that this whole thing is a column that's our main child widget of our home page right here and this is a pretty common scenario right because in most apps you're just going to be kind of scrolling down and you're going to have a bunch of different elements so here we've got our column and then the children are a row a container some text another container the one thing to keep in mind about rows and columns is that they're designed for just having a few children so that would be like 10 or 20 around there and if you need more children then you're going to want to go to a grid view or a list view that's what these are designed for they're designed to be a collection of a bunch of children right 50 100 1 000 many many things here's a great example of a list view so here we've got an order history page and you can imagine like in you know your amazon app you've just got tons and tons of orders and we've got a list view here we've got one list view here and one list view here and of course you can imagine you can sort of scroll on forever next up we've got stack and a stack widget is where you want to stack children on top of one another now you're not going to typically use this for like a main layout widget but it does have very important special use cases let me show you so here we've got a profile and you can see over here we've got a column and then inside of column we've got this stack view right here which is just this sort of like hero portfolio image and so inside the stack we've got the image itself that background image we've got this row of these buttons you know the share in the back button then we've got this blur this uh sort of card blur thing right here and this is a great use of stack view because these are all stacked on top of one another right we've got the image in back and then on top we've got navigation and the information next we've got page view and page view is where you have a full page view of an image or a background a text or something and it's swipeable and you can swipe vertical or you can swipe horizontal typically you'll use these for like onboarding or teaching your user how to do something so let me show you a good example of this so here in our fin wallet template we've got a great onboarding example of a page view so if we come over here we can see our page view and under our page view we've got each different page that we're going to see and if we preview this we can see that this is a horizontal scroll so when i scroll over you can see the different screens that's going to bring me through the onboarding for this app and lastly we have a wrap widget and a wrap widget is designed for when you have things like buttons that don't have equal width and you want them to wrap onto the next line so this is different from a grid viewer list view when the children are going to be fixed with but for wraps they can be different widths and typically these will be for things like you know let's say you've got like buttons of different types of food right and so the text is going to be a different width and so you want those different ones to wrap onto the next line all right that's the eight main layout widgets so but they're all not created equal because you're gonna use some of these more than others that is to say these main five over here on the left or container row column list view grid view are gonna be your main architectural layout widgets that is the the sort of main backbone of the structure of your app you're gonna be using these ones time and time again these other three over here are page view wrap and stack are helpful but they're sort of like more specialized use cases and not sort of used for that sort of like main spine of your app so here's some helpful questions to ask when you're looking at your mock-up and you're saying okay which of these should i use the first question is do you need styling now if you do need styling then of course you're going to use your container because that's sort of like the special feature of container provides styling if you don't the next question you want to ask is do you need a lot of children because if you do then you're going to go for your list view or your grid for you if you don't then you move to your column n row okay so that's a general introduction of layout in flutter flow in the next videos we're gonna go in depth on each one of these layout widgets see how to use them and see their best use cases

Channel: FlutterFlow

Views: 38,374

Keywords:

Id: vQ4dAa8swzU

Length: 10min 35sec (635 seconds)

Published: Thu May 05 2022