https://kotlinlang.org logo
#compose
Title
# compose
c

Christoph Wiesner

04/12/2022, 9:46 AM
I have an
OutlinedTextField
where i want to display a different border modifier when it’s focused. when chaining modifiers I get
IllegalStateException: Compose Runtime internal error. Unexpected or incorrect use of the Compose internal runtime API (Use active SlotWriter to determine anchor location instead)
(code in comment)
Copy code
val defaultBorder = Modifier.border(
    width = 1.dp,
    color = Color.Blue,
    shape = RoundedCornerShape(15.dp)
)

val bigBorder = Modifier.roundedFocusBorderLight(16.dp)

var borderModifier by remember {
    mutableStateOf(defaultBorder)
}

OutlinedTextField(
    onValueChange = {},
    value = "",
    modifier = Modifier
        .then(borderModifier)
        .height(200.dp)
        .defaultMinSize(minHeight = 56.dp)
        .onFocusChanged {
            borderModifier =
                if (it.isFocused) bigBorder else defaultBorder
        },

    colors = TextFieldDefaults.outlinedTextFieldColors(
        focusedBorderColor = Color.Transparent,
        unfocusedBorderColor = Color.Transparent
    )
)
and this is the modifier that should be displayed on focus
Copy code
@Stable
fun Modifier.roundedFocusBorderLight(cornerSize: Dp): Modifier = then(
    border(
        width = 2.dp,
        color = Color.Blue,
        RoundedCornerShape(cornerSize * 1.5f)
    )
        .padding(2.dp)
        .border(
            1.dp,
            color = Color.Green,
            RoundedCornerShape(cornerSize)
        )
)
a

Anastasia Rozovskaya

04/12/2022, 11:07 AM
Copy code
@Stable
fun Modifier.roundedFocusBorderLight(cornerSize: Dp): Modifier = composed {
    border(
        width = 2.dp,
        color = Color.Blue,
        RoundedCornerShape(cornerSize * 1.5f)
    )
        .padding(2.dp)
        .border(
            1.dp,
            color = Color.Green,
            RoundedCornerShape(cornerSize)
        )
}
changing
then()
to
composed { }
produces this behaviour
I’m not an expert, but you can use this approach as your starting point on a round to excellence with what you are trying to achieve. Hope this helps
c

Christoph Wiesner

04/12/2022, 12:08 PM
thanks for the input!
composed
is then not chaining them - resulting in a broken modifier, but maybe i find a working solution
👍 1
12 Views