[Solved] Flutter - How to stretch Column inside Row to maximum available height?

Question

Asked by FetFrumos on December 27, 2021 (source).

I need create this UI in my flutter app:

enter image description here

It is row for my list. This is my code:

return Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    CachedNetworkImage(
      imageUrl: photoUrl,
      imageBuilder: (context, imageProvider) => Container(
        height: 112,
        width: 90,
      ),
    ),
    const SizedBox(
      width: 14,
    ),
    Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '${title}',
        ),
        
        Align(
          alignment: Alignment.centerLeft,
          child: SizedBox(
            width: descriptionWidth,
            child: Text(
              '${shortDescription}',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        
        Text(
          '${footer}',
        ),
        
      ],
    )
  ],
);

I need the test block to occupy a height equal to the image. but when the text is all in the middle, it takes up a lot less height. this is an example of how my code works now:

enter image description here

how do I fix this? How to stretch Column inside Row to maximum available height?

I tried several options but then it breaks the display of multi-line text.

Answer

Question answered by Yeasin S (source).

While height is fixed, you can wrap Column with SizedBox(height:112) and to control textOverflow, wrap SizedBox with Expanded.

Expanded(
  child: SizedBox(
    height: 112,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [

Full method

 return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          /// replace with image
          height: 112,
          width: 90,
          color: Colors.red,
        ),
        const SizedBox(
          width: 14,
        ),
        Expanded(
          child: SizedBox(
            height: 112,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${title}',
                ),
                Flexible(
                  child: Text(
                    '${shortDescription}',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Text(
                  '${footer}',
                ),
              ],
            ),
          ),
        )
      ],
    );

enter image description here

DART FLUTTER FLUTTER-LAYOUT
SHARE: