Flutter Expanded vs Flexible

• Expanded is a shorthand for Flexible with tight fit. Expanded class extends the Flexible class with fit property FlexFit.tight.

• Flexible and Expanded widgets must be used as children of Row, Column, or Flex containers in Flutter.

• Expanded is a specialised usage of the Flexible widget.

class Expanded extends Flexible {
// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space along the flex widget's main axis.
const Expanded({
Key key,
int flex = 1,
@required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
} 

Expanded vs Flexible widget

Difference between Flutter Expanded vs Flexible:

Expanded	Flexible
Expanded forces its child to fill all available space.	Flexible allows its child to take only the necessary space.
Expanded is simpler to use as it automatically fills the available space.	Flexible provides more control over how much space its child takes.
Use when you want to evenly distribute the remaining space among children	Use when you need precise control over how space is allocated among children with different flex factors.
Scenarios where you require widgets to expand uniformly, such as creating a responsive layout that resizes elements equally.	Dynamic layouts that adapt to varying conditions or when you need mixed layouts with a combination of equal and proportionate distribution.
Adds Equal-sized buttons in a Row	Puts Proportional sizing in a Row
Row( children: [ Expanded( child: ElevatedButton( onPressed: () {}, child: Text('Text 1'), ), ), Expanded( child: ElevatedButton( onPressed: () {}, child: Text('Text 2'), ), ), Expanded( child: ElevatedButton( onPressed: () {}, child: Text('Text 3'), ), ), ], )	Row( children: [ Flexible( flex: 1, child: ElevatedButton( onPressed: () {}, child: Text('Text 1'), ), ), Flexible( flex: 2, child: ElevatedButton( onPressed: () {}, child: Text('Text 2'), ), ), Flexible( flex: 3, child: ElevatedButton( onPressed: () {}, child: Text('Text 3'), ), ), ], )

Practice with flutter Expanded vs Flexible:

Expanded vs Flexible Widget Example 1

Flutter Expanded vs Flexible Example 1

class ExpandFlexPage extends StatelessWidget {
  const ExpandFlexPage({super.key});

  @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: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              Row(
                children: [
                  Flexible(
                      fit: FlexFit.loose,
                      child: Container(
                        height: 100,
                        color: Colors.pink,
                        child: const Text(
                          'Flexible(FlexFit.loose)',
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      )),
                  Flexible(
                      fit: FlexFit.tight,
                      child: Container(
                        height: 100,
                        color: Colors.blueAccent,
                        child: const Text(
                          'Flexible(FlexFit.tight)',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      ))
                ],
              ),
              Row(
                children: [
                  Expanded(
                      flex: 1,
                      child: Container(
                        height: 100,
                        color: Colors.purple.shade300,
                        child: const Text(
                          'Expanded',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      )),
                  Expanded(
                      flex: 2,
                      child: Container(
                        height: 100,
                        color: Colors.teal.shade300,
                        child: const Text(
                          'Expanded',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      )),
                ],
              ),
              Row(
                children: [
                  Expanded(
                      child: Container(
                        height: 100,
                        color: Colors.pink,
                        child: const Text(
                          'Expanded',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      )),
                  Flexible(
                      child: Container(
                        height: 100,
                        color: Colors.blueAccent,
                        child: const Text(
                          'Flexible',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      ))
                ],
              ),
              Row(
                children: [
                  Flexible(
                      fit: FlexFit.tight,
                      child: Container(
                        height: 100,
                        color: Colors.purple.shade300,
                        child: const Text(
                          'Flexible(FlexFit.tight)',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      )),
                  Expanded(
                      child: Container(
                        height: 100,
                        color: Colors.teal.shade300,
                        child: const Text(
                          'Expanded',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      )),
                ],
              ),



            ],
          ),
        ),
      ),
    );
  }
}

Expanded vs Flexible Widget Example 2