The MainAxisAlignment.spaceBetween
inside Widget2 just does not work.
importantWidget():
Widget importantWidget(
BuildContext context) {
return Column(children: [
Padding(
padding: const EdgeInsets.all(design.ComponentSpacing.small),
child: Column(children: [
_widget(context),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_widget1(),
_widget2(context),
],
),
_widget3(context),
])),
const design.HorizontalDivider(),
]);
}
widget2():
Widget widget2(
BuildContext context) {
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SomeWidget(),
autoBackupStatus,
design.PrimaryButton(
text: buttonText,
onPressed: () =>
context.router.push(SomeRoute()),
),
],
),
);
}
2
Answers
Your design layout issue arises because of the misusage of Expanded inside widget2’s definition. The use of Expanded inside another Column might lead to confusion and render the widget unusable, owing to differing layout constraints that flutter cannot resolve for you.
Solution
To resolve this, you need to wrap _widget2(context) with Expanded inside the Row in the importantWidget method, and remove the Expanded widget from inside widget2. Here is the revised code:
Explanation
Expanded in Row enhances widget 2: By introducing Expanded around _widget2(context) when it is placed inside the Row, the impact of this setup is that _widget2 will take up the space that remains within the Row. This ensures that MainAxisAlignment.spaceBetween works appropriately within the widget2 method without any issues or interference from other widgets.
Eliminate Expanded internally for widget2: Now that _widget2 is already contained within an Expanded widget at the parent level (Row), there is no need for it to also contain an Expanded widget internally within its own definition.
That’s because of Expanded Widget in widget2
Doesn’t matter which alignment you have set, expended widget allocates the whole remaining space of the row.
No more remaining space to justify or align widgets in the row ‘it’s all allocated’.