query regarding text field height in jetpack compose

2.7k Views Asked by At

how can i make the textfield, grow height with its text content? I tried with code similar to below, but its height is fixed, and doesn't grow.

demo image

Scaffold(
    topBar = {

    },
    content = {
        Box(modifier = Modifier.padding(it)) {
            
            Column(){
                LazyColumn(modifier = Modifier.fillMaxHeight(0.9)){
                    // some composable here for UI
                }
            
                Row(){
                    // icon
                
                    BasicTextField(
                        maxLines = 4,
                    )
                
                    // icon
                }
            }
            
        }
    }
)

though it seems that i have fixed the height by giving 0.9 to column, but i am not getting how not to give fixed height and still grow the textfield height dynamically with content?

1

There are 1 best solutions below

1
On BEST ANSWER

Check your constraint and weight.

You can use something like:

Column() {
    LazyColumn(modifier = Modifier.weight(1f)) {
       //....some composable here for UI
    }

    Row(){ /* .... */ }  
)

For example:

Row(
    Modifier.padding(horizontal = 8.dp),
    verticalAlignment = Alignment.CenterVertically
) {

    Icon(Icons.Filled.Add,"")

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .padding(2.dp)
            .weight(1f),
        maxLines = 4,
    ){ innerTextField ->
        Box(modifier = Modifier
            .background(LightGray,shape = RoundedCornerShape(4.dp))
            .padding(4.dp),
            contentAlignment = Alignment.CenterStart,){
            innerTextField()
        }
    }

    Icon(Icons.Filled.Send,"")
}

enter image description here