Mastering Layout Widgets in Flutter: Expanded, Flexible, Spacer & More

 Mastering Layout Widgets in Flutter: Expanded, Flexible, Spacer & More

Expanded Widget – Fills the Available Space

The Expanded widget allows a child widget to take up all available space within a Row, Column, or Flex.

return Scaffold(
  appBar: AppBar(title: Text("Expanded in Column")),
  body: Column(
    children: [
      Expanded(
        child: Container(
            color: Colors.red),
      ),
      Expanded(child: Container(color: Colors.green)),
      Expanded(child: Container(color: Colors.blue)),
    ],
  ),
);

👉 Both containers will take equal space inside the Row, no matter the screen size.

🛠 When to Use?

✅ When you want widgets to take equal space.
✅ When you need a responsive layout that adjusts automatically.

Flexible Widget – Fills Space but Can Shrink

The difference between Expanded and Flexible is:

• Expanded always takes up all available space.
• Flexible tries to fill space but can shrink if necessary.

return Scaffold(
  appBar: AppBar(title: Text("Expanded in Column")),
  body: Row(
    children: [
      Flexible(
        child: Container(color: Colors.red, height: 100),
      ),
      Expanded(
        child: Container(color: Colors.green, height: 100),
      ),
    ],
  )
  ,
);

👉 If there is less space, the Flexible widget will shrink, while Expanded will always occupy full space.

🛠 When to Use?

✅ When you need a widget to be flexible but still adjust based on available space.
✅ When dealing with dynamic UI elements.

Spacer Widget – Adds Equal Space Between Widg

If you need equal spacing between widgets, Spacer is the best solution.

return Scaffold(
  appBar: AppBar(title: Text("Expanded in Column")),
  body: Row(
    children: [
      Flexible(
        child: Container(color: Colors.red, height: 100),
      ),
      Spacer(),
      Expanded(
        child: Container(color: Colors.green, height: 100),
      ),
    ],
  )
  ,
);

👉 Spacer() will automatically fill the available space between icons.

🛠 When to Use?

✅ When you need to distribute space between widgets.
✅ When designing navigation bars, toolbars, or any UI with spacing requirements.

Wrap Widget – Moves Items to the Next Row/Column

if you add multiple widgets inside a Row and the screen is too small, Flutter will throw an overflow error.

✅ Wrap automatically moves widgets to the next row or column when space runs out.

return Scaffold(
  appBar: AppBar(title: Text("Expanded in Column")),
  body: Wrap(
    children: [
      Container(color: Colors.red, width: 100, height: 100),
      Container(color: Colors.green, width: 100, height: 100),
      Container(color: Colors.blue, width: 100, height: 100),
      Container(color: Colors.orange, width: 100, height: 100),
    ],
  )
  ,
);

Align Widget – Positions a Widget Inside Its Parent

If you need to position a widget inside a parent container, Align is the way to go.

return Scaffold(
  appBar: AppBar(title: Text("Expanded in Column")),
  body: Wrap(
    children: [
      Align(
        alignment: Alignment.center,
        child: Container(color: Colors.blue, width: 100, height: 100),
      ),

      Container(color: Colors.red, width: 100, height: 100),
      Container(color: Colors.green, width: 100, height: 100),
      Container(color: Colors.blue, width: 100, height: 100),
      Container(color: Colors.orange, width: 100, height: 100),
    ],
  )
  ,
);

👉 This will place the container at the bottom-right of the parent widget.

🛠 When to Use?

✅ When you need precise control over a widget's position.
✅ When working with complex UI layouts.

FittedBox Widget – Automatically Resizes a Widget

If a widget is too big for the available space, FittedBox will automatically resize it to fit.

return Scaffold(
  appBar: AppBar(title: Text("Expanded in Column")),
  body: Wrap(
    children: [

      FittedBox(
        child: Text("This is a lvcxcvxcv"
            "cxvcxvxcv"
            "If a widget is too big for the available space, FittedBox will automatically resize it to fit."
            "If a widget is too big for the available space, FittedBox will automatically resize it to fit.cxvong text"),
      ),

      Align(
        alignment: Alignment.center,
        child: Container(color: Colors.blue, width: 100, height: 100),
      ),

      Container(color: Colors.red, width: 100, height: 100),
      Container(color: Colors.green, width: 100, height: 100),
      Container(color: Colors.blue, width: 100, height: 100),
      Container(color: Colors.orange, width: 100, height: 100),
    ],
  )
  ,
);

• 

Summary – When to Use Each Widget?

Widget	Use Case
Expanded	When you want a widget to take up all available space
Flexible	When a widget should take space but also shrink if needed
Spacer	When you need equal spacing between widgets
Wrap	When a Row/Column has limited space, and items should move to the next line
Align	When you need to position a widget inside its parent
FittedBox	When a widget should automatically resize itself

📌 Final Thoughts

Flutter provides powerful layout widgets to create adaptive and responsive designs. Using the right widget in the right place can make your UI more efficient, user-friendly, and visually appealing.

🔥 Which widget do you find most useful?

Let me know in the comments! Also, share this blog if you found it helpful! 🚀😊