Flutter - Expanded Widget

Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column).  Expanded widget can be taken as the child of Row, Column, and Flex. And in case if we don't want to give equal spaces to our children widgets we can distribute the available space as our will using flex factor. Expanded widget is similar to the Flexible widget in flutter, with its fit property set to FlexFit.tight as default. Expanded widget is basically a shorthand of Flexible widget. But if you are planning to build responsive apps or web apps, then you should definitely switch to Flexible to get more fit options.

Constructor of Expanded class:

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

Properties of Expanded Widget:

• child: This property sets the widget tree to be placed inside the Expanded widget. Expanded widget can be taken as the child of Row, Column, and Flex.
• debugTypicalAncestorWidgetClass: This property takes Type as a parameter to set the ParentData for error messages.
• fit: This property controls how the child widget fills the available space. There are two options given by flutter, the first is FlexFit.tight which sets the child to fill the space available to it and the second is FlexFit.loose which allows the child widget to be as large as the available space.
• flex: If we decide to distribute the available space unevenly among the children widgets then we use the flex factor to do the same.

Example 1: In this example, Expanded widget used inside a Column, and below it is the app in which Expanded widget is not used, to show the difference in UI.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('Geeksforgeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          )),
      body: Center(
          child: Column(
        children: <Widget>[
          Container(
            child: Center(
              child: Text(
                'First widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.blue,
            height: 100,
            width: 200,
          ),
          Expanded(
            child: Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              width: 200,
            ),
          ),
          Container(
            child: Center(
              child: Text(
                'Third widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.orange,
            height: 100,
            width: 200,
          ),
        ],
      )),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

Output:

Explanation: In this app first we have created a simple app bar using the AppBar widget with a leading menu IconButton. The background color of the app bar is set to greenAccent[400] and the title is a Text widget holding 'Geeksforgeeks' as the text. The parent widget in the body of the app is Center with its three children widget being Container. Each of the Containers has Text as their child specifying their names. First and third containers have been assigned a height of 100 and a width of 200 with the background color being blue and pink respectively. The Second Container is a child widget to Expanded, which gives it the ability to take all the available space between the first and the second Container widgets. Similar to the first and third Containers this also has a width of 200. The background color for this is teal. And one thing to notice is we haven't specified height for this container as it will take all the space available to it, and even if we specify a height to it, that will be overwritten by the Expanded widget.

Output:

Below is the code snippet of the second Container.

...
   Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              width: 200,
              height: 100,
            ),
...

This is how UI will look if we do not use the Expanded widget for the second Container in the Column. Note that we need to specify height in this case.

Example 2: In this example, the Expanded widget is used as a child to Row. And next to it is the app without Expanded widget, to show the difference in the UI.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('Geeksforgeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          )),
      body: Center(
          child: Row(
        children: <Widget>[
          Container(
            child: Center(
              child: Text(
                'First widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.blue,
            height: 200,
            width: 100,
          ),
          Expanded(
            child: Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              height: 200,
            ),
          ),
          Container(
            child: Center(
              child: Text(
                'Third widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.pink,
            height: 200,
            width: 100,
          ),
        ],
      )),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

Output:

Explanation: This app is also similar to the app in the first example except for the part the parent widget in the app body is Row instead of Column, with each Container having a height of 200. The width assigned to the first and third Containers is 100. The second Container in this app is a child to Expanded widget, which gives it the ability to take all the space between the first and the third Containers. Again we have not set any width to the second container as it won't count.

Output:

This is the code snippet of the second container.

...
   Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              width: 100,
              height: 200,
            ),
...

This is how the user interface chance if we remove the Expanded widget from being the parent of the second Container. Here also we have explicitly specified the width of the second Container.