Expanded and flexible not filling entire row - flutter

Question

Hello I have the below code
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
// FlexibleWidget(),
ExpandedWidget(),
FlexibleWidget(),
],
),
Row(
children: [
ExpandedWidget(),
ExpandedWidget(),
],
),
Row(mainAxisSize: MainAxisSize.min,
children: [
FlexibleWidget(),
FlexibleWidget(),
],
),
Row(mainAxisSize: MainAxisSize.min,
children: [
FlexibleWidget(),
ExpandedWidget(),
],
),
],
),
);
}
}
class ExpandedWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.white),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Expanded',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
);
}
}
class FlexibleWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Flexible(
child: Container(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(color: Colors.white),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Flexible',
style: TextStyle(color: Colors.black, fontSize: 24),
),
),
),
);
}
}
And the result is this:
Shoudln't the first container fill the space left after the flexible widget is set? Since it also belongs to a column with a child of 2 expanded widgets, the column width size should be the entire screen. That means the row should be the entire screen too. I would have expected the expanded green widget in the first row to fill the row until there is no white left like the image below:
Instead it only fills half the page. Can anyone explain this behaviour?

Answer 1

Let me start with FlexFit before coming to the point. FlexFit.tight allows the children to fill rest of the space but FlexFit.loose allows children to size themselves as they want.
Now, as you might know Expanded is nothing but Flexible with tight-fitting i.e. fit: FlexFit.tight.
Expanded(
child: child,
)
is equivalent to
Flexible(
fit: FlexFit.tight,
child: child,
)
Now, Let's take your example.
For the first block, there are two widgets with Flex 1 (by default), which will divide the screen to two half; each will be given 50%. This does not mean that they have to take 50% of the screen. It means that they can expand to 50% of the screen. So, the Expanded widget does that. It takes 50% of the screen as it has tight-fitting.
Coming to the Flexible widget, by default, it follows loose-fitting. So it says to its children that they can expand till 50% but there is no boundation that they have to take all space. They can take whatever space they want but the upper bound is set to 50%. In your case, it only needs the space to fit "Flexible" text with some padding. So it takes that.

Answer 2

Pushpendra explained how flex works and why they take at most half the screen when using two flex items. However, there is no answer showing how to make one item fill the rest of the space including space that is not taken by the other item.
The trick is to only use a single flex item that takes all space (Expanded) and constraining the other item to maxWidth = half of the available width. This can be achived using LayoutBuilder to get the available width and ConstraintedBox to constrain one widget without using flex - which allows the Expanded to take more than half of the space (all that is not taken by the ConstrainedBox):
LayoutBuilder(builder: (context, constraints) {
return Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(maxWidth: constraints.maxWidth * 0.5),
child: Text(
text1,
overflow: TextOverflow.fade,
softWrap: false,
),
),
Expanded(
child: Text(
text2,
overflow: TextOverflow.fade,
softWrap: false,
),
),
],
);
});