Learn how to align, position, and build layouts in Flutter with comparisons to CSS flexbox 💪📦 - they have more in common than you might think https://fireship.io/lessons/flutter-widget-positioning-guide/

- Get the T-Shirt, use promo FLTTR https://teespring.com/stores/fireshipio-swag
- Flutter Layouts https://flutter.io/docs/development/ui/layout
- Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
2024-02-04T07:00:41.418Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
38c354bc-2412-4280-a183-bdc86044534b
9aca61f18289f4d6a76351a4d965f9910942b6115172e5668514a6266a7551ab
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
If you want to be productive with Flutter, one of the first things you should master is layouts.
In today's video, I'll show you the core principles for aligning and positioning widgets.
And if you're a web developer, I'll be making direct comparisons to CSS because the 2 share a lot more similarities than you might realize.
If you're new here, like and subscribe and you can grab the full source code from Fireship.
Io.
And I'll be giving away another t shirt with this video.
All you have to do is leave a comment below letting me know what you want to see next.
The first thing we'll look at is individual widget positioning, which is the equivalent to a div in HTML with a CSS class applied to it.
From there, we'll look at how to layout widgets and columns and rows, which works in the same way that Flexbox does in CSS.
And lastly, we'll look at how to stack widgets on top of each other, which is similar to absolute or fixed positioning in CSS.
Let's go ahead and jump into the code, and you'll see that I'm starting out here with a Scaffold, which basically gives us a blank palette to work with.
Then as the body, I'm defining a container that has a red border.
That'll make it easy to visualize how child elements fit within their Parent container.
Then I've created a widget called square, which just has a fixed width and height, and we can pass in an argument to adjust the size or the color of the square.
This just gives us something to work with as we start aligning multiple items.
And quick side note, you'll notice I'm using Font Awesome icons, highly recommended if you get bored with the default material icons.
And then lastly, we have a widget called demo, which we'll get to when we start doing things with Flexbox and absolute positioning.
For now, let's go back up to the root container that we defined in the body.
You'll see that it's sitting in the top left corner of the view.
A container is a lot like a span or a div in HTML, in the sense that it's just an empty piece of UI that you can apply styles and positioning 2.
Let's first add some spacing on the outside of this element by setting a margin with edge insets to all sides of 24.
And we can increase that a bit to make it a little more clear, but, basically, it's like putting an invisible border around the entire container.
And I'll put the equivalent CSS in the top right corner here.
You can also set padding which will put that invisible spacing on the inside of the element.
So you'll notice that the border gets pushed out and now the green background on the container element is visible.
You can apply spacing to individual sides by using only instead of all.
Another thing you can set on a widget is its alignment.
If we set the alignment to center, for example, it will expand the widget out as far as it can go until something tells it to stop, then it will place the child element directly in the center.
The alignment behavior really depends on the parent container.
In our case, it's going to expand out until it hits the edge of the screen.
There's a couple of other things you can do with containers as well.
For example, you can explicitly set the width and the height.
That's exactly what I've done to create this square box in the middle.
And you can also apply a transform to a container.
Could be a whole video on its own, but you can do the same things you can do in CSS, like rotate, skew, and scale.
I'd also like to point out that Flutter has a bunch of alternative widgets instead of a container such as padding and align.
And they're useful because a lot of times you won't need all the functionality of a container.
If you only need to apply padding, you can just use Padding widget, and that will make your code more focused and readable.
Now let's move on to what's probably the most important part of this video, flexible positioning.
It allows you to align items and columns and rows, which takes care of the majority of the layouts that you'll see on most mobile apps.
For example, if we wanted to rebuild this layout on Duolingo, we would start by defining a column.
Then inside this column we can stack multiple widgets.
In this case we'd start with a text widget and then we could add a row and then another row for the buttons at the bottom.
And if you look closely at the middle row, you'll notice we have another column in there that stacks some additional text widgets on top of each other.
So basically, we can nest columns and rows to build out complex UIs, and we can wrap any of these in their own container to fine tune their individual alignment and positioning.
Let's look at some examples.
The first thing we'll do is define a row and it will take an argument of children which is an array of widgets.
In the case of a row, the widgets will flow from left to right horizontally.
You'll notice the row takes up as much horizontal space as it possibly can.
This is known as the main axis.
So in the case of a row, the main axis will be the x axis.
And a column is actually identical to a row.
The only difference is the axis is flipped, so the main axis becomes the y axis.
This is identical to how things work with CSS Flexbox.
So if you're already comfortable with Flexbox, then you're already going to be comfortable with Flutter positioning just with a few name changes.
So if we change our row to a column, you can see that now the items Flow from top to bottom and the extra space is along the y axis.
There's really only a couple of options that you need to be familiar with.
The first one is main axis size.
By default, it will take up the maximum amount of space.
But if you set this to min, then you can see that it only goes to the end of the child elements.
Most of the actual alignment will be adjusted with the main axis alignment or the cross axis alignment.
The main axis is similar to justify content in CSS, And the cross axis alignment is similar to align items.
For example, if we use main axis alignment space between, It will push the children towards the edges and then try to maximize the space in between them.
There's a lot of other options like space evenly, which will just maximize the space evenly throughout all the elements.
We can always flip this to a row and you can see the only thing that changes is the axis of alignment.
On the cross axis, the elements will be aligned in the middle by default.
It helps if we have squares of different sizes.
So you can see here that they're all aligned directly in the center, but what if we want these to be aligned at the start of the container?
We can make that happen by setting the cross axis alignment to the start of the container.
Or if we want to push them to the opposite side, we can set that to end.
And one other cool thing you can do with the cross axis is set it to stretch and that will force the elements to expand across the entire available space.
And one other thing I wanna point out is that columns and rows are just convenience widgets for the flex widget.
If you use a flex widget, you can manually set the direction to either axis horizontal or axis vertical.
So at this point, we've been controlling the flex behavior of the children via the parent row or column.
But a lot of times, you'll need the actual child to define its flex behavior.
To demonstrate this, I'm going to give our boxes different colors.
And one of the most common use cases is when you have a set of widgets and you want one of those widgets to Expand to the available space and have the other widgets just be a fixed size.
So, for example, we might want our last widget to fill up this available space while keeping the other ones the same size.
We can easily do this by wrapping our widget in the expanded widget and this will tell it to flex to the available space.
This is similar to the flex grow property in CSS.
And this is actually a ratio that will be calculated based on the other sibling elements next to it.
Currently, this is the only expanded widget, so it's just going to fill up all of the available space.
But let's go ahead and wrap the middle square in the expanded widget as well.
For now, we'll also set its flex property to 1.
So since they're both set to 1, they'll evenly share the available space.
But the thing to remember here is that the flex property is a ratio.
So if we set flex 10 for the middle element and flex 1 for the last element, the middle element will take up 10 times more Space than the last one.
In other words, we could fit 10 pink widgets inside of the blue widget.
So Flexbox is awesome when working with 2 dimensional layouts, But sometimes you want things to overlap as if there was a third dimension to work with.
For that, we're going to look at the Flutter stack, and a common use case might be something like a tooltip that gets positioned relative to a button but on top of the main view.
You can compare stacks in Flutter roughly to absolute or fixed positioning in CSS.
Let's go ahead and grab our existing column and convert it to a stack.
You'll notice that it only displays one square and that's the red square which is the last one in the array.
The other squares didn't disappear, they're just underneath the red square.
The last element in the array gets the highest priority when being displayed.
If we make the blue square last, then it's the one that gets displayed when we reload.
Now that we have our elements in a stack, we need to align or position them.
One way to do that is with the align widget, which allows us to place elements relative to the parent container in a perfect position.
So it makes it really easy to center things.
And if you don't wanna use the align widget, you can just use a container and set the alignment there.
When When thinking about alignment, the middle is always going to be the 0 zero coordinate and you can control the alignment directly if the built in static methods aren't enough.
For example, if we set it to negative one negative one it puts the blue square in the top left corner and if we were to set it to 0 it would be directly in the middle.
But there's generally a better way to position things when you're working within a stack and that's with the positioned widget.
This allows you to define specific values relative to the parent Container based on top, bottom, left, right.
And one key difference that you'll notice is that position won't push the container element to the furthest bounds that it's allowed to go.
So in order for position to work, you need to have a container that already has some free space available.
So I'm wrapping the stack in a container and then I'm manually setting the height and width to be the size of the actual device height and width.
From there, I'll go down to my position widgets and set the top and left properties.
And now we can see the parts of the other squares that were hidden before.
And now just like absolute position in CSS, we can move these boxes around wherever we want.
So using a combination of containers, columns, rows, and stacks will take care of the vast majority of your layout needs in Flutter.
Let's go ahead and bring everything together by running through a full example of a card you might build from scratch.
There's already a material card built into Flutter, so this is kind of redundant, but it's a good example anyway.
So we start with a container.
And in that container, we'll give it some margin, padding, and we'll also give it a border and you could also add a box shadow here as well.
So, basically, we're just adding styles to the box that will hold our column.
Then in the column itself, we'll have the cross axis alignment set to stretch so it expands throughout the entire card.
And main axis min will ensure that the column only expands to the content and not to the end of the viewport.
Now if we add children to this container, they'll be stretched out across the horizontal axis that's how we get this purple rectangle here.
And I didn't really talk about text in this video, but they have their own specific text styles that are also very similar to CSS.
Now because we're inside of a column, these text widgets will be stacked on top of each other.
The next thing we'll do is create another container and the child of this container will be a row.
We want to display 3 buttons horizontally and we want the first button to be at the very left and the last button to be at the very right.
So for that we can use main axis alignment space between.
Then we'll just go ahead and drop a few of Flutter's built in buttons into this array, and they'll be perfectly spaced along the horizontal axis.
So as you can see, once you're comfortable with Box, it becomes very easy to prototype out UIs, and most of your layouts should be responsive and be able to adapt to different viewport sizes.
In future videos, I'd like to clone popular mobile app UIs like maybe Lyft or Instagram or maybe even Snapchat's redesign that everybody hates.
So if you have any ideas, let me know in the comments.
I'm gonna go ahead and wrap things up there.
Look forward to more Flutter videos.
Thanks for watching, and I will talk to you soon.

Speaker 0: If you want to be productive with Flutter, one of the first things you should master is layouts. In today's video, I'll show you the core principles for aligning and positioning widgets. And if you're a web developer, I'll be making direct comparisons to CSS because the 2 share a lot more similarities than you might realize. If you're new here, like and subscribe and you can grab the full source code from Fireship. Io.

And I'll be giving away another t shirt with this video. All you have to do is leave a comment below letting me know what you want to see next. The first thing we'll look at is individual widget positioning, which is the equivalent to a div in HTML with a CSS class applied to it. From there, we'll look at how to layout widgets and columns and rows, which works in the same way that Flexbox does in CSS. And lastly, we'll look at how to stack widgets on top of each other, which is similar to absolute or fixed positioning in CSS.

