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?

Answer 1

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

• requiredWidthIn(min: Dp, max: Dp)
• requiredHeightIn(min: Dp, max: Dp)
• requiredSizeIn(minWidth: Dp, minHeight: Dp, maxWidth: Dp, maxHeight: Dp)

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))
)