Home > Software design >  How to change Jectpack Compose BasicTextField's text color?
How to change Jectpack Compose BasicTextField's text color?

Time:02-23

I'm trying to make a search bar using BasicTextField.
The default text color is black and I couldn't find any option to change the text color.
Also I need to change the text size, font and other attributes.

@Composable
fun MyBasicTextField(){
    var text by remember { mutableStateOf("Hello") }
    BasicTextField(
        value = text,
        onValueChange = {
            text = it
        },
        decorationBox = { ... },
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.DarkGray, CircleShape)
            .padding(10.dp)
    )
}

Jetpack Compose BasicTextField

If this is not possible through BasicTextField, is there any other approach to create similar view?
I have tried TextField but there was several problems like removing label, height, background...

CodePudding user response:

You need textStyle parameter. If you prefer using default text style, use LocalTextStyle:

BasicTextField(
    // ...
    textStyle = LocalTextStyle.current.copy(color = Color.White)
)

Or you can use one of material styles:

BasicTextField(
    // ...
    textStyle = MaterialTheme.typography.body1.copy(color = Color.White)
)
  • Related