How to get OutlinedTextField with gradient boarder in Jetpack Compose?

Question

I'm trying to get an OutlinedTextField with gradient border like this one:

---

But I can add only a single color to the outline,

OutlinedTextField(
    value = email,
    onValueChange = {email = it},
    label = { Text(text = "Email Address") },
    modifier = Modifier
        .fillMaxWidth(.8f)
        .padding(4.dp),
    colors = TextFieldDefaults.outlinedTextFieldColors(unfocusedBorderColor = Color.Green)
)

---

If I add a border with modifier then the gradient is applied to the border, not to the outline:

Modifier.border(width = 1.dp, brush = gradient, shape = RoundedCornerShape(12.dp))

---

How can I add gradient color to the outline?

Answer 1

so far that i know OutlinedTextField does't support gradient border. But if really want to use gradient border in text field you can try BasicTextField

    var name by remember {
        mutableStateOf("")
    }
    BasicTextField(
        value = name,
        onValueChange = { name = it },
        cursorBrush = Brush.horizontalGradient(listOf(Color.Red, Color.Green)),
        modifier = Modifier
            .fillMaxWidth(),
        decorationBox = { innerTextField ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .border(
                        brush = Brush.horizontalGradient(listOf(Color.Green, Color.Blue)),
                        width = 1.dp,
                        shape = CircleShape
                    )
                    .padding(16.dp)
            ) {
                Icon(Icons.Default.Email, contentDescription = "")
                Spacer(modifier = Modifier.padding(3.dp))
                innerTextField()
            }
        }
    )

and this is the final result

you can learn more about basic text field by looking the sample [BasicTextField Samples][2]