What is the difference between `fillMaxSize()` and `matchParentSize()` in a component inside a Box in Jetpack Compose?

user_11111289 0
Viewed 953

I'm creating a component in Jetpack Compose and realized that when I'm making a Composable inside a Box it's possible that this component assumes 2 maximum fill possibilities: Modifier.fillMaxSize() and Modifier.matchParentSize(). As shown below:

Box(
    modifier = modifier // This modifier is received by parameter of another composable function
) {
    Canvas(modifier = Modifier.matchParentSize()) {
        // Using match parent size
    }
}

and

Box(
    modifier = modifier // This modifier is received by parameter of another composable function
) {
    Canvas(modifier = Modifier.fillMaxSize()) {
        // Using fill max size
    }
}

What is the practical difference between these 2 modes? And why can't I set Modifier.matchParentSize() to a Column or a Row?

android-jetpack-compose android
1 Answers

From official doc

Modifier.fillMaxSize modifier, which makes an element occupy all available space, will take part in defining the size of the Box.

So it specifies the size of the element.

But if you use Modifier.matchParentSize() in an element inside of a box it has nothing to do with specifying the size of the box.

The size of the box will be measured by other children element of the box. Then the element with the Modifier.matchParentSize() will match and occupy that size.

You can't use .matchParentSize() in Row or Column because this modifier is part of the BoxScope interface. So it works only with boxscope.

For example, if you use fillMaxSize with something like the below.

Box() {
    Text(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
        text = ""
    )

    Text(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue),
        text = "Hello",
    )
}

You will get this. It will fill the entire screen because of that .fillMaxSize() modifier in the first child.

fillMaxSize

But if you use this

Box() {
    Text(
        modifier = Modifier
            .matchParentSize()
            .background(Green),
        text = ""
    )

    Text(
        modifier = Modifier
            .size(100.dp),
        text = "Hello",
    )
}

It will take only 100.dp for the Hello text and then the green background will fill that 100.dp because of that .matchParentSize() modifier in the first child.

matchParentSize

I could have used Box instead of Text but more Box can make it confused.

user_132529810
Related