20

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.

Improve this question
0

2 Answers 2

Reset to default
47

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) )
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

This really worked. You saved me !
wow, so the only solution worked for me, any clue why .wrapContentHeight() is not applicable?
I tried same concept to resize height but it did not work
Its works only without TextAlign for me
It works but this solution has a problem. A small part of left side of text is hidden when you type some characters. User has to scroll to solve that problem. Also, user can scroll and see empty space which can cause confusion. If any body has solution which can both wrap the text context and disable scrollable behaviour, let me know please.
Yess! I have this (A small part of left side of text is hidden when you type some characters) exact issue. Did you solve it?
|
7

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

Improve this answer

5 Comments

Oh great that was helpful!
But there's still a problem. Looks like this min = 1.dp you used would never be reached. Outline is much larger then text if it contains less then 10 characters, TextField probably has fixed minimal width... which I need to get rid of
It works when you type some value but you have in any case a minWidth >1.dp when you delete the characters.
yes its always keeping a minimum size by default, after which its resizable.
Ok, then how do I change this default minSize to 10.dp or so? @SantanuSur

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.