3 min read

Flutter Expanded

Updated: Aug 20

The Expanded widget in Flutter is used to make a child widget expand to fill the available space in the main axis of a Row, Column, or Flex container. It's commonly used to distribute available space among the children of a Row or Column widget. If multiple children are expanded, the available space is divided among them according to the flex factor. An Expanded widget must be a descendant of a Row, Column, or Flex.

Constructor (Expanded Class)

const Expanded(

{Key? key,

int flex: 1,

required Widget child}

)

Properties of Flutter Expanded widget

flex

It specifies the flex factor that determines how much space each Expanded widget should occupy compared to other Expanded widgets. Default is 1.

Row(
  children: [
    Container(color: Colors.blue),
    Expanded(
      flex: 2,
      child: Container(color: Colors.green),
    ),
    Container(color: Colors.red),
  ],
)

fit

child

Practice with Expanded widget

Expanded Widget Example 1

How to use Expanded Widget in Flutter — Flutter Expanded Example 1

class ExpandedColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff3555c0),
          leading: SvgPicture.asset(
            'assets/image/code_capp1.svg',
            fit: BoxFit.fitWidth,
          ), //remove this line
          title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
        ),
        body: Center(
          child: Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: [
                    // First Container with fixed width
                    Container(
                      height: 100,
                      color: Colors.pink,
                      child: Center(child: Text('Fixed height (100)')),
                    ),
                    // Expanded Container will fill remaining space
                    Container(
                      color: Colors.yellow,
                      child: Center(child: Text('Without Expanded \nContainer')),
                    ),
                    // Container with another fixed width
                    Container(
                      height: 150,
                      color: Colors.pink,
                      child: Center(child: Text('Fixed height (150)')),
                    ),
                  ],
                ),

                Column(
                  children: [
                    // First Container with fixed width
                    Container(
                      height: 100,
                      color: Colors.pink,
                      child: Center(child: Text('Fixed height (100)')),
                    ),
                    // Expanded Container will fill remaining space
                    Expanded(
                      child: Container(
                        color: Colors.yellow,
                        child: Center(
                            child: Text(
                                'Expanded Container\n(No need to\n give height)')),
                      ),
                    ),
                    // Container with another fixed width
                    Container(
                      height: 150,
                      color: Colors.pink,
                      child: Center(child: Text('Fixed height (150)')),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}