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.