skip to Main Content

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


  1. 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:

    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(),
                Expanded(child: _widget2(context)), // Ensure Expanded is applied here
              ],
            ),
            _widget3(context),
          ]),
        ),
        const design.HorizontalDivider(),
      ]);
    }
    
    Widget _widget2(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SomeWidget(),
          autoBackupStatus,
          design.PrimaryButton(
            text: buttonText,
            onPressed: () => context.router.push(SomeRoute()),
          ),
        ],
      );
    }
    

    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.

    Login or Signup to reply.
  2. 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’.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search