Column and Row in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical layout using Flutter's widget.

Flutter

Column(
  children: [
    Text('Hello'),
    Text('World'),
  ],
  mainAxisAlignment: [1],
)

Drag options to blanks, or click blank then click option'

AMainAxisSize.min

BCrossAxisAlignment.end

CCrossAxisAlignment.start

DMainAxisAlignment.center

Attempts:

3 left

💡 Hint

Common Mistakes

Using CrossAxisAlignment instead of MainAxisAlignment for vertical alignment.

Using MainAxisSize instead of MainAxisAlignment.

The mainAxisAlignment property controls vertical alignment in a Column. Using MainAxisAlignment.center centers the children vertically.

2fill in blank

medium

Complete the code to create a horizontal layout with evenly spaced children.

Flutter

Row(
  mainAxisAlignment: [1],
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

Drag options to blanks, or click blank then click option'

AMainAxisAlignment.start

BMainAxisAlignment.spaceEvenly

CCrossAxisAlignment.center

DMainAxisAlignment.end

Attempts:

3 left

💡 Hint

Common Mistakes

Using CrossAxisAlignment for horizontal spacing.

Using MainAxisAlignment.start which aligns children to the start only.

MainAxisAlignment.spaceEvenly places equal space between all children and edges in a Row, creating an even horizontal layout.

3fill in blank

hard

Fix the error in the code to align children to the start of the cross axis in a Column.

Flutter

Column(
  crossAxisAlignment: [1],
  children: [
    Text('One'),
    Text('Two'),
  ],
)

Drag options to blanks, or click blank then click option'

AMainAxisAlignment.center

BCrossAxisAlignment.center

CCrossAxisAlignment.start

DMainAxisAlignment.start

Attempts:

3 left

💡 Hint

Common Mistakes

Using MainAxisAlignment instead of CrossAxisAlignment for horizontal alignment.

Using CrossAxisAlignment.center which centers children horizontally.

The crossAxisAlignment property controls horizontal alignment in a Column. Use CrossAxisAlignment.start to align children to the start horizontally.

4fill in blank

hard

Fill both blanks to create a Row that centers children vertically and spaces them evenly horizontally.

Flutter

Row(
  mainAxisAlignment: [1],
  crossAxisAlignment: [2],
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
  ],
)

Drag options to blanks, or click blank then click option'

AMainAxisAlignment.spaceEvenly

BCrossAxisAlignment.center

CMainAxisAlignment.start

DCrossAxisAlignment.end

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up mainAxisAlignment and crossAxisAlignment properties.

Using CrossAxisAlignment.start which aligns children to top vertically.

MainAxisAlignment.spaceEvenly spaces children evenly horizontally in a Row. CrossAxisAlignment.center centers children vertically.

5fill in blank

hard

Fill all three blanks to create a Column with children aligned to the end horizontally, spaced at the start vertically, and with minimal main axis size.

Flutter

Column(
  crossAxisAlignment: [1],
  mainAxisAlignment: [2],
  mainAxisSize: [3],
  children: [
    Text('A'),
    Text('B'),
  ],
)

Drag options to blanks, or click blank then click option'

ACrossAxisAlignment.end

BMainAxisAlignment.start

CMainAxisSize.min

DCrossAxisAlignment.center

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing CrossAxisAlignment and MainAxisAlignment values.

Using MainAxisSize.max instead of MainAxisSize.min.

CrossAxisAlignment.end aligns children to the right horizontally in a Column. MainAxisAlignment.start aligns children to the top vertically. MainAxisSize.min makes the Column take minimal vertical space.

Practice

1. What does the Column widget do in Flutter?

easy

A. Arranges child widgets vertically

B. Arranges child widgets horizontally

C. Stacks child widgets on top of each other

D. Creates a scrollable list of widgets

Solution

1. Step 1: Understand the purpose of Column

   The Column widget arranges its children in a vertical direction, one below the other.

2. Step 2: Compare with other widgets

   Row arranges children horizontally, Stack overlays them, and ListView scrolls.

3. Final Answer:

   Arranges child widgets vertically -> Option A

4. Quick Check:

   Column = vertical layout [OK]

Hint: Column means vertical layout, Row means horizontal [OK]

Common Mistakes:

• Confusing Column with Row
• Thinking Column stacks widgets
• Assuming Column scrolls automatically

2. Which of the following is the correct syntax to create a Row with two Text widgets in Flutter?

easy

A. Row(children: Text('Hello'), Text('World'))

B. Row(children: [Text('Hello'), Text('World')])

C. Row(child: Text('Hello'), Text('World'))

D. Row([Text('Hello'), Text('World')])

Solution

1. Step 1: Check Row constructor parameters

   Row requires a named parameter children which is a list of widgets.

2. Step 2: Validate each option

   Row(children: [Text('Hello'), Text('World')]) uses children: [Text('Hello'), Text('World')] correctly. Others misuse parameters or omit the list.

3. Final Answer:

   Row(children: [Text('Hello'), Text('World')]) -> Option B

4. Quick Check:

   Row needs children list [OK]

Hint: Use children: [widget1, widget2] for Row and Column [OK]

Common Mistakes:

• Using child instead of children
• Not wrapping widgets in a list
• Passing widgets without parameter name

3. What will be the visual output of this Flutter code?

Column(
  children: [
    Text('A'),
    Row(
      children: [Text('B'), Text('C')],
    ),
    Text('D'),
  ],
)

medium

A. A vertical list: A, B, C, D all stacked vertically

B. A horizontal list: A, B, C, D all side by side

C. A vertical list: A, then B and C side by side, then D below

D. An error because Row inside Column is not allowed

Solution

1. Step 1: Analyze the Column layout

   The Column arranges its children vertically: Text('A'), then a Row, then Text('D').

2. Step 2: Analyze the Row inside Column

   The Row arranges its children horizontally: Text('B') and Text('C') side by side.

3. Final Answer:

   A vertical list: A, then B and C side by side, then D below -> Option C

4. Quick Check:

   Column vertical + Row horizontal = mixed layout [OK]

Hint: Column stacks vertically, Row stacks horizontally inside it [OK]

Common Mistakes:

• Thinking Row inside Column causes error
• Assuming all texts are horizontal
• Ignoring nested Row layout

4. Identify the error in this Flutter code snippet:

Row(
  children: Text('Hello'),
)

medium

A. children should be a list of widgets, not a single widget

B. Row cannot have Text widgets as children

C. Missing comma after Text widget

D. Row requires a child parameter, not children

Solution

1. Step 1: Check the children parameter type

   The children parameter expects a list of widgets, but here it is given a single Text widget without list brackets.

2. Step 2: Understand correct syntax

   It should be children: [Text('Hello')] to be valid.

3. Final Answer:

   children should be a list of widgets, not a single widget -> Option A

4. Quick Check:

   children = list of widgets [OK]

Hint: Always wrap children widgets in square brackets [OK]

Common Mistakes:

• Passing single widget without list
• Confusing child and children
• Forgetting brackets around children

5. You want to create a layout with three buttons arranged horizontally, each spaced evenly across the screen width. Which Flutter widget combination is best to achieve this?

hard

A. Use a Stack with Positioned widgets for each button

B. Use a Column with MainAxisAlignment.spaceEvenly and three ElevatedButton children

C. Use a Row with CrossAxisAlignment.stretch and three ElevatedButton children

D. Use a Row with MainAxisAlignment.spaceEvenly and three ElevatedButton children

Solution

1. Step 1: Understand horizontal arrangement

   Row arranges children horizontally, which fits the requirement for buttons side by side.

2. Step 2: Use MainAxisAlignment.spaceEvenly

   This property spaces children evenly along the main axis (horizontal for Row), distributing buttons evenly.

3. Step 3: Evaluate other options

   Column arranges vertically, CrossAxisAlignment.stretch stretches vertically, Stack overlays widgets which is not desired.

4. Final Answer:

   Use a Row with MainAxisAlignment.spaceEvenly and three ElevatedButton children -> Option D

5. Quick Check:

   Row + spaceEvenly = evenly spaced horizontal buttons [OK]

Hint: Row + spaceEvenly spaces widgets horizontally evenly [OK]

Common Mistakes:

• Using Column for horizontal layout
• Confusing main and cross axis alignment
• Using Stack for simple horizontal layout