How to chage size of input area in TextField jetpack compose

Question

I need to make a column of 3 textfields. Each of them must be 44.dp in height, but if I'll set it then text in input area does not fit and falls down.

How it should look:

How it looks now:

My code:

@Composable
fun TestingTextInput(number: Int, modifier: Modifier = Modifier){
    var text by remember { mutableStateOf("") }
    var isFocused by remember { mutableStateOf(false) }
    Box(modifier = modifier) {
        TextField(
            value = text,
            singleLine = true,
            onValueChange = { text = it },
            leadingIcon = { Text(text = "$number:", color = Color.Gray, fontSize = 15.sp, textAlign = TextAlign.End, modifier = Modifier.width(24.dp) )},
            modifier = Modifier
                .onFocusChanged { isFocused = it.isFocused }
                .verticalScroll(rememberScrollState(), enabled = true)
                .height(44.dp),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                focusedIndicatorColor = Light_Blue,
                unfocusedIndicatorColor = Color.Gray,
                disabledIndicatorColor = Color.Gray
            ),
            textStyle = TextStyle(fontFamily = robotoFamily, fontSize = 15.sp, fontWeight = FontWeight.Normal)
        )
    }
}

Changing padding, leading icon didn't help.

Answer 1

You can use the BasicTextField together with the TextFieldDecorationBox. In this way you can use the contentPadding attribute to reduce the vertical padding.

Something like:

    BasicTextField(
        value = text,
        singleLine = true,
        onValueChange = { text = it },
        interactionSource = interactionSource,
        modifier = Modifier
            .onFocusChanged { isFocused = it.isFocused }
            .verticalScroll(rememberScrollState(), enabled = true)
            .height(44.dp),
        textStyle = TextStyle( fontSize = 15.sp, fontWeight = FontWeight.Normal),
    ) { innerTextField ->

        TextFieldDefaults.TextFieldDecorationBox(
            value = text,
            innerTextField = innerTextField,
            leadingIcon =  { Text(text = "$number:", color = Color.Gray, fontSize = 15.sp, textAlign = TextAlign.End, modifier = Modifier.width(24.dp) )},

            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                focusedIndicatorColor = Blue200,
                unfocusedIndicatorColor = Color.Gray,
                disabledIndicatorColor = Color.Gray
            ),
            enabled = enabled,
            singleLine = singleLine,
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                top = 0.dp,
                bottom = 0.dp
            )
        )
    }