Learn

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!

Instructions

We’ve provided a bunch of Rows and Columns to play with. Feel free to modify the content and its alignment values to see what you can create!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?