Let's go ahead and jump into the code, and you'll see that I'm starting out here with a Scaffold, which basically gives us a blank palette to work with. Then as the body, I'm defining a container that has a red border. That'll make it easy to visualize how child elements fit within their Parent container. Then I've created a widget called square, which just has a fixed width and height, and we can pass in an argument to adjust the size or the color of the square. This just gives us something to work with as we start aligning multiple items.

And quick side note, you'll notice I'm using Font Awesome icons, highly recommended if you get bored with the default material icons. And then lastly, we have a widget called demo, which we'll get to when we start doing things with Flexbox and absolute positioning. For now, let's go back up to the root container that we defined in the body. You'll see that it's sitting in the top left corner of the view. A container is a lot like a span or a div in HTML, in the sense that it's just an empty piece of UI that you can apply styles and positioning 2.

Let's first add some spacing on the outside of this element by setting a margin with edge insets to all sides of 24. And we can increase that a bit to make it a little more clear, but, basically, it's like putting an invisible border around the entire container. And I'll put the equivalent CSS in the top right corner here. You can also set padding which will put that invisible spacing on the inside of the element. So you'll notice that the border gets pushed out and now the green background on the container element is visible.

You can apply spacing to individual sides by using only instead of all. Another thing you can set on a widget is its alignment. If we set the alignment to center, for example, it will expand the widget out as far as it can go until something tells it to stop, then it will place the child element directly in the center. The alignment behavior really depends on the parent container. In our case, it's going to expand out until it hits the edge of the screen.

There's a couple of other things you can do with containers as well. For example, you can explicitly set the width and the height. That's exactly what I've done to create this square box in the middle. And you can also apply a transform to a container. Could be a whole video on its own, but you can do the same things you can do in CSS, like rotate, skew, and scale.

I'd also like to point out that Flutter has a bunch of alternative widgets instead of a container such as padding and align. And they're useful because a lot of times you won't need all the functionality of a container. If you only need to apply padding, you can just use Padding widget, and that will make your code more focused and readable. Now let's move on to what's probably the most important part of this video, flexible positioning. It allows you to align items and columns and rows, which takes care of the majority of the layouts that you'll see on most mobile apps.

For example, if we wanted to rebuild this layout on Duolingo, we would start by defining a column. Then inside this column we can stack multiple widgets. In this case we'd start with a text widget and then we could add a row and then another row for the buttons at the bottom. And if you look closely at the middle row, you'll notice we have another column in there that stacks some additional text widgets on top of each other. So basically, we can nest columns and rows to build out complex UIs, and we can wrap any of these in their own container to fine tune their individual alignment and positioning.

Let's look at some examples. The first thing we'll do is define a row and it will take an argument of children which is an array of widgets. In the case of a row, the widgets will flow from left to right horizontally. You'll notice the row takes up as much horizontal space as it possibly can. This is known as the main axis.

So in the case of a row, the main axis will be the x axis. And a column is actually identical to a row. The only difference is the axis is flipped, so the main axis becomes the y axis. This is identical to how things work with CSS Flexbox. So if you're already comfortable with Flexbox, then you're already going to be comfortable with Flutter positioning just with a few name changes.

So if we change our row to a column, you can see that now the items Flow from top to bottom and the extra space is along the y axis. There's really only a couple of options that you need to be familiar with. The first one is main axis size. By default, it will take up the maximum amount of space. But if you set this to min, then you can see that it only goes to the end of the child elements.

Most of the actual alignment will be adjusted with the main axis alignment or the cross axis alignment. The main axis is similar to justify content in CSS, And the cross axis alignment is similar to align items. For example, if we use main axis alignment space between, It will push the children towards the edges and then try to maximize the space in between them. There's a lot of other options like space evenly, which will just maximize the space evenly throughout all the elements. We can always flip this to a row and you can see the only thing that changes is the axis of alignment.

On the cross axis, the elements will be aligned in the middle by default. It helps if we have squares of different sizes. So you can see here that they're all aligned directly in the center, but what if we want these to be aligned at the start of the container? We can make that happen by setting the cross axis alignment to the start of the container. Or if we want to push them to the opposite side, we can set that to end.

And one other cool thing you can do with the cross axis is set it to stretch and that will force the elements to expand across the entire available space. And one other thing I wanna point out is that columns and rows are just convenience widgets for the flex widget. If you use a flex widget, you can manually set the direction to either axis horizontal or axis vertical. So at this point, we've been controlling the flex behavior of the children via the parent row or column. But a lot of times, you'll need the actual child to define its flex behavior.

To demonstrate this, I'm going to give our boxes different colors. And one of the most common use cases is when you have a set of widgets and you want one of those widgets to Expand to the available space and have the other widgets just be a fixed size. So, for example, we might want our last widget to fill up this available space while keeping the other ones the same size. We can easily do this by wrapping our widget in the expanded widget and this will tell it to flex to the available space. This is similar to the flex grow property in CSS.

And this is actually a ratio that will be calculated based on the other sibling elements next to it. Currently, this is the only expanded widget, so it's just going to fill up all of the available space. But let's go ahead and wrap the middle square in the expanded widget as well. For now, we'll also set its flex property to 1. So since they're both set to 1, they'll evenly share the available space.

But the thing to remember here is that the flex property is a ratio. So if we set flex 10 for the middle element and flex 1 for the last element, the middle element will take up 10 times more Space than the last one. In other words, we could fit 10 pink widgets inside of the blue widget. So Flexbox is awesome when working with 2 dimensional layouts, But sometimes you want things to overlap as if there was a third dimension to work with. For that, we're going to look at the Flutter stack, and a common use case might be something like a tooltip that gets positioned relative to a button but on top of the main view.

You can compare stacks in Flutter roughly to absolute or fixed positioning in CSS. Let's go ahead and grab our existing column and convert it to a stack. You'll notice that it only displays one square and that's the red square which is the last one in the array. The other squares didn't disappear, they're just underneath the red square. The last element in the array gets the highest priority when being displayed.

If we make the blue square last, then it's the one that gets displayed when we reload. Now that we have our elements in a stack, we need to align or position them. One way to do that is with the align widget, which allows us to place elements relative to the parent container in a perfect position. So it makes it really easy to center things. And if you don't wanna use the align widget, you can just use a container and set the alignment there.

When When thinking about alignment, the middle is always going to be the 0 zero coordinate and you can control the alignment directly if the built in static methods aren't enough. For example, if we set it to negative one negative one it puts the blue square in the top left corner and if we were to set it to 0 it would be directly in the middle. But there's generally a better way to position things when you're working within a stack and that's with the positioned widget. This allows you to define specific values relative to the parent Container based on top, bottom, left, right. And one key difference that you'll notice is that position won't push the container element to the furthest bounds that it's allowed to go.

So in order for position to work, you need to have a container that already has some free space available. So I'm wrapping the stack in a container and then I'm manually setting the height and width to be the size of the actual device height and width. From there, I'll go down to my position widgets and set the top and left properties. And now we can see the parts of the other squares that were hidden before. And now just like absolute position in CSS, we can move these boxes around wherever we want.

So using a combination of containers, columns, rows, and stacks will take care of the vast majority of your layout needs in Flutter. Let's go ahead and bring everything together by running through a full example of a card you might build from scratch. There's already a material card built into Flutter, so this is kind of redundant, but it's a good example anyway. So we start with a container. And in that container, we'll give it some margin, padding, and we'll also give it a border and you could also add a box shadow here as well.

So, basically, we're just adding styles to the box that will hold our column. Then in the column itself, we'll have the cross axis alignment set to stretch so it expands throughout the entire card. And main axis min will ensure that the column only expands to the content and not to the end of the viewport. Now if we add children to this container, they'll be stretched out across the horizontal axis that's how we get this purple rectangle here. And I didn't really talk about text in this video, but they have their own specific text styles that are also very similar to CSS.

Now because we're inside of a column, these text widgets will be stacked on top of each other. The next thing we'll do is create another container and the child of this container will be a row. We want to display 3 buttons horizontally and we want the first button to be at the very left and the last button to be at the very right. So for that we can use main axis alignment space between. Then we'll just go ahead and drop a few of Flutter's built in buttons into this array, and they'll be perfectly spaced along the horizontal axis.

So as you can see, once you're comfortable with Box, it becomes very easy to prototype out UIs, and most of your layouts should be responsive and be able to adapt to different viewport sizes. In future videos, I'd like to clone popular mobile app UIs like maybe Lyft or Instagram or maybe even Snapchat's redesign that everybody hates. So if you have any ideas, let me know in the comments. I'm gonna go ahead and wrap things up there. Look forward to more Flutter videos.

