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!