CODEWITHSUNDEEP
androidtextfieldandroid-jetpack-composeandroid-jetpack-compose-text
Ivan Abramov
Ivan Abramov

Reputation: 849

Resizeable BasicTextField in Jetpack Compose

Is there a way to produce a resizeable BasicTextField in Jetpack Compose, so that its width would wrap text size when a user types in or deletes characters? They've solved a similar problem for flutter, but I didn't find out how to solve this for Compose. Flutter - how to make TextField width fit its text ("wrap content")

var text: String by rememberSaveable { mutableStateOf("") }
BasicTextField(
   value = text,
   onValueChange = {
       text = it
   },
   modifier = Modifier.wrapContentWidth()
)

unfortunately, wrapContentWidth() doesn't work here.

Upvotes: 19

Views: 14747

Answers (2)

Ivan Abramov
Ivan Abramov

Reputation: 849

Well, looks like width(IntrinsicSize.Min) solves this problem:

var text: String by rememberSaveable { mutableStateOf("") }
BasicTextField(
   value = text,
   onValueChange = {
       text = it
   },
   modifier = Modifier.width(IntrinsicSize.Min)
)

Upvotes: 42

Santanu Sur
Santanu Sur

Reputation: 11477

We can specify the width range ( min and max width that the textField can span )

for width:-

modifier = Modifier.widthIn(1.dp, Dp.Infinity) // specified the min width as 1.dp

for height:-

modifier = Modifier.heightIn(1.dp, Dp.Infinity)

The composable code:-

Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
     OutlinedTextField(
        value = text,
        onValueChange = {
           text = it
        },
        modifier = Modifier.widthIn(1.dp, Dp.Infinity)
     )
}

The TextField would grow when we type more till Dp.Infinity. ( used OutlinedTextField for demo but we can use BasicTextField )

enter image description here

Upvotes: 6

Related Questions