Flutter - Expanded within Flexible

Question

My Row is composed of two Flexible and one of them is a Column I would like this column to take all the available vertical space like in my original design.

I tried to wrap the Column with an Expanded but it seems that I can't. I tried the property Flexible.tight of the flexible but it didn't work.

Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Flexible(
                flex: 2,
                child: SizedBox(
                  height: 130.0,
                  width: 130.0,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(35.0),
                    child: CachedNetworkImage(
                      imageUrl: fakeOffers[index].imageUrl,
                      fit: BoxFit.cover,
                      placeholder: (context, url) => MC_Shimmer(),
                    ),
                  ),
                ),
              ),
              Flexible(
                flex: 3,
                fit: FlexFit.tight,
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 15.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          fakeOffers[index].title,
                          style: MC_favoriteOfferTitle,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          fakeOffers[index].price.toStringAsFixed(0) + ' €',
                          style: MC_priceGradientDetail,
                        ),
                        Text(
                          fakeOffers[index],
                          style: MC_favoriteOfferMeta,
                        ),
                      ],
                    ),
                  ),
                ),
              )
            ],
          );

use Expanded instead of Flexible to take up the remain space here is a visual example https://stackoverflow.com/questions/52645944/flutter-expanded-vs-flexible — Tafadzwa L Nyamukapa, Aug 23 '20 at 17:20

score 1 · Answer 1 · answered Aug 23 '20 at 17:16

1

You need to drop the first Flexible (it's fixed size anyway) and convert the second Flexible to an Expanded. This will let this Expanded take up all remaining space. Then, your column needs to take up all available space using CrossAxisAlignment.stretch.

answered Aug 23 '20 at 17:16

Gazihan Alankus

11,256
7
46
57

I tried that, but the Column still does not take the whole vertical space :/ – user54517 Aug 23 '20 at 17:30
For that, put another `CrossAxisAlignment.stretch` to your root `Row`. – Gazihan Alankus Aug 23 '20 at 17:37
When I do that, I have the error `BoxConstraints forces an infinite height.` – user54517 Aug 23 '20 at 17:45
1

If you can provide a working example in codepen, we could make it work. Otherwise it's hard to continue like this. – Gazihan Alankus Aug 23 '20 at 18:05
My problem only concerns this piece of code :/ Isn't there a theoritical reason of why the column doesn't setrech up ? – user54517 Aug 25 '20 at 14:38
1

the column itself must be unable to grow any longer. this would be determined by its parent. if I you can create a codepen it would be very easy to fix. – Gazihan Alankus Aug 25 '20 at 18:06
1

a great way to debug these issues is to use flutter inspector and see which widget takes up the empty space. – Gazihan Alankus Aug 25 '20 at 18:19

score 0 · Accepted Answer · answered Aug 25 '20 at 15:38

0

So to solve the problem I just set the height of the column to 130.0 as I have a fixed size image.

answered Aug 25 '20 at 15:38

user54517

2,020
5
30
47

Flutter - Expanded within Flexible

2 Answers2