ENDS 12/4: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


This lesson will cover the basic of organizing content in Flutter applications. Topics covered include single and multi-child layout widgets such as:

* Center
* Align
* Row
* Column


Layout Widgets

We've learned how to align content in a layout component's main axis, but content exists in two dimensions. How do we align our content in both horizontal and vertical space?

In addition to `mainAxisAlignment`, Rows and Columns also have a `crossAxisAlignment` parameter. For Rows, this controls how content is aligned in the vertical axis, and for Columns, this controls the horizontal.

`crossAxisAlignment` has values similar to its main axis counterpart:

* `CrossAxisAlignment.start`
* `CrossAxisAlignment.end`
* `CrossAxisAlignment.stretch`
* and more!

To apply the parameter we use syntax like the following:

```dart
Column(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: const [
     Text(
       'Hello',
     ),
     Text(
       'World!',
     )
   ],
)
```

It can be difficult to see the effects of `crossAxisAlignment` when elements are the same size, but with different sizes it becomes much clearer. Let's try it out!

Cross-Axis Alignment

We’ve learned how to create a basic app containing text. However, we often want to organize our app’s content on the screen. We will next introduce **layout widgets**, which change how content inside our apps is arranged.

Layout widgets enable us to control where content is displayed: in the center, off to the side, in rows, or columns. They play a central role in making our app look nice and organized.

There are two types of layout widgets:

* **Single-child layout widgets**: affect the layout of a single widget. These include Center and Align.
* **Multi-child layout widgets**: affect the layout of multiple widgets. These include Row and Column.

When we last left off, we had one widget in our app. In the next exercise, we will start with a single-child layout widget.

Introduction to Layout Widgets

We've learned how to place a single widget in a variety of ways, but an app rarely consists of a single Icon. How can we organize multiple widgets in our applications?

Multi-Child layout widgets allow us to organize multiple widgets at a time within our application. In the next two exercises we will focus on two common multi-child layout widgets:

* Row
* Column

We will often want to organize some of our application elements horizontally. This is the purpose of the **[Row widget](https://api.flutter.dev/flutter/widgets/Row-class.html)**, and it uses the following syntax:

```dart
Row(
    children: const [Widgets],
)
```

The `children` parameter enables us to specify a list of child widgets that require alignment. Note that this allows multiple widgets to be placed within the brackets:

```dart
Row(
   children: const [
     Text('Left'),
     Text('Right!')
   ]
 )

```

One important thing to note is that some widgets do not have a `const` constructor. That means that their parent widgets cannot use a `const` constructor as well. So when we use the Row, Column, or Container widget, we remove `const` from in front of our MaterialApp. Change:

```dart
runApp(
  const MaterialApp(
```

To:

```dart
runApp(
  MaterialApp(
```

This can be a bit confusing, but our Flutter IDE will warn us when we encounter this problem, telling us when and when not to use a `const` constructor.


Let's practice using Rows in our apps!


Row Widgets

What happens if we make a Row or Column contain content that won't fit in our screen?

Although Flutter provides some layout widgets that include scrolling, Row and Column widgets do not.

For example, the ListView widget allows developers to display a vertical or horizontal list of child widgets (like Row and Column widgets). However, if the content is wider or taller than the available area (i.e. an overflow occurs) then this widget allows the user to scroll, whereas Rows and Columns don't.

When an overflow occurs on a non-scrolling layout widget, Flutter displays yellow and black diagonal lines. These ugly lines tell us to amend our layout to provide more room or use scrolling widgets instead.



Row and Column Overflow

The **[Align widget](https://api.flutter.dev/flutter/widgets/Align-class.html)** is another single-child layout widget that is a more flexible alternative to Center. It allows a widget to be aligned in a variety of ways using an `alignment` property.

The Align widget uses the following syntax:

```dart
Align(
    alignment: Alignment.type,
    child: Widget,
 )
```

The `alignment` parameter enables us to specify *how* we want the child widget aligned. Flutter provides us with the following constants including:

* `Alignment.topLeft`
* `Alignment.centerRight`
* `Alignment.bottomCenter`
* `Alignment.bottomRight`
* And more!

The `child` parameter enables us to specify the `child` widget that requires alignment. For example:

```dart
Align(
  alignment: Alignment.topRight,
  child: Text("In the top right")
)
```

Let's edit our code and replace the Center widget with an Align widget.


Align Widgets


We often will want to have our content centered, appearing in the middle of its parent element. The **[Center widget](https://api.flutter.dev/flutter/widgets/Center-class.html)** is a single-child layout widget made for this purpose. The Center widget makes a child widget appear in the center of its available area. 

The Center widget uses the following syntax:

```dart
Center(
    child: Widget
)
```

The `child` property allows us to specify the child widget we want to center. The Center widget is a single-child widget so only one widget can go here.

Let's look at an example centering a Text widget:

```dart
  Center (
    child: Text(
      'Hello, world!'
    )
  )
```

Notice that the Text widget has been added as an argument to the Center widget. It is surrounded by the parentheses of the Center widget.

Let's try it out.

Center Widgets

Often we will want to change the way our content within a Row or Column is displayed. We might want everything shifted to the left, the right, or spread out. Flutter makes this simple to do.

Both Row and Column widgets have a `mainAxisAlignment` property. For Rows, this controls how the items take up the horizontal space. For columns, it controls the vertical space.

Flutter provides us [with constants for `mainAxisAlignment`](https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html), including:

* `MainAxisAlignment.center`
* `MainAxisAlignment.spaceEvenly`
* `MainAxisAlignment.end`

We can set the `mainAxisAlignment` for a Row or Column by adding it as an attribute:

```dart
Column(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: const [
     Text(
       'Hello',
     ),
     Text(
       'World!',
     )
   ],
)
```

Let's try it out.



Row and Column Alignment

The **[Column widget](https://api.flutter.dev/flutter/widgets/Column-class.html)** is just like the Row widget, except that it was designed to help us lay out multiple child widgets vertically, not horizontally. 

The syntax for creating a column is very similar to the Row widget:

```dart
Column(
    children: const [Widgets],
)
```

For example:

```dart
Column(
   children: const [
     Text('Top'),
     Text('Bottom!')
   ]
 )
```

Let's try it out!

Column Widgets

Let’s review what we learned about layout widgets:

Layout widgets are used to control how child (or children) widgets are laid out visually. In this lesson, we learned about two types of layout widgets: single and multi-child. A single-child layout widget organizes one widget, while a multi-child layout widget can organize several.

#### Center

A Center widget can take a `child` Widget (say some Text) and lay it out so it appears centered on the screen.

```dart
Center (
  child: Text(
    'Hello, world!'
  )
)
```

#### Align

An Align widget is a more flexible version of the Center widget. Its `alignment` property can be used to align its `child` widget in multiple ways. 

```dart
Align(
  alignment: Alignment.topRight,
  child: Text("In the top right")
)
```

#### Row

A Row widget is a multi-child layout widget designed to organize content in a horizontal row.

```dart
Row(
   children: const [
     Text('Left'),
     Text('Right!')
   ]
)
```

#### Column

Similar to Row widgets, a Column widget allows us to arrange multiple pieces of content in a vertical space.

```dart
Column(
   children: const [
     Text('Top'),
     Text('Bottom!')
   ]
 )
```

#### Alignment

Row and Column allow us to align items within them using the `mainAxisAlignment` and `crossAxisAlignment` properties. These properties allow us to center, move content to the left or right, or spread content evenly throughout the page.

#### Overflow

Row and Column don't support scrolling. So when content is too wide or long, it gets cut off and black and yellow lines appear. Different widgets must be used if the content needs to scroll.

That's it for this lesson, in future lessons, we will learn more complex ways to modify our widgets!