Home > Mobile >  Jetpack Compose UI - Button width changes on click inside AlertDialog
Jetpack Compose UI - Button width changes on click inside AlertDialog

Time:12-01

I'm facing this weird issue with fillMaxWidth(fraction = ...) with an AlertDialog and Button, where the Button shows up initially at one size, and on click it shrinks to wrapping its content. Here is the most basic example I can create. I've tried with multiple versions of Compose but they all do the same thing. Any ideas?

AlertDialog(
    modifier = modifier,
    onDismissRequest = {},
    text = { },
    buttons = {
        Button(
            onClick = { },
            modifier = Modifier
                .fillMaxWidth(0.75f)
                .padding(start = 12.dp, end = 12.dp, bottom = 8.dp)
            ) {
                Text(text = "Done")
            }
        }
    )

Before click:

Button fills size of AlertDialog

After click:

Button's width has shrunk

CodePudding user response:

I've used the sample composable from enter image description here

or specify an actual dp width

AlertDialog(
    modifier = Modifier.width(150.dp),
    ...

enter image description here

I don't wanna throw jargons I can't explain, but I suspect when AlertDialog doesn't have any specific width, it cannot provide any incomming measurements for its children, which is in this case the Button cannot compute a 75% of unknown width on initial display, it looks like all size computation is happening only after an action has been made to the button, maybe a recomposition is happening under-the-hood having correct measurements.

  • Related