The size modifiers are ignored inside a Surface

Question

I am new to Compose. I use the following code:

Card(
    modifier = Modifier
        .width(100.dp)
        .height(100.dp),
    shape = RoundedCornerShape(15.dp),
    backgroundColor = Color.Gray
)

But for some unknown reason Card takes up the whole screen and changes its size only if you use required modifiers. fillMaxWidth(0.2f) doesn't work either. Help, please.

Only requiredHeight and requiredWidth work. The rest of the menus are fine

I just have it in Compose. That is, it is not in any parent element. What does sourounding code mean? — LAST, Dec 28 '22 at 14:18

score 0 · Answer 1 · answered Dec 28 '22 at 14:28

You are using as parent container of the Card a Surface. It is a Box with propagateMinConstraints = true parameter which forces first descendant to have same minimum constraints or dimensions.

In the doc:

If propagateMinConstraints is set to true, the min size set on the Box will also be applied to the content, whereas otherwise the min size will only apply to the Box.

Use a Column to wrap the Card.

 Surface(
    modifier = Modifier.fillMaxSize(),
 ){
    Column(){

        Card(
            modifier = Modifier
                .width(100.dp)
                .height(100.dp),
            shape = RoundedCornerShape(15.dp),
            backgroundColor = Color.Gray
        ) {}
    }
}

Thank you very much. It's all working. – LAST Dec 28 '22 at 14:51 — LAST, Dec 28 '22 at 14:51

The size modifiers are ignored inside a Surface

1 Answers1