How to expand Container inside a Row?-CodePudding

I have the following code:

return Scaffold(
        body: SafeArea(
        child: ListView(children: [
          Container(
            child: Center(
              child: Row(children: [
                Flexible(
                child: Container(
                  margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
                  decoration: BoxDecoration(color: Colors.white),
                  child: Row(children: [
                    Container(
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(color: Colors.black38),
                    ),
                    Expanded(   // <- does nothing. container still 0x0px
                      child: Container(
                        decoration: BoxDecoration(color: Colors.black38),
                    )),
                ]),
              ))
        ])))
      ]),
    ));

I am trying to expand the third container to the remaining size of the Row it's in, but somehow it always stays 0x0 pixel in size, until I define a manual size by using height: or/and width:.

Thanks for any help!

CodePudding user response：

try this

 Container(
              child: Center(
                  child: Row(children: [
            Flexible(
                child: Container(
              margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
              decoration: BoxDecoration(color: Colors.white),
              child: Row(children: [
                Container(
                  height: 20,
                  width: 20,
                  decoration: BoxDecoration(color: Colors.black38),
                ),
                Expanded(
                  child: Container(
                    height: 20,
                    decoration: BoxDecoration(color: Colors.pink),
                  ),
                ),
              ]),
            ))
          ]))),

CodePudding user response：

I could be wrong, but I think it's actually not 0 x 0 but [remaining width] x 0. You will see that just putting a height will make it visible. Also when putting a 3rd widget in the row you will see it will be pushed all the way to the right.

The thing is that, as far as I understand it, a Row expects it's children to provide a height. Because otherwise it doesn't know how high it needs to be. What height do you expect the Expanded to be? 20 like the other container? full height of the screen? If a widget inside a Row doesn't provide a height it will be made as small as possible, so in this case, invisible.

What probably helps is to wrap the row in an IntrinsicHeight like this:

return Scaffold(
    body: SafeArea(
    child: ListView(children: [
      Container(
        child: Center(
          child: Row(children: [
            Flexible(
            child: Container(
              margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
              decoration: BoxDecoration(color: Colors.white),
              child: IntrinsicHeight(child: Row(children: [
                Container(
                  height: 20,
                  width: 20,
                  decoration: BoxDecoration(color: Colors.black38),
                ),
                Expanded(   // <- does nothing. container still 0x0px
                  child: Container(
                    decoration: BoxDecoration(color: Colors.black38),
                )),
            ]),
          )))
    ])))
  ]),
));