Why is requiredSizeIn not the same as requiredWidthIn + requiredHeightIn with the same parameter values?

Question

I have the below code

    LazyColumn(
        contentPadding = PaddingValues(all = 64.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        item {
            Box(
                modifier = Modifier
                    .width(200.dp)
                    .height(200.dp)
                    .border(BorderStroke(2.dp, Color.Green))
            ) {
                Box(modifier = Modifier
                    .fillMaxSize()
                    .sizeIn(100.dp, 200.dp)
                    .requiredWidthIn(150.dp, 180.dp)
                    .requiredHeightIn(150.dp, 180.dp)
                    .border(BorderStroke(3.dp, Color.Red))
                )
            }
        }
    }

It resulted as expected.

I just replaced requiredWidthIn and requiredHeigthIn with requiredSizeIn as below.

    LazyColumn(
        contentPadding = PaddingValues(all = 64.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        item {
            Box(
                modifier = Modifier
                    .width(200.dp)
                    .height(200.dp)
                    .border(BorderStroke(2.dp, Color.Green))
            ) {
                Box(modifier = Modifier
                    .fillMaxSize()
                    .sizeIn(100.dp, 200.dp)
                    .requiredSizeIn(150.dp, 180.dp)
                    .border(BorderStroke(3.dp, Color.Red))
                )
            }
        }

I expect the result to be the same. Somehow it looks different on the height side. Why is this?

Different parameters. Using named parameters might show which parameter value you are passing. — Abhimanyu, Jun 17 '23 at 06:39

score 7 · Accepted Answer · answered Jun 17 '23 at 06:37

If you look at the definitions of each method you are using, you see:

So really your second code snippet is saying:

Box(modifier = Modifier
    .fillMaxSize()
    .sizeIn(100.dp, 200.dp)
    .requiredSizeIn(
        minWidth = 150.dp,
        minHeight = 180.dp,
        maxWidth = Dp.Unspecified, // The default
        maxHeight = Dp.Unspecified, // The default
    )
    .border(BorderStroke(3.dp, Color.Red))
)

Which is not the same thing - you haven't declared any maxWidth or maxHeight like you did when using requiredWidthIn and requiredHeightIn. That's why you are getting a different result - you're setting a minHeight of 180.dp when using requiredSizeIn while you're using a minHeight of 150.dp when you are using requiredHeightIn.

You'd see the same result if you declare all four parameters to requiredSizeIn:

Box(modifier = Modifier
    .fillMaxSize()
    .sizeIn(100.dp, 200.dp)
    .requiredSizeIn(
        minWidth = 150.dp,
        minHeight = 150.dp,
        maxWidth = 180.dp,
        maxHeight = 180.dp
    )
    .border(BorderStroke(3.dp, Color.Red))
)

I was hoping size simplifies the need to write both width and height. If size has additional parameters to do so, and can represent both width and height together, perhaps we can just deprecate width and height. — Elye, Jun 17 '23 at 11:26

Why is requiredSizeIn not the same as requiredWidthIn + requiredHeightIn with the same parameter values?

1 Answers1