Learn

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, and it uses the following syntax:

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:

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 (or Column or Container) widget, we remove const from in front of our MaterialApp. Change:

runApp( const MaterialApp(

To:

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!

Instructions

We’ve declared some Icon variables. Let’s place them in a Row!

  1. Remove the const from in front of the MaterialApp constructor.
  2. Create a Row object as the body attribute of the Scaffold widget.
  3. Set the icons as elements of Row’s children list.
  4. Press the blue Run button.
Hint for Step 1

Change:

runApp( const MaterialApp(

To:

runApp( MaterialApp(
Hint for Step 2

Add a body attribute to the Scaffold widget and set it to the Row. Similar to:

Scaffold( body: Text('Codecademy: Flutter Edition') )
Hint for Step 3

The Row constructor should look similar to the following:

Row( children: const [ Text('Hello'), Text('World!') ] )

Except use the iconX variables in place of the Text widgets.

Solution

The call to runApp should look like:

runApp(MaterialApp( home: Scaffold( body: Row( children: [icon1, icon2, icon3] ) ) ));

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?