Row match parent width

Question

I'm trying to make the Row containing "Short label" wide as the Row below it.

Putting mainAxisSize: MainAxisSize.max isn't enought, since it should match parent width, based on this answer: The equivalent of wrap_content and match_parent in flutter?

Tried using Expanded outside row, but it causes an error, same using SizedBox.expand. Can't use constraints like width: double.infinity because the row on the left (// Left part in code) must take only the space it needs, the rest must be taken from the yellow container.

Screenshot and code below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Row(
              children: [
                // Left part
                Row(
                  children: [
                    Column(children: [
                      // Error using Expanded ...
                      //Expanded(
                      //child:
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text('Short label:'),
                          Container(width: 20, height: 20, color: Colors.red),
                        ],
                      ),
                      //),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text('Long text label:'),
                          Container(width: 20, height: 20, color: Colors.red),
                        ],
                      ),
                    ]),
                  ],
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    height: 100,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

EDIT (old, check final edit below)

IntrinsicWidth was the correct way to give the rows the same width, as @mohandes suggests.

But it does not work if i add another row below (the one containing the checkbox in the image below), wrapping the rows inside two IntrinsicWidth widgets. The checkbox row should be wide as the upper one in order to align the checkbox on the left.

In the first row i added an orange container on the right as a placeholder for a similar block.

Screenshot and code below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Row(children: [
              Column(
                children: [
                  IntrinsicWidth(
                    child: Row(children: [
                      IntrinsicWidth(
                        child: Column(children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text('Short label 1:'),
                              Container(width: 20, height: 20, color: Colors.red),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text('Short label 123456:'),
                              Container(width: 20, height: 20, color: Colors.red),
                            ],
                          ),
                        ]),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          width: 40,
                          height: 40,
                          color: Colors.orange,
                        ),
                      )
                    ]),
                  ),
                  IntrinsicWidth(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Checkbox(value: true, onChanged: null),
                        Text('Checkbox'),
                      ],
                    ),
                  ),
                ],
              ),
              Expanded(
                child: Container(
                  color: Colors.yellow,
                  height: 100,
                ),
              ),
            ]),
          ],
        ),
      ),
    ),
  );
}

EDIT 2

IntrinsicWidth works fine, the problem with the code above in the first Edit is that i used IntrinsicWidth as wrapper for child widgets (the rows) instead of parent widget (the outer column).

Answer 1

Try adding the column that contains rows (long and short) in intrinsic width widget . Intrinsic width make all children width as longest child width.