Wrap content around text in TextField

Question

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)

Thanks for the help!

Check also: https://stackoverflow.com/questions/72886062/outlinedtextfield-doesnt-resize-to-a-minimumwidth-in-compose — Gabriele Mariotti, Jul 13 '22 at 13:26

score 1 · Accepted Answer · answered Jun 12 '21 at 06:27

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
            )
        )
    }

Thank you, this works but with both TextField and BasicTextField there is a minumum width that i can't override, do you know how can i do it? They say you can apply widthIn to override it but doesn't seem to work — alessandro gaboardi, Jun 12 '21 at 10:38
@alessandrogaboardi This will fix it https://stackoverflow.com/a/74504039/1502079 — vovahost, Nov 20 '22 at 08:52

Wrap content around text in TextField

1 Answers1