Is this expected behavior or a bug? (photo in :thr...

# compose

[Alex Styl]

Is this expected behavior or a bug? (photo in 🧵 )

I expect to see a rectangle box but it seems like it is somehow clipped. Replacing the FlowRow with a Row works as expected

FlowRow(Modifier.fillMaxSize()) {
        Box(
            Modifier
                .background(Color.Red)
                .aspectRatio(1f)
                .weight(1f)
        )
    }

[Alex Styl]

Screenshot 2025-01-15 at 14.23.41.png

[Alex Styl]

I found this on `Column`'s weight(). Doesn't say if it is only scaled down though but maybe it works as intended.

In a FlowColumn, when a weight is applied to an item, the item is scaled based on the number of weighted items that fall on the column it was placed in.

EDIT: On a second though, how does it choose the specific height though. w/o the aspectRatio() the Box would be 0.dp tall

[Alex Styl]

Opened an issue

Something seems to be up with FlowRows as other are seeing the same

[Alex Styl]

If someone can think of a workaround, let me know

[Lukas Anda]

Looking at the code, what are you trying to achieve? Because if you put weight(1f) and aspectRatio(1f) that should make a square, that fills the width so why not put them in a column?

[Alex Styl]

@Lukas Anda I am building dynamic grids so I need to wrap the contents of the container

[Lukas Anda]

So something like staggered grids?

[Alex Styl]

if u are talking about the LazyXStaggeredGrid, then no

need to be able to not have the grid be non-scrollable and also be able to have different number of items and sizes on each row/column

[Alex Styl]

on the web that is usually done using flex wrap, which is the FlowRow/Column on compose

[Lukas Anda]

Okaaay, maybe I am missing something. Could you please draw it out? 😄

[Alex Styl]

<div>
    <h2>I am some text outside of flex wrap</h2>
    <div class="flex flex-wrap">
        <div class="w-1/2 h-32 bg-blue-500"></div>
        <div class="w-1/3 h-24 bg-green-500"></div>
        <div class="w-1/4 h-40 bg-red-500 "></div>
        <div class="w-1/3 h-28 bg-yellow-500 "></div>
        <div class="w-1/4 h-36 bg-purple-500 "></div>
        <div class="w-1/2 h-32 bg-blue-500 "></div>
        <div class="w-1/3 h-24 bg-green-500 "></div>
        <div class="w-1/4 h-40 bg-red-500 "></div>
        <div class="w-1/3 h-28 bg-yellow-500 "></div>
        <div class="w-1/4 h-36 bg-purple-500 "></div>
        <div class="w-1/2 h-32 bg-blue-500 "></div>
        <div class="w-1/3 h-24 bg-green-500 "></div>
        <div class="w-1/4 h-40 bg-red-500 "></div>
        <div class="w-1/3 h-28 bg-yellow-500 "></div>
        <div class="w-1/4 h-36 bg-purple-500 "></div>
    </div>
    <h2>I am some text outside of flex wrap</h2>
</div>

wrap.mov

[Lukas Anda]

Turns out you can do something like that @Alex Styl

@Composable
fun WeightedFlewRow(modifier: Modifier = Modifier) {
    Column {
        Text("Text before")
        FlowRow(modifier = Modifier.fillMaxWidth()) {
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 2f)
                .background(Color.Blue))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 3f)
                .background(Color.Green))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 4f)
                .background(Color.Red))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 3f)
                .background(Color.Yellow))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 4f)
                .background(Color.Magenta))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 2f)
                .background(Color.Blue))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 3f)
                .background(Color.Green))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 4f)
                .background(Color.Red))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 3f)
                .background(Color.Yellow))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 4f)
                .background(Color.Magenta))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 2f)
                .background(Color.Blue))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 3f)
                .background(Color.Green))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 4f)
                .background(Color.Red))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 3f)
                .background(Color.Yellow))
            Box(modifier = Modifier
                .height(40.dp)
                .fillMaxWidth(1 / 4f)
                .background(Color.Magenta))
        }
        Text("Text after")
    }
}

which will look like this:

[Alex Styl]

what about the heights?

[Lukas Anda]

Well you can either set them to a specific number separately or do you need to use weights/aspect ratio for them as well?

[Alex Styl]

my scenario is very specific and it's the one in the OP

[Alex Styl]

the html code is an example of a dynamic grid to get more context

[Lukas Anda]

Oh then I'd suggest using this (the order of aspectRatio and fillMaxWidth() is important)

Box(modifier = Modifier
    .fillMaxWidth(1 / 2f)
    .aspectRatio(8f, true)
    .background(Color.Blue))

Hopefully that will achieve your expected result

[Alex Styl]

i am not looking for workarounds where I need to calculate more stuff

in your case i need to calculate whether the width needs to be split into 2. I don't want to have to do that

[Alex Styl]

the whole point of weights is that it applies the same size to all of them without having to do the calc on your own

[Lukas Anda]

Ah alright. Well then it needs to have custom layout