I want to create view like that below. I try: ```@Composable fun SearchBar(label: String) { Rate...

# compose

[Ink]

I want to create view like that below. I try:

@Composable
fun SearchBar(label: String) {
    RateMeAppTheme(isSystemInDarkTheme()) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .background(MaterialTheme.colors.onBackground)
                .clip(RoundedCornerShape(20.dp))
                .padding(20.dp)
        ) {}
    }
}

but I get rectangle max width without rounded corners. Why?

[Chris Sinco [G]]

Should work if you move clip before background

[Chris Sinco [G]]

This plugin maybe useful to help troubleshoot how to order Modifiers: https://plugins.jetbrains.com/plugin/16417-compose-modifiers-playground

[Andrey Kulikov]

also instead of clipping consider setting the shape as a param to background(). drawing the final shape is more efficient than drawing and clipping