Flutter Guide By Flutter Agency - Expanded Widget

Expanded Widget – Flutter Widget Guide By Flutter Agency

What is Expanded Widget?

Expanded Widget is a widget that expands a child of a Row Widget, Column Widget, or Flex so that the child fills the available space.

Why we need Expanded Widget ?

When a user wants to fill between widgets user can make use of this widget. For example, when you are working with Row Widget or Column Widget and using MainAxisAlignment.spaceBetween. It will leave a gap between children so, in order to fill the available space, we need it.

It will take over the dimension of a child along with the main axis of either Column Widget or Row Widget but the cross axis of the child not affected. For the column main axis is vertical and for the row main axis is horizontal. 

It has two important parameters.

  • Flex
  • Child

Flex: Flex parameter used to so that the expansion of widgets can be made controllable.

Child: Child parameter is used to hold another widget and when multiple children are expanded, the available space is divided using the Flex factor. 

Expanded with Column Widget 

Consider Column Widget as having three children as a Container Widget so our code snippet will look like below :

 Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            "1",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.indigo,
        ),
        Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            "This is Expanded",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.purple,
        ),
        Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            "2",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.indigo,
        ),
      ],
    );

Above code will generate output as below :

Without Expanded Column

without Expanded in a Column widget

Let’s wrap Container Widget with it so our code snippet will look like below :

 Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "1",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.indigo,
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "This is Expanded",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.purple,
          ),
        ),
        Expanded(
            child: Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "2",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.indigo,
            )),
      ],
    );

Expand-Column

with Expanded 

 Our code snippet will look like below :

 Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 2,
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "1",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.indigo,
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "This is Expanded",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.purple,
          ),
        ),
        Expanded(
            flex: 4,
            child: Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                "2",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.indigo,
            )),
      ],
    );

We will output like below :

Column-Expanded

Expanded width with Flex

Expanded with Row Widget 

Take a simple example of Row Widget having three children as Container Widget.

Code Snippet :

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            "1",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.indigo,
        ),
        Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            "This is Expanded",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.purple,
        ),
        Container(
          padding: EdgeInsets.all(20.0),
          child: Text(
            "2",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.indigo,
        ),
      ],
    );

Our output will look like below :

Without-Expanded-Row

without Expanded 

Our final code snippet will look like below :

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "1",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.indigo,
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "This is Expanded",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.purple,
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "2",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.indigo,
          ),
        ),
      ],
    );

Row-Expanded

with Expanded 

 Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          flex: 2,
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "1",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.indigo,
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "This is Expanded",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.purple,
          ),
        ),
        Expanded(
          flex: 4,
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              "2",
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            color: Colors.indigo,
          ),
        ),
      ],
    );

Above code will generate output as below :

Row-Exapanded

with Expanded and flex

Key Notes :

  1. It has to be a child of a Flex widget otherwise the app will crash. Row widget and Column widget are both extend Flex widget so they count.
  2. If Row widget or Column widget has unbound size on its MainAxis then using it will cause problems.

Thanks for being with us !!!

FlutterAgency serves as a premier online hub specifically tailored for Flutter technology and its developer community. This platform is rich in resources for Flutter enthusiasts, offering a comprehensive Flutter Widget Guide, a variety of Flutter Projects, an array of Code Libraries, and more.

Recognized as a leading destination for those interested in Flutter, FlutterAgency attracts thousands of unique visitors daily who are eager to expand their understanding and skills in Flutter technology.

Nirali Patel

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.

Leave a comment

Your email address will not be published. Required fields are marked *


ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on