Why the Row in Card out of the scope of Card with fillMaxWidth()

Question

My code:

@ExperimentalMaterial3Api
@Composable
fun Settings() {
    Card(modifier = Modifier
        .fillMaxWidth()
    ) {
        SettingItem(itemTitle = "Test Title", itemDescription = "Description")
    }
}

@ExperimentalMaterial3Api
@Composable
fun SettingItem(itemTitle: String, itemDescription: String) {
    Row(modifier = Modifier.padding(12.dp).fillMaxWidth()) {
        Column(modifier = Modifier.fillMaxWidth()) {
            Text(text = itemTitle, color = MaterialTheme.colorScheme.primary)
            Text(text = itemDescription, color = MaterialTheme.colorScheme.secondary)
        }
        Spacer(modifier = Modifier.size(width = 12.dp, height = 4.dp))
        Switch(checked = false, onCheckedChange = {})
    }
}

I want to put a Switch at the end of a SettingItem, so I set fillMaxWidth(). But the Switch shows out of the layout of Card.

Image

Answer 1

Change the Column modifier to weight.

From,

modifier = Modifier.fillMaxWidth()

To

modifier = Modifier.weight(1F)

The fillMaxWidth modifier is used to make the Column as wide as possible. Whereas here the requirement is to fill as wide as possible leaving space for the Spacer and Switch. That is achieved by using the weight modifier.

Weight

The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight.

FillMaxWidth

Have the content fill (possibly only partially) the Constraints.maxWidth of the incoming measurement constraints, by setting the minimum width and the maximum width to be equal to the maximum width multiplied by fraction.

Note that, by default, the fraction is 1, so the modifier will make the content fill the whole available width.

Reference

• weight

• fillMaxWidth