CODEWITHSUNDEEP
flutterdart
Mahesh
Mahesh

Reputation: 1593

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

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),
              ),
            ),
          ),
        ),
      ],
    );

enter image description here

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.

Upvotes: 1

Views: 3208

Answers (2)

uan
uan

Reputation: 877

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),
              ),
            ),
          ),
        ),
      ],
    )
);

Upvotes: 4

dev-aentgs
dev-aentgs

Reputation: 1288

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.

Upvotes: 1

Related Questions