Full width with column children not working

Question

I have a row with 2 children, 1 child is a column containing another 2 items, and the second-row item has an expanded widget with a button inside it. I'm trying to make both row items full width.

I added an expanded widget to both children. The result for the row child with only 1 item worked perfectly, but the result of the row item that had a nested column there, the expanded widget made its height full screen, while keeping the width small.

How can I make both row childrens width 50% and their height 100px?

Here are the results I would like to have:

This is what I'm getting:

If you could include some kind of visual, it'd great to understand the problem and the goal. — Jigar Patel, Jul 26 '20 at 04:35
@JigarPatel Ya, It was confusing. Thanks for pointing that out! Just added images — Jessica, Jul 26 '20 at 04:41
Did you try to wrap just your button inside the Expanded widget? — Didier Peran Ganthier, Jul 26 '20 at 04:51
Set crossAxisAlignment to CrossAxisAlignment.stretch https://stackoverflow.com/questions/53850149/flutter-crossaxisalignment-vs-mainaxisalignment — Santiago M, Jul 26 '20 at 05:23

score 5 · Accepted Answer · answered Jul 26 '20 at 04:49

You could do something like this..

Row(
      children: [
        Expanded(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text('Some other text'),
              RaisedButton(
                child: Text('Button'),
                onPressed: (){},
              ),
            ],
          ),
        ),
        Expanded(
          child: RaisedButton(
            child: Text('Button'),
            onPressed: (){},
          ),
        ),
      ],
    )

Full width with column children not working

1 Answers1