Flutter Expanded Widget

How to separate the screen equally in flutter is a question everyone having there are many approches you can follow like Expanded widget, Flexible widget and so on. In this tutorial we are discussing about the Expanded widgets and how to use it in a Column widget and Row widget.

Following is Two widgets inside a Row widget. So how to expand those widgets inside a row can be done using Expanded widget as follows.

Without using expanded widgets.

With using Expanded widget for the above Example.

In Expanded Widgets there are three types of attributes you can use as follows

Expanded({
  Key key,
  int flex = 1,
  @required Widget child,
})

• Key is to identify the widget
• Flex is to indicate the screen ratio which that widget is acquired
• Child is the widget that is to wrapped inside the Expanded widget

Using Expanded Widget inside a Row Widget

Let’s use a Row widget with three Text widgets and let’s look at the output given by the interface.

Row(
  children: <Widget>[
    Text("One"),
    Text("Two"),
    Text("Three"),
  ],
),

Preview of the above code

The Text widgets take the space they need and keep the remaining space freely. How to use the all space effectively? Okay! Then you have to use Expanded widget as follows

Row(
  children: <Widget>[
    Expanded(
      child: Text("One"),
    ),
    Expanded(
      child: Text("Two"),
    ),
    Expanded(
      child: Text("Three"),
    ),
  ],
),

Preview of the above code

What Expanded widget do is take the remaining space and divide that space among the Expanded widgets mentioned. Let’s see how it will expand when there is a non Expanded widgets in between as follows.

Row(
  children: <Widget>[
    Expanded(
      child: Text("One"),
    ),
    Text("Two"),
    Expanded(
      child: Text("Three"),
    ),
  ],
),

Then what it does is allocate the space for the non Expanded widget and share the remaining space among the Expanded widgets as follows.

Preview of the above code

Using the Expanded widget you can divide the screen using ratios using flex attribute as follows.

Row(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Text("One"),
    ),
    Expanded(
      flex: 2,
      child: Text("Two"),
    ),
    Expanded(
      flex: 3,
      child: Text("Three"),
    ),
  ],
),

What is does is it takes the remaining space and get all the flex values and sum it up(If the flex value is not mentioned it takes as 1) and divide as the values. As an example in above code the sum of the flex value is 6 and then first widget take 1/6 of the screen as it mentioned the flex values as 1 and second widget take 2/6 and third take 3/6 as follows.

Preview of the above code

Using Expanded widget inside a Column widget

When we use Expanded widget inside a Column Widget it take the screen height as the available space and divide the space as it does in Row Widget.

When it have all Expanded widgets without mentioning the flex it take the whole screen and divide it equally

Column(
  children: <Widget>[
    Expanded(
      child: Text("One"),
    ),
    Expanded(
      child: Text("Two"),
    ),
    Expanded(
      child: Text("Three"),
    ),
  ],
),

Preview of the above code

When it have all Expanded widgets with mentioning the flex it take the whole screen and divide it as mentioned in the flex attribute as follows.

Column(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Text("One"),
    ),
    Expanded(
      flex: 2,
      child: Text("Two"),
    ),
    Expanded(
      flex: 3,
      child: Text("Three"),
    ),
  ],
),

Preview of the above code

When it have non Expanded widgets as the following example it will divide the remaining screen after allocate the space for the non Expanded widget.

Column(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Text("One"),
    ),
    Text("Not Expanded Widget"),
    Expanded(
      flex: 3,
      child: Text("Three"),
    ),
  ],
),

Preview of the above code.

Hopefully this is helpful.

If you have found this helpful please hit that 👏 and share it on social media :).

You can find the source code of this application on the following link https://github.com/yashodgayashan/flutter-tutorial/tree/expanded.