Column and Row in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code snippet?

Consider this Flutter widget tree:

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

How will the texts be arranged on the screen?

Flutter

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

A Texts A and D arranged vertically, with B and C arranged horizontally between them.

B Texts A, B, C, D arranged vertically in a single column.

C Texts A, B, C, D arranged horizontally in a single row.

D Texts A and D arranged horizontally, with B and C arranged vertically between them.

💡 Hint

Remember that Column arranges children vertically and Row arranges children horizontally.

The Column arranges its children vertically: first Text('A'), then the Row containing Text('B') and Text('C') horizontally side by side, then Text('D') below. So B and C appear side by side horizontally between A and D vertically.

📝 Syntax

intermediate

Which option will cause a syntax error in Flutter layout code?

Identify the Flutter code snippet that will cause a syntax error when used inside a widget tree.

A Column(children: [Text('M'), Text('N')])

B Row(children: [Text('X'), Text('Y')])

C Column(children: Text('Z'))

D Row(children: [Text('P')])

💡 Hint

Check the type expected for the children property.

The children property expects a list of widgets (List<Widget>). Option C provides a single widget instead of a list, causing a syntax error.

❓ lifecycle

advanced

What happens if you nest multiple Columns inside a Row with unbounded width?

Consider a Row widget containing several Column widgets, each with many children. What is the likely runtime behavior?

Flutter

Row(
  children: [
    Column(children: List.generate(50, (i) => Text('Item $i'))),
    Column(children: List.generate(50, (i) => Text('Item $i'))),
  ],
)

A The app will throw a layout overflow error because Row has unbounded width and Columns try to expand infinitely.

B The app will crash with a null pointer exception.

C The app will automatically wrap Columns to the next line to avoid overflow.

D The app will render all items without issues, scrolling horizontally if needed.

💡 Hint

Think about how Row and Column handle constraints and available space.

A Row provides unbounded horizontal space to its children. The Column widgets try to expand vertically but have no horizontal limit, causing layout overflow errors when their combined width exceeds the screen.

❓ navigation

advanced

How to make a Row with equally spaced children that respond to taps?

You want a Row with three buttons spaced evenly across the screen width. Which code snippet achieves this with proper tap handling?

A

Row(children: [
  ElevatedButton(onPressed: () {}, child: Text('One')),
  ElevatedButton(onPressed: () {}, child: Text('Two')),
  ElevatedButton(onPressed: () {}, child: Text('Three')),
])

B

Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
  ElevatedButton(onPressed: () {}, child: Text('One')),
  ElevatedButton(onPressed: () {}, child: Text('Two')),
  ElevatedButton(onPressed: () {}, child: Text('Three')),
])

C

Row(mainAxisAlignment: MainAxisAlignment.center, children: [
  ElevatedButton(onPressed: () {}, child: Text('One')),
  ElevatedButton(onPressed: () {}, child: Text('Two')),
  ElevatedButton(onPressed: () {}, child: Text('Three')),
])

D

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
  ElevatedButton(onPressed: null, child: Text('One')),
  ElevatedButton(onPressed: null, child: Text('Two')),
  ElevatedButton(onPressed: null, child: Text('Three')),
])

💡 Hint

Check the mainAxisAlignment property and whether buttons are enabled.

Option B uses spaceEvenly to space buttons evenly and provides non-null onPressed callbacks so buttons respond to taps.

🔧 Debug

expert

Why does this Flutter layout cause a vertical overflow error?

Analyze the code below and identify the cause of the vertical overflow error when rendered on a small screen.

Column(
  children: [
    Expanded(child: ListView(children: [Text('Item 1'), Text('Item 2')])),
    Container(height: 100, color: Colors.blue),
  ],
)

Flutter

Column(
  children: [
    Expanded(child: ListView(children: [Text('Item 1'), Text('Item 2')])),
    Container(height: 100, color: Colors.blue),
  ],
)

A The ListView inside Expanded tries to take infinite height, conflicting with the fixed height Container.

B The Column widget does not support Expanded children, causing overflow.

C The ListView should be wrapped in a SingleChildScrollView to avoid overflow.

D The Container's fixed height causes the Column to exceed screen height because Expanded takes all remaining space, leaving no room for Container.

💡 Hint

Consider how Expanded and fixed height widgets share space inside a Column.

The Expanded widget takes all remaining vertical space after other children are laid out. Since the Container has a fixed height of 100, the Expanded ListView tries to fill the rest. On small screens, this can cause the total height to exceed the screen, causing overflow.