Expanded Widget

What is Expanded Widget?

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space along the flex widgets main axis.

To cause a child to expand to fill the available horizontal space, wrap the child in an [Expanded] widget.

Expanded objects inherits material behavior, so you must place inside the Material widget and MaterialApp

Expand to fill the available space horizontally for a Row or vertically for a Column widgets.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column).

02 Default Constructor

The default constructor creates a widget that expands a child of a Row, Column, or Flex.

Expanded(
        flex: 1,// defaults to 1
        child: // Assign a child widget here
    ),

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The flex parameter is to define the amount of space the child's can occupy.

The child parameter is to add the child widget below the OffStage widget in a tree.

Code snippet

The following code snippet shows how to configure Expanded widget.

Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
        );

Demo Code

This example shows how to use an Expanded widget in a Column so that it's middle child, expands to fill the space.

import 'package:flutter/material.dart';

class ExpandedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Return Material widget
    return Material(
        child: Center(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
    ));
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // MaterialApp Widget
    return MaterialApp(
      title: 'Expanded Demo',
      home: ExpandedDemo(),
    );
  }
}

void main() => runApp(MyApp());