3 min read

Flutter Flexible Widget

Updated: Aug 2, 2024

The Flexible widget in Flutter is similar to Expanded. The Flexible widget in Flutter is used to make a child widget to take up a portion of the available space, but not necessarily all of it in the main axis of a Row, Column, or Flex container. The Expanded widget in Flutter is essentially a shorthand of Flexible with the default fit of FlexFit.tight. A Flexible widget must be a descendant of a Row, Column, or Flex.

How to apply flex in flutter — Flutter Flexible Widget

Constructor (Flexible Class)

const Flexible(

{Key key,

int flex: 1,

FlexFit fit: FlexFit.loose,

@required Widget child}

)

Properties of Flutter Flexible widget

flex

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

Row(
  children: [
    Container(color: Colors.blue),
    Flexible(
      flex: 2,
      fit: FlexFit.tight,
      child: Container(color: Colors.green),
    ),
    Container(color: Colors.red),
  ],
)

fit

child

Practice with Flexible widget

Flexible Widget Example 1

How to use Flexible widget in flutter — Flutter Flexible Widget Example 1

class FlexibleColumnExample 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 Flexible \nContainer')),
                    ),
                    // Container with another fixed width
                    Container(
                      height: 100,
                      color: Colors.pink,
                      child: Center(child: Text('Fixed height (100)')),
                    ),
                  ],
                ),

                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
                    Flexible(
                      flex:1,
                      child: Container(
                        color: Colors.yellow,
                        child: Center(
                            child: Text(
                                'Flexible Container\n(No need to\n give height)')),
                      ),
                    ),
                    Flexible(
                      flex:2,
                      child: Container(
                        color: Colors.lightBlueAccent,
                        child: Center(
                            child: Text(
                                'Flexible 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)')),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}