Flutter Expanded Tutorial with Examples

Expanded
child
flex

1. Expanded

Expanded is a widget that helps to expand the space for a child widget of Row or Column in accordance with the main axis. Notably, the main axis of Row is the horizontal axis, and the main axis of Column is the vertical one.

Expanded Constructor

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

First of all, please take the illustration below as an example. In this example, a Row object has five child widgets. The question is how to horizontally expand the space for the 2nd and the 4th child widgets.

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Icon(Icons.ac_unit, size: 32, color: Colors.red),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Icon(Icons.add_circle, size: 96, color: Colors.green),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

Wrapping a Row child widget in an Expanded object helps it expand the space horizontally and take up the rest of the Row space.

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
        child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Expanded(
        child: Icon(Icons.add_circle, size: 96, color: Colors.green),
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

2. child

@required Widget child

3. flex

flex propertyis considered the weight of the Expanded. It determines how much space will be allocated to the Expanded. The allocated space is proportional to the flex value. The default value of flex is 1.

int flex: 1

flex (ex1)

Row (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
        child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
        flex: 3
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(50, 100))
          )
      ),
      Expanded(
        child: Icon(Icons.add_circle, size: 96, color: Colors.green),
        flex: 2
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

flex (ex2)

Column (
    children: [
      ElevatedButton(child: Text("B1"), onPressed:(){}),
      Expanded(
          child: Icon(Icons.ac_unit, size: 32, color: Colors.red),
          flex: 3
      ),
      ElevatedButton(
          child: Text("B2"),
          onPressed:(){},
          style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(Size(90, 30))
          )
      ),
      Expanded(
          child: Icon(Icons.add_circle, size: 96, color: Colors.green),
          flex: 2
      ),
      ElevatedButton(child: Text("Btn 3"), onPressed:(){}),
    ]
)

Flutter Expanded Tutorial with Examples

1. Expanded

2. child

3. flex

Flutter Programming Tutorials

Flutter Programming Tutorials

Newest Articles