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.

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.

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.

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.

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!