Expanded Widget – Flutter Widget Guide By Flutter Agency

· 7 min read
Flutter Guide By Flutter Agency - Expanded Widget
Flutter Guide By Flutter Agency - Expanded Widget

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.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply