Expanded and Flexible in Flutter - Mini App: Build & Ship

Build: Expanded and Flexible Demo

This screen demonstrates how to use Expanded and Flexible widgets to control space distribution in a Row layout.

Target UI

--------------------------------
| [Red Box] [Green Box] [Blue Box] |
|                                |
| Red box takes 2 parts of space  |
| Green box takes 1 part          |
| Blue box takes 1 part flexible  |
--------------------------------

Create a Row with three colored containers: red, green, and blue.

Wrap the red container in Expanded with flex: 2.

Wrap the green container in Expanded with flex: 1.

Wrap the blue container in Flexible with flex: 1.

Each container should have a height of 100 pixels.

Add a text label inside each container showing its color name.

Use padding of 8 pixels around each container.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ExpandedFlexibleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Expanded and Flexible Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            // TODO: Add red container wrapped in Expanded with flex 2
            // TODO: Add green container wrapped in Expanded with flex 1
            // TODO: Add blue container wrapped in Flexible with flex 1
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class ExpandedFlexibleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Expanded and Flexible Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            Expanded(
              flex: 2,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 100,
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text('Red', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 100,
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: Text('Green', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                ),
              ),
            ),
            Flexible(
              flex: 1,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 100,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text('Blue', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

We use a Row to place three colored boxes side by side. The Expanded widget tells Flutter to fill available horizontal space. The red box uses flex: 2, so it takes twice as much space as the green box with flex: 1. The blue box uses Flexible with flex: 1, which means it can shrink if needed but tries to take equal space as the green box. Padding adds space around each box, and the text labels help identify each color. This layout shows how Expanded and Flexible control space distribution in a row.

Final Result

Completed Screen

--------------------------------
| [      Red Box       ] [Green] [Blue] |
|                                |
| Red box is twice as wide as green and blue |
| Green and blue boxes share equal space       |
--------------------------------

The user sees three colored boxes horizontally aligned.

Red box is wide, green and blue boxes are smaller but equal width.

Text labels inside each box show their color names.

Stretch Goal

Add a toggle button in the AppBar to switch the blue box between Flexible and Expanded.

💡 Hint

Use a StatefulWidget and a boolean to switch the blue box's wrapper between Flexible and Expanded on button press.

Practice

1. What does the Expanded widget do inside a Row or Column in Flutter?

easy

A. It makes the child widget scrollable.

B. It makes the child widget ignore available space and keep its size.

C. It makes the child widget fill all the available space tightly.

D. It adds padding around the child widget.

Solution

1. Step 1: Understand Expanded behavior

   The Expanded widget forces its child to fill the available space tightly inside a Row or Column.

2. Step 2: Compare with other options

   Other options describe unrelated behaviors like padding or scrolling, which Expanded does not do.

3. Final Answer:

   It makes the child widget fill all the available space tightly. -> Option C

4. Quick Check:

   Expanded = fills space tightly [OK]

Hint: Expanded fills space tightly inside Row or Column [OK]

Common Mistakes:

• Confusing Expanded with Flexible
• Thinking Expanded adds padding
• Assuming Expanded makes widget scrollable

2. Which of the following is the correct syntax to use Flexible with a child widget in Flutter?

easy

A. Flexible(child: Text('Hello'))

B. Flexible(Text('Hello'))

C. Flexible = Text('Hello')

D. Flexible: Text('Hello')

Solution

1. Step 1: Recall Flexible widget syntax

   The correct syntax requires the child widget passed as a named parameter: Flexible(child: ...).

2. Step 2: Identify incorrect syntax

   Options B, C, and D miss the named parameter or use invalid assignment syntax.

3. Final Answer:

   Flexible(child: Text('Hello')) -> Option A

4. Quick Check:

   Flexible uses child: parameter [OK]

Hint: Flexible requires child: parameter for its widget [OK]

Common Mistakes:

• Omitting child: label
• Using assignment instead of constructor
• Passing child without parentheses

3. Consider this Flutter code inside a Row:

Row(
  children: [
    Expanded(child: Container(width: 50, color: Colors.red)),
    Expanded(flex: 2, child: Container(width: 50, color: Colors.blue)),
  ],
)

What will be the relative widths of the red and blue containers on screen?

medium

A. Red fills 1/3, blue fills 2/3 of the row width

B. Red fills half the row, blue fills the other half

C. Red and blue both have fixed width 50 pixels

D. Red fills all space, blue is ignored

Solution

1. Step 1: Understand Expanded and Expanded with flex

   Expanded takes available space tightly with default flex=1. Expanded(flex:2) takes twice the space tightly.

2. Step 2: Calculate relative widths

   Total flex = 1 (first Expanded) + 2 (second Expanded) = 3. Red gets 1/3, blue gets 2/3 of the row width. The width: 50 is overridden by the tight constraints.

3. Final Answer:

   Red fills 1/3, blue fills 2/3 of the row width -> Option A

4. Quick Check:

   Flex ratio 1:2 means widths 1/3 and 2/3 [OK]

Hint: Sum flex values, divide space proportionally [OK]

Common Mistakes:

• Ignoring flex values
• Thinking width property overrides flex
• Assuming equal widths without flex

4. This Flutter code throws an error. What is the problem?

Row(
  children: [
    Flexible(flex: 1),
    Container(color: Colors.green),
  ],
)

medium

A. flex property must be greater than 1.

B. Container cannot be inside a Row.

C. Row requires at least three children.

D. Flexible widget is missing a child widget.

Solution

1. Step 1: Check Flexible widget usage

   Flexible requires a child widget to display. Here, it is missing.

2. Step 2: Validate other options

   Container can be inside Row, flex can be 1, and Row can have any number of children.

3. Final Answer:

   Flexible widget is missing a child widget. -> Option D

4. Quick Check:

   Flexible must have child [OK]

Hint: Flexible always needs a child widget [OK]

Common Mistakes:

• Omitting child in Flexible
• Thinking flex must be >1
• Assuming Row needs 3 children

5. You want two buttons side by side in a Row. The first button should take 1/4 of the width, the second button 3/4. Which Flutter widget setup achieves this best?

hard

A. Row(children: [Expanded(child: Button1), Expanded(child: Button2)])

B. Row(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)])

C. Row(children: [Button1, Button2]) with fixed widths

D. Column(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)])

Solution

1. Step 1: Understand flex distribution in Row

   Using Flexible with flex values 1 and 3 divides the Row width into 4 parts, assigning 1/4 and 3/4 respectively.

2. Step 2: Evaluate other options

   Row(children: [Expanded(child: Button1), Expanded(child: Button2)]) gives equal widths (1/2 each). Row(children: [Button1, Button2]) with fixed widths is less flexible. Column(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)]) uses Column, which stacks vertically, not side by side.

3. Final Answer:

   Row(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)]) -> Option B

4. Quick Check:

   Flexible flex ratio 1:3 divides width correctly [OK]

Hint: Use Flexible with flex ratio matching desired width parts [OK]

Common Mistakes:

• Using Expanded for unequal widths
• Using Column instead of Row
• Setting fixed widths instead of flex