CODEWITHSUNDEEP
flutterlayout
user54517
user54517

Reputation: 2420

Flutter - Expanded within Flexible

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.

enter image description here

enter image description here

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

Upvotes: 0

Views: 1183

Answers (2)

user54517
user54517

Reputation: 2420

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

Upvotes: 0

Gazihan Alankus
Gazihan Alankus

Reputation: 11984

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.

Upvotes: 1

Related Questions