Flutter Row: Dynamic Height & Vertical Stretch

Question

I have a ListView item that has a dynamic height, affected by the text content. This is a simple Column with two text widgets.

When wrapping the Column in a Row and adding an Image, I want the image to expand vertically (but fixed width) to match the automatic height of the text.

However, I cannot use CrossAxisAlignment.stretch on the Row as it requires a fixed height.

How can I have my image, expand/shrink based on the text content beside it?

Solution

A Stack will automatically wrap unpositioned children. You can use this to your advantage:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Positioned(
                  left: 0,
                  top: 0,
                  bottom: 0,
                  width: 100,
                  child: Container(color: Colors.orange), // replace with your image
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(116, 16, 16, 16),
                  child: Text('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo'),
                )
              ],
            ),
          ],
        )
      ),
    );
  }
}

Comments

[Ajay Beniwal]

can u post your code please what you have currently

[Rubens Melo]

wrap your row with FittedBox. Check it out: docs.flutter.io/flutter/widgets/FittedBox-class.html

[pitazzo]

Do you know which would be the way to do the same trick with two Text widgets, one at each side of the orange Container?