Thread by @Vinaystwt

Expanded Widget 🆚 Flexible Widgets in Flutter

A Thread 🧵

Both Expanded widget and Flexible widget are used in Row, column to expand and fill the available space

But Both seem to be the same, But Let's Learn the difference

🔹Expanded Widget expands a child of a Row, Column, or Flex so that the child fills the available space.

The expanded widget takes the entire available space.

By default, it has a property of

fit: FlexFit.tight

Which forces to fill the available space and you can't change the property

🔹Flexible Widget widget controls how a child of a Row, Column, or Flex flexes.

Flexible Widget takes only the needed space

By default, it has the property of

fit: FlexFit.loose

which allows to fill only the needed space

In Flexible widget, You also have the option to fill all the available space by changing the property to

fit: FlexFit.tight

and that makes same as Expanded widget

Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.

To learn more about Expanded widget checkout: api.flutter.dev/flutter/widget…

To learn more about Flexible widget checkout:
api.flutter.dev/flutter/widget…

You can also check out this Stackoverflow answer to learn more about the differences between these two:

stackoverflow.com/questions/5264….

Thank you for Reading

I'm Vinay👋
A flutter Developer sharing my flutter knowledge and Some Unknown Developer Resource you never know about

If you enjoyed Reading this Thread
-Press that like button,
-Retweet the first Tweet,
-Follow me @Vinaystwt for more such content