Flutter Expanded Widget

Making widgets fill available space

📏 What is Expanded?

Expanded is a Flutter widget that makes a child widget fill available space within a Row, Column, or Flex. It helps distribute space proportionally among multiple widgets, making responsive layouts easy. 


// Simple Expanded example
Row(
  children: [
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Output:

Key Expanded Concepts

📐

Fill Space

Expands to fill available space 

Expanded(
  child: Container(),
)
⚖️

Flex Factor

Control proportional sizing 

Expanded(
  flex: 2,
  child: Container(),
)
📊

Multiple Widgets

Distribute space among children 

Row(children: [
  Expanded(child: Widget1()),
  Expanded(child: Widget2()),
])
🎯

Responsive

Adapts to screen sizes 

Column(children: [
  Expanded(child: Content()),
])

🔹 Basic Expanded Usage

Use Expanded to make a widget fill available space: 

import 'package:flutter/material.dart';

class ExpandedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Expanded Example')),
      body: Row(
        children: [
          Container(
            width: 100,
            color: Colors.red,
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Center(child: Text('I fill the rest!')),
            ),
          ),
        ],
      ),
    );
  }
}

Output:

I fill the rest!

🔹 Using Flex Property

Control how much space each Expanded widget takes: 

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        child: Center(child: Text('1/4')),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('3/4')),
      ),
    ),
  ],
)

Output:

1/4
3/4

🔹 Expanded in Column

Expanded works vertically in Column widgets: 

Column(
  children: [
    Container(
      height: 100,
      color: Colors.green,
      child: Center(child: Text('Fixed Height')),
    ),
    Expanded(
      child: Container(
        color: Colors.orange,
        child: Center(child: Text('Fills Remaining')),
      ),
    ),
    Container(
      height: 100,
      color: Colors.purple,
      child: Center(child: Text('Fixed Height')),
    ),
  ],
)

Output:

Fixed Height
Fills Remaining
Fixed Height

🔹 Multiple Expanded Widgets

Distribute space equally among multiple widgets: 

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        child: Center(child: Text('1')),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        child: Center(child: Text('2')),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('3')),
      ),
    ),
  ],
)

Output:

1
2
3

🧠 Test Your Knowledge

What does the Expanded widget do?