How could I achieve a row that behaves like this? ...

# compose

[Mini]

How could I achieve a row that behaves like this? I want the box(image) to be square, and the same height as the text.
I can’t measure the box first, because then I wouldn’t know the text height, and I can’t measure the Text first, as I wouldn’t know the box width 🤔

[Benoit Quenaudon]

Box at the size of the parent - margins.

[Mini]

That was fast! But I am afraid I don’t understand

[Benoit Quenaudon]

Bound the size of the box to its parent. Let the parent change its size based on the text.

[Kirill Grouchnikov]

There’s nothing here specific to Compose. You’ll need to figure out the higher level layout logic. In terms of implementation details, you can use Paragraph with width-bound constraints and then see how many lines the text would need for certain max width.

But overall, that’s technical. You need to decide what’s the logic. You can determine the height of one line, so that would be your starting point. Say your total width is 400, and one line is 40 tall. So if your text fully fits into 360 (account for margins, of course), then you’re done. If not, then your image grows to 80 tall, and only 320 left for the two-line text. And so on.

But what if you’re putting a lot of text? At some point, you will need to much vertical space that your image will be too tall and too wide. So you’d probably want to limit how tall your image gets, so you still leave at least some space for the text.

[ephemient]

you can have a situation where both

┌─────────────┐
│foo bar baz □│
└─────────────┘
┌─────────────┐
│foo bar   ┌─┐│
│baz       └─┘│
└─────────────┘

satisfy your requirements, or as Kirill's says, where nothing satisfies your requirements.

[Mini]

probably should have specified, but I wan’t a maximum of 3 lines with textoverflow ellipsis

[Kirill Grouchnikov]

Then see above - dynamic determination with Paragraph on how many lines you’ll need