Install the Flutter SDK & Create Your First Project

Flutter Project Walkthrough

Run a Flutter App on iOS

Run a Flutter App on Android

Walkthrough of the Default Flutter Application Boilerplate

Style a Flutter Text and Container Widget

Using Themes in Flutter to Share Colors and Font Styles

Load an Image in a Flutter App with the Image Class

Building Layouts in Flutter with Layout Widgets

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

Creating & Updating State in a Flutter Application

Getting Started with Navigation in Flutter

Building Dynamic Lists in Flutter with ListViews

Navigation with Named Routes in Flutter

Getting Started with Flutter

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.

Course

Getting Started with Flutter

Building Layouts in Flutter with Layout Widgets

Share this video with your friends