Flutter : Row -> Expanded -> Container : All containers to have same height dynamically

Question

return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Container(
            color: Colors.blueAccent,
            child: RaisedButton(
              onPressed: () {

              },
              child: Text(
                    "Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        SizedBox(width: 5),
        Expanded(
          child: Container(            
            alignment: Alignment.center,
            color: Colors.blueAccent,
            child: InkWell( // tried raisedbutton - height is not fully covered
              onTap: () {

              },
              child: Text(
                "blah blah blah",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );

Because i am using expanded widget in row, I am not able to use Container( height: double.infinity..

The two boxes are given equal space with the help of expanded now i need two buttons with same dynamic height. Because text length will vary.

Try adding `crossAxisAlignment: CrossAxisAlignment.stretch,` to the `Row` — dev-aentgs, Jun 13 '20 at 10:42
`Another exception was thrown: BoxConstraints forces an infinite height.` - i got the following error after adding `crossAxisAlignment` — Mahesh, Jun 13 '20 at 10:44
created a small sample on [pastebin](https://pastebin.com/16YUsPGB) — dev-aentgs, Jun 13 '20 at 10:49
I just tried that coding in dartpad. Left side widget is clickable everywhere. But right side, only the text is clickable — Mahesh, Jun 13 '20 at 10:54
Made Changes [new pastebin](https://pastebin.com/6AKs5QwA) Replaced `InkWell` with `RaisedButton` and removed `alignment` — dev-aentgs, Jun 13 '20 at 10:59
https://pastebin.com/vb2C0G3Z This is how i actually implemented. The `Row` is a one of the child of a `Column` I am getting `Another exception was thrown: BoxConstraints forces an infinite height.` Without Column it works as expected — Mahesh, Jun 13 '20 at 11:02

score 3 · Answer 1 · answered Aug 10 '20 at 08:17

Someone already answered this at: Flutter Layout Row / Column - share width, expand height

You could try adding IntrinsicHeight as parent to the Row, and add constraints: BoxConstraints.expand() to the Container:

return IntrinsicHeight( 
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Container(
            constraints: BoxConstraints.expand(),
            color: Colors.blueAccent,
            child: RaisedButton(
              onPressed: () {

              },
              child: Text(
                    "Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        SizedBox(width: 5),
        Expanded(
          child: Container(
            constraints: BoxConstraints.expand(),
            alignment: Alignment.center,
            color: Colors.blueAccent,
            child: InkWell( // tried raisedbutton - height is not fully covered
              onTap: () {

              },
              child: Text(
                "blah blah blah",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    )
);

score 1 · Answer 2 · answered Jun 13 '20 at 11:19

1

Wrapped each Conatiner in the Column with Expanded. Expanded will allocate the available space among each of the childern of Column. Removed the height from the first Container

The code which has been modified pastebin

Hope this helps.

answered Jun 13 '20 at 11:19

dev-aentgs

1,218
2
9
17

Flutter : Row -> Expanded -> Container : All containers to have same height dynamically

2 Answers2

Linked