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).

If you want to cover full width, why are you using `Row`? If you don't use row, it'll automatically take the full width — littleironical, Jul 25 '20 at 15:56
@HardikKumar: you mean Row containing Text and Container (which should become a TextField)? Which widget is more suitable to put more widgets in a row? — Ansharja, Jul 25 '20 at 16:08
I can't understand what you actually want to achieve? Is it a textfield? Please explain your question properly so that i can help. — littleironical, Jul 25 '20 at 16:22

score 3 · Accepted Answer · answered Jul 25 '20 at 15:49

3

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

answered Jul 25 '20 at 15:49

Sajjad

2,593
16
26

This seems to work at short glance, i'll make another test later and accept your answer! – Ansharja Jul 25 '20 at 16:10
Your strategy works for that two rows in my old code, please check my edit, i added an example with one more row where it seems to fail – Ansharja Jul 28 '20 at 21:53
I corrected my code in the first edit, IntrinsicWidth works fine, thank you! – Ansharja Jul 28 '20 at 22:10

score 1 · Answer 2 · answered Jul 26 '20 at 13:34

By changing the layout to Row [ Column Column Container ] we get

Code:

Widget alternateLayout() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            color: Colors.blue[100],
            child: Text('Short label:'),
          ),
          Container(
            color: Colors.green[100],
            child: Text('Long text label:'),
          ),
        ],
      ),
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 20,
            width: 20,
            color: Colors.red,
          ),
          Container(
            height: 20,
            width: 20,
            color: Colors.red,
          ),
        ],
      ),
      Expanded(
        child: Container(
          color: Colors.yellow,
          height: 100,
        ),
      ),
    ],
  );
}

Thanks for your answer, but using two columns the layout would fail depending on row heights. Label and container (which is a placeholder for a complex widget) must be on the same row so that they can be vertical aligned properly. I edited my question with `IntrinsicWidth` widget — Ansharja, Jul 28 '20 at 21:51
ok yes. @Ansharja Just for info, according to [IntrinsicWidth docs](https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html), it might get computationally expensive (for desktop app that cost might not matter much). — dev-aentgs, Jul 29 '20 at 09:05

Row match parent width

2 Answers2