Thanks for watching, and I will talk to you soon.
If you want to be productive with Flutter, one of the first things you should master is layouts. In today's video, I'll show you the core principles for aligning and positioning widgets. And if you're a web developer, I'll be making direct comparisons to CSS because the 2 share a lot more similarities than you might realize.
graphic design
If you're new here, like and subscribe and you can grab the full source code from Fireship. Io. And I'll be giving away another t shirt with this video. All you have to do is leave a comment below letting me know what you want to see next. The first thing we'll look at is individual widget positioning, which is the equivalent to a div in HTML with a CSS class applied to it. From there, we'll look at how to layout widgets and columns and rows, which works in the same way that Flexbox does in CSS. And lastly, we'll look at how to stack widgets on top of each other, which is similar to absolute or fixed positioning in CSS. Let's go ahead and jump into the code, and you'll see that I'm starting out here with a Scaffold, which basically gives us a blank palette to work with.
Then as the body, I'm defining a container that has a red border. That'll make it easy to visualize how child elements fit within their Parent container. Then I've created a widget called square, which just has a fixed width and height, and we can pass in an argument to adjust the size or the color of the square.
geometry
This just gives us something to work with as we start aligning multiple items. And quick side note, you'll notice I'm using Font Awesome icons, highly recommended if you get bored with the default material icons. And then lastly, we have a widget called demo, which we'll get to when we start doing things with Flexbox and absolute positioning. For now, let's go back up to the root container that we defined in the body. You'll see that it's sitting in the top left corner of the view. A container is a lot like a span or a div in HTML, in the sense that it's just an empty piece of UI that you can apply styles and positioning 2. Let's first add some spacing on the outside of this element by setting a margin with edge insets to all sides of 24. And we can increase that a bit to make it a little more clear, but, basically, it's like putting an invisible border around the entire container. And I'll put the equivalent CSS in the top right corner here. You can also set padding which will put that invisible spacing on the inside of the element. So you'll notice that the border gets pushed out and now the green background on the container element is visible. You can apply spacing to individual sides by using only instead of all. Another thing you can set on a widget is its alignment. If we set the alignment to center, for example, it will expand the widget out as far as it can go until something tells it to stop, then it will place the child element directly in the center. The alignment behavior really depends on the parent container. In our case, it's going to expand out until it hits the edge of the screen. There's a couple of other things you can do with containers as well. For example, you can explicitly set the width and the height. That's exactly what I've done to create this square box in the middle.
And you can also apply a transform to a container. Could be a whole video on its own, but you can do the same things you can do in CSS, like rotate, skew, and scale. I'd also like to point out that Flutter has a bunch of alternative widgets instead of a container such as padding and align.
animation
graphic design
robotics
video gaming
And they're useful because a lot of times you won't need all the functionality of a container. If you only need to apply padding, you can just use Padding widget, and that will make your code more focused and readable. Now let's move on to what's probably the most important part of this video, flexible positioning. It allows you to align items and columns and rows, which takes care of the majority of the layouts that you'll see on most mobile apps. For example, if we wanted to rebuild this layout on Duolingo, we would start by defining a column. Then inside this column we can stack multiple widgets. In this case we'd start with a text widget and then we could add a row and then another row for the buttons at the bottom. And if you look closely at the middle row, you'll notice we have another column in there that stacks some additional text widgets on top of each other.
So basically, we can nest columns and rows to build out complex UIs, and we can wrap any of these in their own container to fine tune their individual alignment and positioning. Let's look at some examples. The first thing we'll do is define a row and it will take an argument of children which is an array of widgets.
programming
In the case of a row, the widgets will flow from left to right horizontally. You'll notice the row takes up as much horizontal space as it possibly can. This is known as the main axis. So in the case of a row, the main axis will be the x axis.
mathematics
And a column is actually identical to a row. The only difference is the axis is flipped, so the main axis becomes the y axis. This is identical to how things work with CSS Flexbox. So if you're already comfortable with Flexbox, then you're already going to be comfortable with Flutter positioning just with a few name changes. So if we change our row to a column, you can see that now the items Flow from top to bottom and the extra space is along the y axis. There's really only a couple of options that you need to be familiar with. The first one is main axis size. By default, it will take up the maximum amount of space. But if you set this to min, then you can see that it only goes to the end of the child elements. Most of the actual alignment will be adjusted with the main axis alignment or the cross axis alignment. The main axis is similar to justify content in CSS, And the cross axis alignment is similar to align items. For example, if we use main axis alignment space between, It will push the children towards the edges and then try to maximize the space in between them.
There's a lot of other options like space evenly, which will just maximize the space evenly throughout all the elements. We can always flip this to a row and you can see the only thing that changes is the axis of alignment. On the cross axis, the elements will be aligned in the middle by default. It helps if we have squares of different sizes. So you can see here that they're all aligned directly in the center, but what if we want these to be aligned at the start of the container? We can make that happen by setting the cross axis alignment to the start of the container. Or if we want to push them to the opposite side, we can set that to end. And one other cool thing you can do with the cross axis is set it to stretch and that will force the elements to expand across the entire available space.
space
geometry
And one other thing I wanna point out is that columns and rows are just convenience widgets for the flex widget. If you use a flex widget, you can manually set the direction to either axis horizontal or axis vertical.
So at this point, we've been controlling the flex behavior of the children via the parent row or column. But a lot of times, you'll need the actual child to define its flex behavior. To demonstrate this, I'm going to give our boxes different colors. And one of the most common use cases is when you have a set of widgets and you want one of those widgets to Expand to the available space and have the other widgets just be a fixed size.
electronics
parenting
phones
children
technology
So, for example, we might want our last widget to fill up this available space while keeping the other ones the same size. We can easily do this by wrapping our widget in the expanded widget and this will tell it to flex to the available space. This is similar to the flex grow property in CSS. And this is actually a ratio that will be calculated based on the other sibling elements next to it. Currently, this is the only expanded widget, so it's just going to fill up all of the available space. But let's go ahead and wrap the middle square in the expanded widget as well. For now, we'll also set its flex property to 1. So since they're both set to 1, they'll evenly share the available space. But the thing to remember here is that the flex property is a ratio. So if we set flex 10 for the middle element and flex 1 for the last element, the middle element will take up 10 times more Space than the last one.
In other words, we could fit 10 pink widgets inside of the blue widget. So Flexbox is awesome when working with 2 dimensional layouts, But sometimes you want things to overlap as if there was a third dimension to work with. For that, we're going to look at the Flutter stack, and a common use case might be something like a tooltip that gets positioned relative to a button but on top of the main view.
toys
You can compare stacks in Flutter roughly to absolute or fixed positioning in CSS. Let's go ahead and grab our existing column and convert it to a stack. You'll notice that it only displays one square and that's the red square which is the last one in the array. The other squares didn't disappear, they're just underneath the red square. The last element in the array gets the highest priority when being displayed. If we make the blue square last, then it's the one that gets displayed when we reload. Now that we have our elements in a stack, we need to align or position them. One way to do that is with the align widget, which allows us to place elements relative to the parent container in a perfect position. So it makes it really easy to center things. And if you don't wanna use the align widget, you can just use a container and set the alignment there. When When thinking about alignment, the middle is always going to be the 0 zero coordinate and you can control the alignment directly if the built in static methods aren't enough. For example, if we set it to negative one negative one it puts the blue square in the top left corner and if we were to set it to 0 it would be directly in the middle. But there's generally a better way to position things when you're working within a stack and that's with the positioned widget. This allows you to define specific values relative to the parent Container based on top, bottom, left, right. And one key difference that you'll notice is that position won't push the container element to the furthest bounds that it's allowed to go. So in order for position to work, you need to have a container that already has some free space available. So I'm wrapping the stack in a container and then I'm manually setting the height and width to be the size of the actual device height and width. From there, I'll go down to my position widgets and set the top and left properties. And now we can see the parts of the other squares that were hidden before. And now just like absolute position in CSS, we can move these boxes around wherever we want. So using a combination of containers, columns, rows, and stacks will take care of the vast majority of your layout needs in Flutter. Let's go ahead and bring everything together by running through a full example of a card you might build from scratch. There's already a material card built into Flutter, so this is kind of redundant, but it's a good example anyway. So we start with a container. And in that container, we'll give it some margin, padding, and we'll also give it a border and you could also add a box shadow here as well. So, basically, we're just adding styles to the box that will hold our column. Then in the column itself, we'll have the cross axis alignment set to stretch so it expands throughout the entire card. And main axis min will ensure that the column only expands to the content and not to the end of the viewport. Now if we add children to this container, they'll be stretched out across the horizontal axis that's how we get this purple rectangle here.
And I didn't really talk about text in this video, but they have their own specific text styles that are also very similar to CSS. Now because we're inside of a column, these text widgets will be stacked on top of each other. The next thing we'll do is create another container and the child of this container will be a row.
multimedia
We want to display 3 buttons horizontally and we want the first button to be at the very left and the last button to be at the very right. So for that we can use main axis alignment space between. Then we'll just go ahead and drop a few of Flutter's built in buttons into this array, and they'll be perfectly spaced along the horizontal axis. So as you can see, once you're comfortable with Box, it becomes very easy to prototype out UIs, and most of your layouts should be responsive and be able to adapt to different viewport sizes.
In future videos, I'd like to clone popular mobile app UIs like maybe Lyft or Instagram or maybe even Snapchat's redesign that everybody hates. So if you have any ideas, let me know in the comments. I'm gonna go ahead and wrap things up there. Look forward to more Flutter videos. Thanks for watching, and I will talk to you soon.
youtube
streaming
animation
video gaming
instagram
phones
If you want to be productive with Flutter, one of the first things you should master is layouts. In today's video, I'll show you the core principles for aligning and positioning widgets. And if you're a web developer, I'll be making direct comparisons to CSS because the 2 share a lot more similarities than you might realize. If you're new here, like and subscribe and you can grab the full source code from Fireship. Io. And I'll be giving away another t shirt with this video. All you have to do is leave a comment below letting me know what you want to see next. The first thing we'll look at is individual widget positioning, which is the equivalent to a div in HTML with a CSS class applied to it. From there, we'll look at how to layout widgets and columns and rows, which works in the same way that Flexbox does in CSS. And lastly, we'll look at how to stack widgets on top of each other, which is similar to absolute or fixed positioning in CSS. Let's go ahead and jump into the code, and you'll see that I'm starting out here with a Scaffold, which basically gives us a blank palette to work with. Then as the body, I'm defining a container that has a red border. That'll make it easy to visualize how child elements fit within their Parent container. Then I've created a widget called square, which just has a fixed width and height, and we can pass in an argument to adjust the size or the color of the square. This just gives us something to work with as we start aligning multiple items. And quick side note, you'll notice I'm using Font Awesome icons, highly recommended if you get bored with the default material icons. And then lastly, we have a widget called demo, which we'll get to when we start doing things with Flexbox and absolute positioning. For now, let's go back up to the root container that we defined in the body. You'll see that it's sitting in the top left corner of the view. A container is a lot like a span or a div in HTML, in the sense that it's just an empty piece of UI that you can apply styles and positioning 2. Let's first add some spacing on the outside of this element by setting a margin with edge insets to all sides of 24. And we can increase that a bit to make it a little more clear, but, basically, it's like putting an invisible border around the entire container. And I'll put the equivalent CSS in the top right corner here. You can also set padding which will put that invisible spacing on the inside of the element. So you'll notice that the border gets pushed out and now the green background on the container element is visible. You can apply spacing to individual sides by using only instead of all. Another thing you can set on a widget is its alignment. If we set the alignment to center, for example, it will expand the widget out as far as it can go until something tells it to stop, then it will place the child element directly in the center. The alignment behavior really depends on the parent container. In our case, it's going to expand out until it hits the edge of the screen. There's a couple of other things you can do with containers as well. For example, you can explicitly set the width and the height. That's exactly what I've done to create this square box in the middle. And you can also apply a transform to a container. Could be a whole video on its own, but you can do the same things you can do in CSS, like rotate, skew, and scale. I'd also like to point out that Flutter has a bunch of alternative widgets instead of a container such as padding and align. And they're useful because a lot of times you won't need all the functionality of a container. If you only need to apply padding, you can just use Padding widget, and that will make your code more focused and readable. Now let's move on to what's probably the most important part of this video, flexible positioning. It allows you to align items and columns and rows, which takes care of the majority of the layouts that you'll see on most mobile apps. For example, if we wanted to rebuild this layout on Duolingo, we would start by defining a column. Then inside this column we can stack multiple widgets. In this case we'd start with a text widget and then we could add a row and then another row for the buttons at the bottom. And if you look closely at the middle row, you'll notice we have another column in there that stacks some additional text widgets on top of each other. So basically, we can nest columns and rows to build out complex UIs, and we can wrap any of these in their own container to fine tune their individual alignment and positioning. Let's look at some examples. The first thing we'll do is define a row and it will take an argument of children which is an array of widgets. In the case of a row, the widgets will flow from left to right horizontally. You'll notice the row takes up as much horizontal space as it possibly can. This is known as the main axis. So in the case of a row, the main axis will be the x axis. And a column is actually identical to a row. The only difference is the axis is flipped, so the main axis becomes the y axis. This is identical to how things work with CSS Flexbox. So if you're already comfortable with Flexbox, then you're already going to be comfortable with Flutter positioning just with a few name changes. So if we change our row to a column, you can see that now the items Flow from top to bottom and the extra space is along the y axis. There's really only a couple of options that you need to be familiar with. The first one is main axis size. By default, it will take up the maximum amount of space. But if you set this to min, then you can see that it only goes to the end of the child elements. Most of the actual alignment will be adjusted with the main axis alignment or the cross axis alignment. The main axis is similar to justify content in CSS, And the cross axis alignment is similar to align items. For example, if we use main axis alignment space between, It will push the children towards the edges and then try to maximize the space in between them. There's a lot of other options like space evenly, which will just maximize the space evenly throughout all the elements. We can always flip this to a row and you can see the only thing that changes is the axis of alignment. On the cross axis, the elements will be aligned in the middle by default. It helps if we have squares of different sizes. So you can see here that they're all aligned directly in the center, but what if we want these to be aligned at the start of the container? We can make that happen by setting the cross axis alignment to the start of the container. Or if we want to push them to the opposite side, we can set that to end. And one other cool thing you can do with the cross axis is set it to stretch and that will force the elements to expand across the entire available space. And one other thing I wanna point out is that columns and rows are just convenience widgets for the flex widget. If you use a flex widget, you can manually set the direction to either axis horizontal or axis vertical. So at this point, we've been controlling the flex behavior of the children via the parent row or column. But a lot of times, you'll need the actual child to define its flex behavior. To demonstrate this, I'm going to give our boxes different colors. And one of the most common use cases is when you have a set of widgets and you want one of those widgets to Expand to the available space and have the other widgets just be a fixed size. So, for example, we might want our last widget to fill up this available space while keeping the other ones the same size. We can easily do this by wrapping our widget in the expanded widget and this will tell it to flex to the available space. This is similar to the flex grow property in CSS. And this is actually a ratio that will be calculated based on the other sibling elements next to it. Currently, this is the only expanded widget, so it's just going to fill up all of the available space. But let's go ahead and wrap the middle square in the expanded widget as well. For now, we'll also set its flex property to 1. So since they're both set to 1, they'll evenly share the available space. But the thing to remember here is that the flex property is a ratio. So if we set flex 10 for the middle element and flex 1 for the last element, the middle element will take up 10 times more Space than the last one. In other words, we could fit 10 pink widgets inside of the blue widget. So Flexbox is awesome when working with 2 dimensional layouts, But sometimes you want things to overlap as if there was a third dimension to work with. For that, we're going to look at the Flutter stack, and a common use case might be something like a tooltip that gets positioned relative to a button but on top of the main view. You can compare stacks in Flutter roughly to absolute or fixed positioning in CSS. Let's go ahead and grab our existing column and convert it to a stack. You'll notice that it only displays one square and that's the red square which is the last one in the array. The other squares didn't disappear, they're just underneath the red square. The last element in the array gets the highest priority when being displayed. If we make the blue square last, then it's the one that gets displayed when we reload. Now that we have our elements in a stack, we need to align or position them. One way to do that is with the align widget, which allows us to place elements relative to the parent container in a perfect position. So it makes it really easy to center things. And if you don't wanna use the align widget, you can just use a container and set the alignment there. When When thinking about alignment, the middle is always going to be the 0 zero coordinate and you can control the alignment directly if the built in static methods aren't enough. For example, if we set it to negative one negative one it puts the blue square in the top left corner and if we were to set it to 0 it would be directly in the middle. But there's generally a better way to position things when you're working within a stack and that's with the positioned widget. This allows you to define specific values relative to the parent Container based on top, bottom, left, right. And one key difference that you'll notice is that position won't push the container element to the furthest bounds that it's allowed to go. So in order for position to work, you need to have a container that already has some free space available. So I'm wrapping the stack in a container and then I'm manually setting the height and width to be the size of the actual device height and width. From there, I'll go down to my position widgets and set the top and left properties. And now we can see the parts of the other squares that were hidden before. And now just like absolute position in CSS, we can move these boxes around wherever we want. So using a combination of containers, columns, rows, and stacks will take care of the vast majority of your layout needs in Flutter. Let's go ahead and bring everything together by running through a full example of a card you might build from scratch. There's already a material card built into Flutter, so this is kind of redundant, but it's a good example anyway. So we start with a container. And in that container, we'll give it some margin, padding, and we'll also give it a border and you could also add a box shadow here as well. So, basically, we're just adding styles to the box that will hold our column. Then in the column itself, we'll have the cross axis alignment set to stretch so it expands throughout the entire card. And main axis min will ensure that the column only expands to the content and not to the end of the viewport. Now if we add children to this container, they'll be stretched out across the horizontal axis that's how we get this purple rectangle here. And I didn't really talk about text in this video, but they have their own specific text styles that are also very similar to CSS. Now because we're inside of a column, these text widgets will be stacked on top of each other. The next thing we'll do is create another container and the child of this container will be a row. We want to display 3 buttons horizontally and we want the first button to be at the very left and the last button to be at the very right. So for that we can use main axis alignment space between. Then we'll just go ahead and drop a few of Flutter's built in buttons into this array, and they'll be perfectly spaced along the horizontal axis. So as you can see, once you're comfortable with Box, it becomes very easy to prototype out UIs, and most of your layouts should be responsive and be able to adapt to different viewport sizes. In future videos, I'd like to clone popular mobile app UIs like maybe Lyft or Instagram or maybe even Snapchat's redesign that everybody hates. So if you have any ideas, let me know in the comments. I'm gonna go ahead and wrap things up there. Look forward to more Flutter videos. Thanks for watching, and I will talk to you soon.
If
if
you
you
want
want
to
to
be
be
productive
productive
with
with
Flutter,
flutter
one
one
of
of
the
the
first
first
things
things
you
you
should
should
master
master
is
is
layouts.
layouts
In
in
today's
today's
video,
video
I'll
i'll
show
show
you
you
the
the
core
core
principles
principles
for
for
aligning
aligning
and
and
positioning
positioning
widgets.
widgets
And
and
if
if
you're
you're
a
a
web
web
developer,
developer
I'll
i'll
be
be
making
making
direct
direct
comparisons
comparisons
to
to
CSS
css
because
because
the
the
2
2
share
share
a
a
lot
lot
more
more
similarities
similarities
than
than
you
you
might
might
realize.
realize
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
you
you
can
can
grab
grab
the
the
full
full
source
source
code
code
from
from
Fireship.
fireship
Io.
io
And
and
I'll
i'll
be
be
giving
giving
away
away
another
another
t
t
shirt
shirt
with
with
this
this
video.
video
All
all
you
you
have
have
to
to
do
do
is
is
leave
leave
a
a
comment
comment
below
below
letting
letting
me
me
know
know
what
what
you
you
want
want
to
to
see
see
next.
next
The
the
first
first
thing
thing
we'll
we'll
look
look
at
at
is
is
individual
individual
widget
widget
positioning,
positioning
which
which
is
is
the
the
equivalent
equivalent
to
to
a
a
div
div
in
in
HTML
html
with
with
a
a
CSS
css
class
class
applied
applied
to
to
it.
it
From
from
there,
there
we'll
we'll
look
look
at
at
how
how
to
to
layout
layout
widgets
widgets
and
and
columns
columns
and
and
rows,
rows
which
which
works
works
in
in
the
the
same
same
way
way
that
that
Flexbox
flexbox
does
does
in
in
CSS.
css
And
and
lastly,
lastly
we'll
we'll
look
look
at
at
how
how
to
to
stack
stack
widgets
widgets
on
on
top
top
of
of
each
each
other,
other
which
which
is
is
similar
similar
to
to
absolute
absolute
or
or
fixed
fixed
positioning
positioning
in
in
CSS.
css
Let's
let's
go
go
ahead
ahead
and
and
jump
jump
into
into
the
the
code,
code
and
and
you'll
you'll
see
see
that
that
I'm
i'm
starting
starting
out
out
here
here
with
with
a
a
Scaffold,
scaffold
which
which
basically
basically
gives
gives
us
us
a
a
blank
blank
palette
palette
to
to
work
work
with.
with
Then
then
as
as
the
the
body,
body
I'm
i'm
defining
defining
a
a
container
container
that
that
has
has
a
a
red
red
border.
border
That'll
that'll
make
make
it
it
easy
easy
to
to
visualize
visualize
how
how
child
child
elements
elements
fit
fit
within
within
their
their
Parent
parent
container.
container
Then
then
I've
i've
created
created
a
a
widget
widget
called
called
square,
square
which
which
just
just
has
has
a
a
fixed
fixed
width
width
and
and
height,
height
and
and
we
we
can
can
pass
pass
in
in
an
an
argument
argument
to
to
adjust
adjust
the
the
size
size
or
or
the
the
color
color
of
of
the
the
square.
square
This
this
just
just
gives
gives
us
us
something
something
to
to
work
work
with
with
as
as
we
we
start
start
aligning
aligning
multiple
multiple
items.
items
And
and
quick
quick
side
side
note,
note
you'll
you'll
notice
notice
I'm
i'm
using
using
Font
font
Awesome
awesome
icons,
icons
highly
highly
recommended
recommended
if
if
you
you
get
get
bored
bored
with
with
the
the
default
default
material
material
icons.
icons
And
and
then
then
lastly,
lastly
we
we
have
have
a
a
widget
widget
called
called
demo,
demo
which
which
we'll
we'll
get
get
to
to
when
when
we
we
start
start
doing
doing
things
things
with
with
Flexbox
flexbox
and
and
absolute
absolute
positioning.
positioning
For
for
now,
now
let's
let's
go
go
back
back
up
up
to
to
the
the
root
root
container
container
that
that
we
we
defined
defined
in
in
the
the
body.
body
You'll
you'll
see
see
that
that
it's
it's
sitting
sitting
in
in
the
the
top
top
left
left
corner
corner
of
of
the
the
view.
view
A
a
container
container
is
is
a
a
lot
lot
like
like
a
a
span
span
or
or
a
a
div
div
in
in
HTML,
html
in
in
the
the
sense
sense
that
that
it's
it's
just
just
an
an
empty
empty
piece
piece
of
of
UI
ui
that
that
you
you
can
can
apply
apply
styles
styles
and
and
positioning
positioning
2.
2
Let's
let's
first
first
add
add
some
some
spacing
spacing
on
on
the
the
outside
outside
of
of
this
this
element
element
by
by
setting
setting
a
a
margin
margin
with
with
edge
edge
insets
insets
to
to
all
all
sides
sides
of
of
24.
24
And
and
we
we
can
can
increase
increase
that
that
a
a
bit
bit
to
to
make
make
it
it
a
a
little
little
more
more
clear,
clear
but,
but
basically,
basically
it's
it's
like
like
putting
putting
an
an
invisible
invisible
border
border
around
around
the
the
entire
entire
container.
container
And
and
I'll
i'll
put
put
the
the
equivalent
equivalent
CSS
css
in
in
the
the
top
top
right
right
corner
corner
here.
here
You
you
can
can
also
also
set
set
padding
padding
which
which
will
will
put
put
that
that
invisible
invisible
spacing
spacing
on
on
the
the
inside
inside
of
of
the
the
element.
element
So
so
you'll
you'll
notice
notice
that
that
the
the
border
border
gets
gets
pushed
pushed
out
out
and
and
now
now
the
the
green
green
background
background
on
on
the
the
container
container
element
element
is
is
visible.
visible
You
you
can
can
apply
apply
spacing
spacing
to
to
individual
individual
sides
sides
by
by
using
using
only
only
instead
instead
of
of
all.
all
Another
another
thing
thing
you
you
can
can
set
set
on
on
a
a
widget
widget
is
is
its
its
alignment.
alignment
If
if
we
we
set
set
the
the
alignment
alignment
to
to
center,
center
for
for
example,
example
it
it
will
will
expand
expand
the
the
widget
widget
out
out
as
as
far
far
as
as
it
it
can
can
go
go
until
until
something
something
tells
tells
it
it
to
to
stop,
stop
then
then
it
it
will
will
place
place
the
the
child
child
element
element
directly
directly
in
in
the
the
center.
center
The
the
alignment
alignment
behavior
behavior
really
really
depends
depends
on
on
the
the
parent
parent
container.
container
In
in
our
our
case,
case
it's
it's
going
going
to
to
expand
expand
out
out
until
until
it
it
hits
hits
the
the
edge
edge
of
of
the
the
screen.
screen
There's
there's
a
a
couple
couple
of
of
other
other
things
things
you
you
can
can
do
do
with
with
containers
containers
as
as
well.
well
For
for
example,
example
you
you
can
can
explicitly
explicitly
set
set
the
the
width
width
and
and
the
the
height.
height
That's
that's
exactly
exactly
what
what
I've
i've
done
done
to
to
create
create
this
this
square
square
box
box
in
in
the
the
middle.
middle
And
and
you
you
can
can
also
also
apply
apply
a
a
transform
transform
to
to
a
a
container.
container
Could
could
be
be
a
a
whole
whole
video
video
on
on
its
its
own,
own
but
but
you
you
can
can
do
do
the
the
same
same
things
things
you
you
can
can
do
do
in
in
CSS,
css
like
like
rotate,
rotate
skew,
skew
and
and
scale.
scale
I'd
i'd
also
also
like
like
to
to
point
point
out
out
that
that
Flutter
flutter
has
has
a
a
bunch
bunch
of
of
alternative
alternative
widgets
widgets
instead
instead
of
of
a
a
container
container
such
such
as
as
padding
padding
and
and
align.
align
And
and
they're
they're
useful
useful
because
because
a
a
lot
lot
of
of
times
times
you
you
won't
won't
need
need
all
all
the
the
functionality
functionality
of
of
a
a
container.
container
If
if
you
you
only
only
need
need
to
to
apply
apply
padding,
padding
you
you
can
can
just
just
use
use
Padding
padding
widget,
widget
and
and
that
that
will
will
make
make
your
your
code
code
more
more
focused
focused
and
and
readable.
readable
Now
now
let's
let's
move
move
on
on
to
to
what's
what's
probably
probably
the
the
most
most
important
important
part
part
of
of
this
this
video,
video
flexible
flexible
positioning.
positioning
It
it
allows
allows
you
you
to
to
align
align
items
items
and
and
columns
columns
and
and
rows,
rows
which
which
takes
takes
care
care
of
of
the
the
majority
majority
of
of
the
the
layouts
layouts
that
that
you'll
you'll
see
see
on
on
most
most
mobile
mobile
apps.
apps
For
for
example,
example
if
if
we
we
wanted
wanted
to
to
rebuild
rebuild
this
this
layout
layout
on
on
Duolingo,
duolingo
we
we
would
would
start
start
by
by
defining
defining
a
a
column.
column
Then
then
inside
inside
this
this
column
column
we
we
can
can
stack
stack
multiple
multiple
widgets.
widgets
In
in
this
this
case
case
we'd
we'd
start
start
with
with
a
a
text
text
widget
widget
and
and
then
then
we
we
could
could
add
add
a
a
row
row
and
and
then
then
another
another
row
row
for
for
the
the
buttons
buttons
at
at
the
the
bottom.
bottom
And
and
if
if
you
you
look
look
closely
closely
at
at
the
the
middle
middle
row,
row
you'll
you'll
notice
notice
we
we
have
have
another
another
column
column
in
in
there
there
that
that
stacks
stacks
some
some
additional
additional
text
text
widgets
widgets
on
on
top
top
of
of
each
each
other.
other
So
so
basically,
basically
we
we
can
can
nest
nest
columns
columns
and
and
rows
rows
to
to
build
build
out
out
complex
complex
UIs,
uis
and
and
we
we
can
can
wrap
wrap
any
any
of
of
these
these
in
in
their
their
own
own
container
container
to
to
fine
fine
tune
tune
their
their
individual
individual
alignment
alignment
and
and
positioning.
positioning
Let's
let's
look
look
at
at
some
some
examples.
examples
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
define
define
a
a
row
row
and
and
it
it
will
will
take
take
an
an
argument
argument
of
of
children
children
which
which
is
is
an
an
array
array
of
of
widgets.
widgets
In
in
the
the
case
case
of
of
a
a
row,
row
the
the
widgets
widgets
will
will
flow
flow
from
from
left
left
to
to
right
right
horizontally.
horizontally
You'll
you'll
notice
notice
the
the
row
row
takes
takes
up
up
as
as
much
much
horizontal
horizontal
space
space
as
as
it
it
possibly
possibly
can.
can
This
this
is
is
known
known
as
as
the
the
main
main
axis.
axis
So
so
in
in
the
the
case
case
of
of
a
a
row,
row
the
the
main
main
axis
axis
will
will
be
be
the
the
x
x
axis.
axis
And
and
a
a
column
column
is
is
actually
actually
identical
identical
to
to
a
a
row.
row
The
the
only
only
difference
difference
is
is
the
the
axis
axis
is
is
flipped,
flipped
so
so
the
the
main
main
axis
axis
becomes
becomes
the
the
y
y
axis.
axis
This
this
is
is
identical
identical
to
to
how
how
things
things
work
work
with
with
CSS
css
Flexbox.
flexbox
So
so
if
if
you're
you're
already
already
comfortable
comfortable
with
with
Flexbox,
flexbox
then
then
you're
you're
already
already
going
going
to
to
be
be
comfortable
comfortable
with
with
Flutter
flutter
positioning
positioning
just
just
with
with
a
a
few
few
name
name
changes.
changes
So
so
if
if
we
we
change
change
our
our
row
row
to
to
a
a
column,
column
you
you
can
can
see
see
that
that
now
now
the
the
items
items
Flow
flow
from
from
top
top
to
to
bottom
bottom
and
and
the
the
extra
extra
space
space
is
is
along
along
the
the
y
y
axis.
axis
There's
there's
really
really
only
only
a
a
couple
couple
of
of
options
options
that
that
you
you
need
need
to
to
be
be
familiar
familiar
with.
with
The
the
first
first
one
one
is
is
main
main
axis
axis
size.
size
By
by
default,
default
it
it
will
will
take
take
up
up
the
the
maximum
maximum
amount
amount
of
of
space.
space
But
but
if
if
you
you
set
set
this
this
to
to
min,
min
then
then
you
you
can
can
see
see
that
that
it
it
only
only
goes
goes
to
to
the
the
end
end
of
of
the
the
child
child
elements.
elements
Most
most
of
of
the
the
actual
actual
alignment
alignment
will
will
be
be
adjusted
adjusted
with
with
the
the
main
main
axis
axis
alignment
alignment
or
or
the
the
cross
cross
axis
axis
alignment.
alignment
The
the
main
main
axis
axis
is
is
similar
similar
to
to
justify
justify
content
content
in
in
CSS,
css
And
and
the
the
cross
cross
axis
axis
alignment
alignment
is
is
similar
similar
to
to
align
align
items.
items
For
for
example,
example
if
if
we
we
use
use
main
main
axis
axis
alignment
alignment
space
space
between,
between
It
it
will
will
push
push
the
the
children
children
towards
towards
the
the
edges
edges
and
and
then
then
try
try
to
to
maximize
maximize
the
the
space
space
in
in
between
between
them.
them
There's
there's
a
a
lot
lot
of
of
other
other
options
options
like
like
space
space
evenly,
evenly
which
which
will
will
just
just
maximize
maximize
the
the
space
space
evenly
evenly
throughout
throughout
all
all
the
the
elements.
elements
We
we
can
can
always
always
flip
flip
this
this
to
to
a
a
row
row
and
and
you
you
can
can
see
see
the
the
only
only
thing
thing
that
that
changes
changes
is
is
the
the
axis
axis
of
of
alignment.
alignment
On
on
the
the
cross
cross
axis,
axis
the
the
elements
elements
will
will
be
be
aligned
aligned
in
in
the
the
middle
middle
by
by
default.
default
It
it
helps
helps
if
if
we
we
have
have
squares
squares
of
of
different
different
sizes.
sizes
So
so
you
you
can
can
see
see
here
here
that
that
they're
they're
all
all
aligned
aligned
directly
directly
in
in
the
the
center,
center
but
but
what
what
if
if
we
we
want
want
these
these
to
to
be
be
aligned
aligned
at
at
the
the
start
start
of
of
the
the
container?
container
We
we
can
can
make
make
that
that
happen
happen
by
by
setting
setting
the
the
cross
cross
axis
axis
alignment
alignment
to
to
the
the
start
start
of
of
the
the
container.
container
Or
or
if
if
we
we
want
want
to
to
push
push
them
them
to
to
the
the
opposite
opposite
side,
side
we
we
can
can
set
set
that
that
to
to
end.
end
And
and
one
one
other
other
cool
cool
thing
thing
you
you
can
can
do
do
with
with
the
the
cross
cross
axis
axis
is
is
set
set
it
it
to
to
stretch
stretch
and
and
that
that
will
will
force
force
the
the
elements
elements
to
to
expand
expand
across
across
the
the
entire
entire
available
available
space.
space
And
and
one
one
other
other
thing
thing
I
i
wanna
wanna
point
point
out
out
is
is
that
that
columns
columns
and
and
rows
rows
are
are
just
just
convenience
convenience
widgets
widgets
for
for
the
the
flex
flex
widget.
widget
If
if
you
you
use
use
a
a
flex
flex
widget,
widget
you
you
can
can
manually
manually
set
set
the
the
direction
direction
to
to
either
either
axis
axis
horizontal
horizontal
or
or
axis
axis
vertical.
vertical
So
so
at
at
this
this
point,
point
we've
we've
been
been
controlling
controlling
the
the
flex
flex
behavior
behavior
of
of
the
the
children
children
via
via
the
the
parent
parent
row
row
or
or
column.
column
But
but
a
a
lot
lot
of
of
times,
times
you'll
you'll
need
need
the
the
actual
actual
child
child
to
to
define
define
its
its
flex
flex
behavior.
behavior
To
to
demonstrate
demonstrate
this,
this
I'm
i'm
going
going
to
to
give
give
our
our
boxes
boxes
different
different
colors.
colors
And
and
one
one
of
of
the
the
most
most
common
common
use
use
cases
cases
is
is
when
when
you
you
have
have
a
a
set
set
of
of
widgets
widgets
and
and
you
you
want
want
one
one
of
of
those
those
widgets
widgets
to
to
Expand
expand
to
to
the
the
available
available
space
space
and
and
have
have
the
the
other
other
widgets
widgets
just
just
be
be
a
a
fixed
fixed
size.
size
So,
so
for
for
example,
example
we
we
might
might
want
want
our
our
last
last
widget
widget
to
to
fill
fill
up
up
this
this
available
available
space
space
while
while
keeping
keeping
the
the
other
other
ones
ones
the
the
same
same
size.
size
We
we
can
can
easily
easily
do
do
this
this
by
by
wrapping
wrapping
our
our
widget
widget
in
in
the
the
expanded
expanded
widget
widget
and
and
this
this
will
will
tell
tell
it
it
to
to
flex
flex
to
to
the
the
available
available
space.
space
This
this
is
is
similar
similar
to
to
the
the
flex
flex
grow
grow
property
property
in
in
CSS.
css
And
and
this
this
is
is
actually
actually
a
a
ratio
ratio
that
that
will
will
be
be
calculated
calculated
based
based
on
on
the
the
other
other
sibling
sibling
elements
elements
next
next
to
to
it.
it
Currently,
currently
this
this
is
is
the
the
only
only
expanded
expanded
widget,
widget
so
so
it's
it's
just
just
going
going
to
to
fill
fill
up
up
all
all
of
of
the
the
available
available
space.
space
But
but
let's
let's
go
go
ahead
ahead
and
and
wrap
wrap
the
the
middle
middle
square
square
in
in
the
the
expanded
expanded
widget
widget
as
as
well.
well
For
for
now,
now
we'll
we'll
also
also
set
set
its
its
flex
flex
property
property
to
to
1.
1
So
so
since
since
they're
they're
both
both
set
set
to
to
1,
1
they'll
they'll
evenly
evenly
share
share
the
the
available
available
space.
space
But
but
the
the
thing
thing
to
to
remember
remember
here
here
is
is
that
that
the
the
flex
flex
property
property
is
is
a
a
ratio.
ratio
So
so
if
if
we
we
set
set
flex
flex
10
10
for
for
the
the
middle
middle
element
element
and
and
flex
flex
1
1
for
for
the
the
last
last
element,
element
the
the
middle
middle
element
element
will
will
take
take
up
up
10
10
times
times
more
more
Space
space
than
than
the
the
last
last
one.
one
In
in
other
other
words,
words
we
we
could
could
fit
fit
10
10
pink
pink
widgets
widgets
inside
inside
of
of
the
the
blue
blue
widget.
widget
So
so
Flexbox
flexbox
is
is
awesome
awesome
when
when
working
working
with
with
2
2
dimensional
dimensional
layouts,
layouts
But
but
sometimes
sometimes
you
you
want
want
things
things
to
to
overlap
overlap
as
as
if
if
there
there
was
was
a
a
third
third
dimension
dimension
to
to
work
work
with.
with
For
for
that,
that
we're
we're
going
going
to
to
look
look
at
at
the
the
Flutter
flutter
stack,
stack
and
and
a
a
common
common
use
use
case
case
might
might
be
be
something
something
like
like
a
a
tooltip
tooltip
that
that
gets
gets
positioned
positioned
relative
relative
to
to
a
a
button
button
but
but
on
on
top
top
of
of
the
the
main
main
view.
view
You
you
can
can
compare
compare
stacks
stacks
in
in
Flutter
flutter
roughly
roughly
to
to
absolute
absolute
or
or
fixed
fixed
positioning
positioning
in
in
CSS.
css
Let's
let's
go
go
ahead
ahead
and
and
grab
grab
our
our
existing
existing
column
column
and
and
convert
convert
it
it
to
to
a
a
stack.
stack
You'll
you'll
notice
notice
that
that
it
it
only
only
displays
displays
one
one
square
square
and
and
that's
that's
the
the
red
red
square
square
which
which
is
is
the
the
last
last
one
one
in
in
the
the
array.
array
The
the
other
other
squares
squares
didn't
didn't
disappear,
disappear
they're
they're
just
just
underneath
underneath
the
the
red
red
square.
square
The
the
last
last
element
element
in
in
the
the
array
array
gets
gets
the
the
highest
highest
priority
priority
when
when
being
being
displayed.
displayed
If
if
we
we
make
make
the
the
blue
blue
square
square
last,
last
then
then
it's
it's
the
the
one
one
that
that
gets
gets
displayed
displayed
when
when
we
we
reload.
reload
Now
now
that
that
we
we
have
have
our
our
elements
elements
in
in
a
a
stack,
stack
we
we
need
need
to
to
align
align
or
or
position
position
them.
them
One
one
way
way
to
to
do
do
that
that
is
is
with
with
the
the
align
align
widget,
widget
which
which
allows
allows
us
us
to
to
place
place
elements
elements
relative
relative
to
to
the
the
parent
parent
container
container
in
in
a
a
perfect
perfect
position.
position
So
so
it
it
makes
makes
it
it
really
really
easy
easy
to
to
center
center
things.
things
And
and
if
if
you
you
don't
don't
wanna
wanna
use
use
the
the
align
align
widget,
widget
you
you
can
can
just
just
use
use
a
a
container
container
and
and
set
set
the
the
alignment
alignment
there.
there
When
when
When
when
thinking
thinking
about
about
alignment,
alignment
the
the
middle
middle
is
is
always
always
going
going
to
to
be
be
the
the
0
0
zero
zero
coordinate
coordinate
and
and
you
you
can
can
control
control
the
the
alignment
alignment
directly
directly
if
if
the
the
built
built
in
in
static
static
methods
methods
aren't
aren't
enough.
enough
For
for
example,
example
if
if
we
we
set
set
it
it
to
to
negative
negative
one
one
negative
negative
one
one
it
it
puts
puts
the
the
blue
blue
square
square
in
in
the
the
top
top
left
left
corner
corner
and
and
if
if
we
we
were
were
to
to
set
set
it
it
to
to
0
0
it
it
would
would
be
be
directly
directly
in
in
the
the
middle.
middle
But
but
there's
there's
generally
generally
a
a
better
better
way
way
to
to
position
position
things
things
when
when
you're
you're
working
working
within
within
a
a
stack
stack
and
and
that's
that's
with
with
the
the
positioned
positioned
widget.
widget
This
this
allows
allows
you
you
to
to
define
define
specific
specific
values
values
relative
relative
to
to
the
the
parent
parent
Container
container
based
based
on
on
top,
top
bottom,
bottom
left,
left
right.
right
And
and
one
one
key
key
difference
difference
that
that
you'll
you'll
notice
notice
is
is
that
that
position
position
won't
won't
push
push
the
the
container
container
element
element
to
to
the
the
furthest
furthest
bounds
bounds
that
that
it's
it's
allowed
allowed
to
to
go.
go
So
so
in
in
order
order
for
for
position
position
to
to
work,
work
you
you
need
need
to
to
have
have
a
a
container
container
that
that
already
already
has
has
some
some
free
free
space
space
available.
available
So
so
I'm
i'm
wrapping
wrapping
the
the
stack
stack
in
in
a
a
container
container
and
and
then
then
I'm
i'm
manually
manually
setting
setting
the
the
height
height
and
and
width
width
to
to
be
be
the
the
size
size
of
of
the
the
actual
actual
device
device
height
height
and
and
width.
width
From
from
there,
there
I'll
i'll
go
go
down
down
to
to
my
my
position
position
widgets
widgets
and
and
set
set
the
the
top
top
and
and
left
left
properties.
properties
And
and
now
now
we
we
can
can
see
see
the
the
parts
parts
of
of
the
the
other
other
squares
squares
that
that
were
were
hidden
hidden
before.
before
And
and
now
now
just
just
like
like
absolute
absolute
position
position
in
in
CSS,
css
we
we
can
can
move
move
these
these
boxes
boxes
around
around
wherever
wherever
we
we
want.
want
So
so
using
using
a
a
combination
combination
of
of
containers,
containers
columns,
columns
rows,
rows
and
and
stacks
stacks
will
will
take
take
care
care
of
of
the
the
vast
vast
majority
majority
of
of
your
your
layout
layout
needs
needs
in
in
Flutter.
flutter
Let's
let's
go
go
ahead
ahead
and
and
bring
bring
everything
everything
together
together
by
by
running
running
through
through
a
a
full
full
example
example
of
of
a
a
card
card
you
you
might
might
build
build
from
from
scratch.
scratch
There's
there's
already
already
a
a
material
material
card
card
built
built
into
into
Flutter,
flutter
so
so
this
this
is
is
kind
kind
of
of
redundant,
redundant
but
but
it's
it's
a
a
good
good
example
example
anyway.
anyway
So
so
we
we
start
start
with
with
a
a
container.
container
And
and
in
in
that
that
container,
container
we'll
we'll
give
give
it
it
some
some
margin,
margin
padding,
padding
and
and
we'll
we'll
also
also
give
give
it
it
a
a
border
border
and
and
you
you
could
could
also
also
add
add
a
a
box
box
shadow
shadow
here
here
as
as
well.
well
So,
so
basically,
basically
we're
we're
just
just
adding
adding
styles
styles
to
to
the
the
box
box
that
that
will
will
hold
hold
our
our
column.
column
Then
then
in
in
the
the
column
column
itself,
itself
we'll
we'll
have
have
the
the
cross
cross
axis
axis
alignment
alignment
set
set
to
to
stretch
stretch
so
so
it
it
expands
expands
throughout
throughout
the
the
entire
entire
card.
card
And
and
main
main
axis
axis
min
min
will
will
ensure
ensure
that
that
the
the
column
column
only
only
expands
expands
to
to
the
the
content
content
and
and
not
not
to
to
the
the
end
end
of
of
the
the
viewport.
viewport
Now
now
if
if
we
we
add
add
children
children
to
to
this
this
container,
container
they'll
they'll
be
be
stretched
stretched
out
out
across
across
the
the
horizontal
horizontal
axis
axis
that's
that's
how
how
we
we
get
get
this
this
purple
purple
rectangle
rectangle
here.
here
And
and
I
i
didn't
didn't
really
really
talk
talk
about
about
text
text
in
in
this
this
video,
video
but
but
they
they
have
have
their
their
own
own
specific
specific
text
text
styles
styles
that
that
are
are
also
also
very
very
similar
similar
to
to
CSS.
css
Now
now
because
because
we're
we're
inside
inside
of
of
a
a
column,
column
these
these
text
text
widgets
widgets
will
will
be
be
stacked
stacked
on
on
top
top
of
of
each
each
other.
other
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
create
create
another
another
container
container
and
and
the
the
child
child
of
of
this
this
container
container
will
will
be
be
a
a
row.
row
We
we
want
want
to
to
display
display
3
3
buttons
buttons
horizontally
horizontally
and
and
we
we
want
want
the
the
first
first
button
button
to
to
be
be
at
at
the
the
very
very
left
left
and
and
the
the
last
last
button
button
to
to
be
be
at
at
the
the
very
very
right.
right
So
so
for
for
that
that
we
we
can
can
use
use
main
main
axis
axis
alignment
alignment
space
space
between.
between
Then
then
we'll
we'll
just
just
go
go
ahead
ahead
and
and
drop
drop
a
a
few
few
of
of
Flutter's
flutter's
built
built
in
in
buttons
buttons
into
into
this
this
array,
array
and
and
they'll
they'll
be
be
perfectly
perfectly
spaced
spaced
along
along
the
the
horizontal
horizontal
axis.
axis
So
so
as
as
you
you
can
can
see,
see
once
once
you're
you're
comfortable
comfortable
with
with
Box,
box
it
it
becomes
becomes
very
very
easy
easy
to
to
prototype
prototype
out
out
UIs,
uis
and
and
most
most
of
of
your
your
layouts
layouts
should
should
be
be
responsive
responsive
and
and
be
be
able
able
to
to
adapt
adapt
to
to
different
different
viewport
viewport
sizes.
sizes
In
in
future
future
videos,
videos
I'd
i'd
like
like
to
to
clone
clone
popular
popular
mobile
mobile
app
app
UIs
uis
like
like
maybe
maybe
Lyft
lyft
or
or
Instagram
instagram
or
or
maybe
maybe
even
even
Snapchat's
snapchat's
redesign
redesign
that
that
everybody
everybody
hates.
hates
So
so
if
if
you
you
have
have
any
any
ideas,
ideas
let
let
me
me
know
know
in
in
the
the
comments.
comments
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Look
look
forward
forward
to
to
more
more
Flutter
flutter
videos.
videos
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains the core principles for aligning and positioning widgets in web development, highlighting the importance of alignment for elements and columns, and the use of flexible positioning for responsive web development. They also explain how to set the cross axis alignment for a Flex widget, how to use the Flex widget to align elements in a stack, and how to create a new container and use the row for buttons and a main axis alignment space. The speaker concludes by encouraging viewers to check out more Flutter videos and ask for more flutter ideas.
Flutter Layouts for the CSS Developer
If you want to be productive with Flutter, one of the first things you should master is layouts. In today's video, I'll show you the core principles for aligning and positioning widgets. And if you're a web developer, I'll be making direct comparisons to CSS because the 2 share a lot more similarities than you might realize. If you're new here, like and subscribe and you can grab the full source code from Fireship. Io. And I'll be giving away another t shirt with this video. All you have to do is leave a comment below letting me know what you want to see next. The first thing we'll look at is individual widget positioning, which is the equivalent to a div in HTML with a CSS class applied to it. From there, we'll look at how to layout widgets and columns and rows, which works in the same way that Flexbox does in CSS. And lastly, we'll look at how to stack widgets on top of each other, which is similar to absolute or fixed positioning in CSS. Let's go ahead and jump into the code, and you'll see that I'm starting out here with a Scaffold, which basically gives us a blank palette to work with. Then as the body, I'm defining a container that has a red border. That'll make it easy to visualize how child elements fit within their Parent container. Then I've created a widget called square, which just has a fixed width and height, and we can pass in an argument to adjust the size or the color of the square. This just gives us something to work with as we start aligning multiple items. And quick side note, you'll notice I'm using Font Awesome icons, highly recommended if you get bored with the default material icons. And then lastly, we have a widget called demo, which we'll get to when we start doing things with Flexbox and absolute positioning. For now, let's go back up to the root container that we defined in the body. You'll see that it's sitting in the top left corner of the view. A container is a lot like a span or a div in HTML, in the sense that it's just an empty piece of UI that you can apply styles and positioning 2. Let's first add some spacing on the outside of this element by setting a margin with edge insets to all sides of 24. And we can increase that a bit to make it a little more clear, but, basically, it's like putting an invisible border around the entire container. And I'll put the equivalent CSS in the top right corner here. You can also set padding which will put that invisible spacing on the inside of the element. So you'll notice that the border gets pushed out and now the green background on the container element is visible. You can apply spacing to individual sides by using only instead of all. Another thing you can set on a widget is its alignment. If we set the alignment to center, for example, it will expand the widget out as far as it can go until something tells it to stop, then it will place the child element directly in the center. The alignment behavior really depends on the parent container. In our case, it's going to expand out until it hits the edge of the screen. There's a couple of other things you can do with containers as well. For example, you can explicitly set the width and the height. That's exactly what I've done to create this square box in the middle. And you can also apply a transform to a container. Could be a whole video on its own, but you can do the same things you can do in CSS, like rotate, skew, and scale. I'd also like to point out that Flutter has a bunch of alternative widgets instead of a container such as padding and align. And they're useful because a lot of times you won't need all the functionality of a container. If you only need to apply padding, you can just use Padding widget, and that will make your code more focused and readable. Now let's move on to what's probably the most important part of this video, flexible positioning. It allows you to align items and columns and rows, which takes care of the majority of the layouts that you'll see on most mobile apps. For example, if we wanted to rebuild this layout on Duolingo, we would start by defining a column. Then inside this column we can stack multiple widgets. In this case we'd start with a text widget and then we could add a row and then another row for the buttons at the bottom. And if you look closely at the middle row, you'll notice we have another column in there that stacks some additional text widgets on top of each other. So basically, we can nest columns and rows to build out complex UIs, and we can wrap any of these in their own container to fine tune their individual alignment and positioning. Let's look at some examples. The first thing we'll do is define a row and it will take an argument of children which is an array of widgets. In the case of a row, the widgets will flow from left to right horizontally. You'll notice the row takes up as much horizontal space as it possibly can. This is known as the main axis. So in the case of a row, the main axis will be the x axis. And a column is actually identical to a row. The only difference is the axis is flipped, so the main axis becomes the y axis. This is identical to how things work with CSS Flexbox. So if you're already comfortable with Flexbox, then you're already going to be comfortable with Flutter positioning just with a few name changes. So if we change our row to a column, you can see that now the items Flow from top to bottom and the extra space is along the y axis. There's really only a couple of options that you need to be familiar with. The first one is main axis size. By default, it will take up the maximum amount of space. But if you set this to min, then you can see that it only goes to the end of the child elements. Most of the actual alignment will be adjusted with the main axis alignment or the cross axis alignment. The main axis is similar to justify content in CSS, And the cross axis alignment is similar to align items. For example, if we use main axis alignment space between, It will push the children towards the edges and then try to maximize the space in between them. There's a lot of other options like space evenly, which will just maximize the space evenly throughout all the elements. We can always flip this to a row and you can see the only thing that changes is the axis of alignment. On the cross axis, the elements will be aligned in the middle by default. It helps if we have squares of different sizes. So you can see here that they're all aligned directly in the center, but what if we want these to be aligned at the start of the container? We can make that happen by setting the cross axis alignment to the start of the container. Or if we want to push them to the opposite side, we can set that to end. And one other cool thing you can do with the cross axis is set it to stretch and that will force the elements to expand across the entire available space. And one other thing I wanna point out is that columns and rows are just convenience widgets for the flex widget. If you use a flex widget, you can manually set the direction to either axis horizontal or axis vertical. So at this point, we've been controlling the flex behavior of the children via the parent row or column. But a lot of times, you'll need the actual child to define its flex behavior. To demonstrate this, I'm going to give our boxes different colors. And one of the most common use cases is when you have a set of widgets and you want one of those widgets to Expand to the available space and have the other widgets just be a fixed size. So, for example, we might want our last widget to fill up this available space while keeping the other ones the same size. We can easily do this by wrapping our widget in the expanded widget and this will tell it to flex to the available space. This is similar to the flex grow property in CSS. And this is actually a ratio that will be calculated based on the other sibling elements next to it. Currently, this is the only expanded widget, so it's just going to fill up all of the available space. But let's go ahead and wrap the middle square in the expanded widget as well. For now, we'll also set its flex property to 1. So since they're both set to 1, they'll evenly share the available space. But the thing to remember here is that the flex property is a ratio. So if we set flex 10 for the middle element and flex 1 for the last element, the middle element will take up 10 times more Space than the last one. In other words, we could fit 10 pink widgets inside of the blue widget. So Flexbox is awesome when working with 2 dimensional layouts, But sometimes you want things to overlap as if there was a third dimension to work with. For that, we're going to look at the Flutter stack, and a common use case might be something like a tooltip that gets positioned relative to a button but on top of the main view. You can compare stacks in Flutter roughly to absolute or fixed positioning in CSS. Let's go ahead and grab our existing column and convert it to a stack. You'll notice that it only displays one square and that's the red square which is the last one in the array. The other squares didn't disappear, they're just underneath the red square. The last element in the array gets the highest priority when being displayed. If we make the blue square last, then it's the one that gets displayed when we reload. Now that we have our elements in a stack, we need to align or position them. One way to do that is with the align widget, which allows us to place elements relative to the parent container in a perfect position. So it makes it really easy to center things. And if you don't wanna use the align widget, you can just use a container and set the alignment there. When When thinking about alignment, the middle is always going to be the 0 zero coordinate and you can control the alignment directly if the built in static methods aren't enough. For example, if we set it to negative one negative one it puts the blue square in the top left corner and if we were to set it to 0 it would be directly in the middle. But there's generally a better way to position things when you're working within a stack and that's with the positioned widget. This allows you to define specific values relative to the parent Container based on top, bottom, left, right. And one key difference that you'll notice is that position won't push the container element to the furthest bounds that it's allowed to go. So in order for position to work, you need to have a container that already has some free space available. So I'm wrapping the stack in a container and then I'm manually setting the height and width to be the size of the actual device height and width. From there, I'll go down to my position widgets and set the top and left properties. And now we can see the parts of the other squares that were hidden before. And now just like absolute position in CSS, we can move these boxes around wherever we want. So using a combination of containers, columns, rows, and stacks will take care of the vast majority of your layout needs in Flutter. Let's go ahead and bring everything together by running through a full example of a card you might build from scratch. There's already a material card built into Flutter, so this is kind of redundant, but it's a good example anyway. So we start with a container. And in that container, we'll give it some margin, padding, and we'll also give it a border and you could also add a box shadow here as well. So, basically, we're just adding styles to the box that will hold our column. Then in the column itself, we'll have the cross axis alignment set to stretch so it expands throughout the entire card. And main axis min will ensure that the column only expands to the content and not to the end of the viewport. Now if we add children to this container, they'll be stretched out across the horizontal axis that's how we get this purple rectangle here. And I didn't really talk about text in this video, but they have their own specific text styles that are also very similar to CSS. Now because we're inside of a column, these text widgets will be stacked on top of each other. The next thing we'll do is create another container and the child of this container will be a row. We want to display 3 buttons horizontally and we want the first button to be at the very left and the last button to be at the very right. So for that we can use main axis alignment space between. Then we'll just go ahead and drop a few of Flutter's built in buttons into this array, and they'll be perfectly spaced along the horizontal axis. So as you can see, once you're comfortable with Box, it becomes very easy to prototype out UIs, and most of your layouts should be responsive and be able to adapt to different viewport sizes. In future videos, I'd like to clone popular mobile app UIs like maybe Lyft or Instagram or maybe even Snapchat's redesign that everybody hates. So if you have any ideas, let me know in the comments. I'm gonna go ahead and wrap things up there. Look forward to more Flutter videos. Thanks for watching, and I will talk to you soon.
The speaker explains the core principles for aligning and positioning widgets in web development, highlighting the importance of alignment for elements and columns, and the use of flexible positioning for responsive web development. They also explain how to set the cross axis alignment for a Flex widget, how to use the Flex widget to align elements in a stack, and how to create a new container and use the row for buttons and a main axis alignment space. The speaker concludes by encouraging viewers to check out more Flutter videos and ask for more flutter ideas.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Flutter Layouts for the CSS Developer 
        and a small summary : The speaker explains the core principles for aligning and positioning widgets in web development, highlighting the importance of alignment for elements and columns, and the use of flexible positioning for responsive web development. They also explain how to set the cross axis alignment for a Flex widget, how to use the Flex widget to align elements in a stack, and how to create a new container and use the row for buttons and a main axis alignment space. The speaker concludes by encouraging viewers to check out more Flutter videos and ask for more flutter ideas.
        [/INST]
        
        Generate the video : If you want to be productive with Flutter, one of the first things you should master is layouts. In today's video, I'll show you the core principles for aligning and positioning widgets. And if you're a web developer, I'll be making direct comparisons to CSS because the 2 share a lot more similarities than you might realize. If you're new here, like and subscribe and you can grab the full source code from Fireship. Io. And I'll be giving away another t shirt with this video. All you have to do is leave a comment below letting me know what you want to see next. The first thing we'll look at is individual widget positioning, which is the equivalent to a div in HTML with a CSS class applied to it. From there, we'll look at how to layout widgets and columns and rows, which works in the same way that Flexbox does in CSS. And lastly, we'll look at how to stack widgets on top of each other, which is similar to absolute or fixed positioning in CSS. Let's go ahead and jump into the code, and you'll see that I'm starting out here with a Scaffold, which basically gives us a blank palette to work with. Then as the body, I'm defining a container that has a red border. That'll make it easy to visualize how child elements fit within their Parent container. Then I've created a widget called square, which just has a fixed width and height, and we can pass in an argument to adjust the size or the color of the square. This just gives us something to work with as we start aligning multiple items. And quick side note, you'll notice I'm using Font Awesome icons, highly recommended if you get bored with the default material icons. And then lastly, we have a widget called demo, which we'll get to when we start doing things with Flexbox and absolute positioning. For now, let's go back up to the root container that we defined in the body. You'll see that it's sitting in the top left corner of the view. A container is a lot like a span or a div in HTML, in the sense that it's just an empty piece of UI that you can apply styles and positioning 2. Let's first add some spacing on the outside of this element by setting a margin with edge insets to all sides of 24. And we can increase that a bit to make it a little more clear, but, basically, it's like putting an invisible border around the entire container. And I'll put the equivalent CSS in the top right corner here. You can also set padding which will put that invisible spacing on the inside of the element. So you'll notice that the border gets pushed out and now the green background on the container element is visible. You can apply spacing to individual sides by using only instead of all. Another thing you can set on a widget is its alignment. If we set the alignment to center, for example, it will expand the widget out as far as it can go until something tells it to stop, then it will place the child element directly in the center. The alignment behavior really depends on the parent container. In our case, it's going to expand out until it hits the edge of the screen. There's a couple of other things you can do with containers as well. For example, you can explicitly set the width and the height. That's exactly what I've done to create this square box in the middle. And you can also apply a transform to a container. Could be a whole video on its own, but you can do the same things you can do in CSS, like rotate, skew, and scale. I'd also like to point out that Flutter has a bunch of alternative widgets instead of a container such as padding and align. And they're useful because a lot of times you won't need all the functionality of a container. If you only need to apply padding, you can just use Padding widget, and that will make your code more focused and readable. Now let's move on to what's probably the most important part of this video, flexible positioning. It allows you to align items and columns and rows, which takes care of the majority of the layouts that you'll see on most mobile apps. For example, if we wanted to rebuild this layout on Duolingo, we would start by defining a column. Then inside this column we can stack multiple widgets. In this case we'd start with a text widget and then we could add a row and then another row for the buttons at the bottom. And if you look closely at the middle row, you'll notice we have another column in there that stacks some additional text widgets on top of each other. So basically, we can nest columns and rows to build out complex UIs, and we can wrap any of these in their own container to fine tune their individual alignment and positioning. Let's look at some examples. The first thing we'll do is define a row and it will take an argument of children which is an array of widgets. In the case of a row, the widgets will flow from left to right horizontally. You'll notice the row takes up as much horizontal space as it possibly can. This is known as the main axis. So in the case of a row, the main axis will be the x axis. And a column is actually identical to a row. The only difference is the axis is flipped, so the main axis becomes the y axis. This is identical to how things work with CSS Flexbox. So if you're already comfortable with Flexbox, then you're already going to be comfortable with Flutter positioning just with a few name changes. So if we change our row to a column, you can see that now the items Flow from top to bottom and the extra space is along the y axis. There's really only a couple of options that you need to be familiar with. The first one is main axis size. By default, it will take up the maximum amount of space. But if you set this to min, then you can see that it only goes to the end of the child elements. Most of the actual alignment will be adjusted with the main axis alignment or the cross axis alignment. The main axis is similar to justify content in CSS, And the cross axis alignment is similar to align items. For example, if we use main axis alignment space between, It will push the children towards the edges and then try to maximize the space in between them. There's a lot of other options like space evenly, which will just maximize the space evenly throughout all the elements. We can always flip this to a row and you can see the only thing that changes is the axis of alignment. On the cross axis, the elements will be aligned in the middle by default. It helps if we have squares of different sizes. So you can see here that they're all aligned directly in the center, but what if we want these to be aligned at the start of the container? We can make that happen by setting the cross axis alignment to the start of the container. Or if we want to push them to the opposite side, we can set that to end. And one other cool thing you can do with the cross axis is set it to stretch and that will force the elements to expand across the entire available space. And one other thing I wanna point out is that columns and rows are just convenience widgets for the flex widget. If you use a flex widget, you can manually set the direction to either axis horizontal or axis vertical. So at this point, we've been controlling the flex behavior of the children via the parent row or column. But a lot of times, you'll need the actual child to define its flex behavior. To demonstrate this, I'm going to give our boxes different colors. And one of the most common use cases is when you have a set of widgets and you want one of those widgets to Expand to the available space and have the other widgets just be a fixed size. So, for example, we might want our last widget to fill up this available space while keeping the other ones the same size. We can easily do this by wrapping our widget in the expanded widget and this will tell it to flex to the available space. This is similar to the flex grow property in CSS. And this is actually a ratio that will be calculated based on the other sibling elements next to it. Currently, this is the only expanded widget, so it's just going to fill up all of the available space. But let's go ahead and wrap the middle square in the expanded widget as well. For now, we'll also set its flex property to 1. So since they're both set to 1, they'll evenly share the available space. But the thing to remember here is that the flex property is a ratio. So if we set flex 10 for the middle element and flex 1 for the last element, the middle element will take up 10 times more Space than the last one. In other words, we could fit 10 pink widgets inside of the blue widget. So Flexbox is awesome when working with 2 dimensional layouts, But sometimes you want things to overlap as if there was a third dimension to work with. For that, we're going to look at the Flutter stack, and a common use case might be something like a tooltip that gets positioned relative to a button but on top of the main view. You can compare stacks in Flutter roughly to absolute or fixed positioning in CSS. Let's go ahead and grab our existing column and convert it to a stack. You'll notice that it only displays one square and that's the red square which is the last one in the array. The other squares didn't disappear, they're just underneath the red square. The last element in the array gets the highest priority when being displayed. If we make the blue square last, then it's the one that gets displayed when we reload. Now that we have our elements in a stack, we need to align or position them. One way to do that is with the align widget, which allows us to place elements relative to the parent container in a perfect position. So it makes it really easy to center things. And if you don't wanna use the align widget, you can just use a container and set the alignment there. When When thinking about alignment, the middle is always going to be the 0 zero coordinate and you can control the alignment directly if the built in static methods aren't enough. For example, if we set it to negative one negative one it puts the blue square in the top left corner and if we were to set it to 0 it would be directly in the middle. But there's generally a better way to position things when you're working within a stack and that's with the positioned widget. This allows you to define specific values relative to the parent Container based on top, bottom, left, right. And one key difference that you'll notice is that position won't push the container element to the furthest bounds that it's allowed to go. So in order for position to work, you need to have a container that already has some free space available. So I'm wrapping the stack in a container and then I'm manually setting the height and width to be the size of the actual device height and width. From there, I'll go down to my position widgets and set the top and left properties. And now we can see the parts of the other squares that were hidden before. And now just like absolute position in CSS, we can move these boxes around wherever we want. So using a combination of containers, columns, rows, and stacks will take care of the vast majority of your layout needs in Flutter. Let's go ahead and bring everything together by running through a full example of a card you might build from scratch. There's already a material card built into Flutter, so this is kind of redundant, but it's a good example anyway. So we start with a container. And in that container, we'll give it some margin, padding, and we'll also give it a border and you could also add a box shadow here as well. So, basically, we're just adding styles to the box that will hold our column. Then in the column itself, we'll have the cross axis alignment set to stretch so it expands throughout the entire card. And main axis min will ensure that the column only expands to the content and not to the end of the viewport. Now if we add children to this container, they'll be stretched out across the horizontal axis that's how we get this purple rectangle here. And I didn't really talk about text in this video, but they have their own specific text styles that are also very similar to CSS. Now because we're inside of a column, these text widgets will be stacked on top of each other. The next thing we'll do is create another container and the child of this container will be a row. We want to display 3 buttons horizontally and we want the first button to be at the very left and the last button to be at the very right. So for that we can use main axis alignment space between. Then we'll just go ahead and drop a few of Flutter's built in buttons into this array, and they'll be perfectly spaced along the horizontal axis. So as you can see, once you're comfortable with Box, it becomes very easy to prototype out UIs, and most of your layouts should be responsive and be able to adapt to different viewport sizes. In future videos, I'd like to clone popular mobile app UIs like maybe Lyft or Instagram or maybe even Snapchat's redesign that everybody hates. So if you have any ideas, let me know in the comments. I'm gonna go ahead and wrap things up there. Look forward to more Flutter videos. Thanks for watching, and I will talk to you soon.
        