Building Layouts in Flutter with Layout Widgets
In this lesson we’ll learn about the main layout widgets you'll need when building your user interface in Flutter. We’ll take a look at Container, Center, Row, Column, Stack, & GridView widgets learn how they work.
Instructor: [00:02] To demonstrate layout, we'll begin with a very basic material app widget. The widget body will only return a text widget with the styling of a font size of 32. There are two main types of layout widgets in Flutter. Single child layout widgets, and multi-child layout widgets.
[00:23] The single child layout widgets we'll be looking at are container and center. The multi-child layout widgets we'll be going over are row, column, stack, and grid view. We'll start by looking at the container widget, a widget you'll use quite often when building your UI.
[00:54] The way you may think about a container widget is similar to the way you might use a view in React Native, or a div in HTML. We'll give the container a child of our text widget and pass in an alignment.
[01:30] Next, we'll give it some padding by using the edge insets class. Edge insets allows us to set offsets in the four main directions, top, left, bottom, and right. By using all, we're setting an equal padding for all four directions. Next, let's take a look at the center widget.
[02:03] The center widget will center the child within itself, both vertically and horizontally. Next, let's take a look at our first multi-child layout widget, a row. To do so, we'll replace the child of the center widget with a row widget.
[02:23] First, we'll pass an array of children to the row, and then we'll set a main axis alignment. There are two main types of alignment that you can pass to a row, the main axis alignment and the cross axis alignment.
[03:01] While a row lays its children out on the x-axis, a column lays its children out on the y-axis. When we refresh, we see our items laid out from top to bottom. Next, we'll take a look at the stack widget. Stack takes an array of children, which it lays out on the z-axis. Here, we'll pass in a container with a width, a height, and a background color.
[03:37] We'll then use our text widget as a second child in the array. Finally, we'll look at how to lay out items in a grid using the grid-view widget. First, I'll pass in an array of four children.
[04:14] Next, we'll pass in a grid delegate property, which will create a grid layout with a fixed number of tiles in a cross axis. I'll set the grid view to have two items in each row. Now, when we refresh, we see a grid view with two items in each row.