layoutsizeandroid-jetpack-composeandroid-wrap-content

Wrap content around text in TextField


i'm trying to make a TextField that is a minimum size, and that expands around the text being written inside it, how can i achieve this?

This is my test code

var text by rememberSaveable { mutableStateOf("Prova") }
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Test")
    TextField(
        modifier = Modifier
//                .widthIn(10.dp, Dp.Infinity)
//                .width(IntrinsicSize.Min)
            .width(30.dp)
            .wrapContentWidth(),
        value = text,
        onValueChange = {
            text = it
        },
        textStyle = TextStyle.Default.copy(
            textAlign = TextAlign.End
        )
    )
}

This is the result i seek (should expand with more text in width up until it hits the left Text) enter image description here

Thanks for the help!


Solution

  • Using Spacer with Modifier.weight(1f) in between will make it work.

    I would suggest replacing TextField with BasicTextField to get finer control over its look (specifically achieving smaller minimum width than MinWidth default value of 280.dp).

    var text by rememberSaveable { mutableStateOf("Prova") }
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = "Test")
            Spacer(modifier = Modifier.weight(1f))
            TextField(
                modifier = Modifier
                    .widthIn(1.dp),
                value = text,
                onValueChange = {
                    text = it
                },
                textStyle = TextStyle.Default.copy(
                    textAlign = TextAlign.End
                )
            )
        }