Desarrollando un campo de texto personalizado

No explica como trabaja los mutable State, literal

importamos lo que pide que importemos 😂

Enserio?

si alguien no le cambia el valor en el Edit text, hay que darle el valor del OnChange a “name”, no lo dice y mucho menos lo explica, pero se ve ahí como se corta el video 13:32

Buenas quisiera aportar y enriquecer el tema con este video, como siempre el feedback es bien recibido, saludos

Ejemplo State Jetpack Compose

mutableStateOf

State y MutableState
Para que un Composable sea consciente de que su estado ha cambiado y se recomponga, los parámetros de composición tienen que usar instancias de State. Si no, con una variable normal, Compose no es capaz de detectar que algo ha cambiado, y por tanto no se lanza la recomposición.

Tenemos dos variantes:

State: es un estado inmutable. Normalmente se usa de interfaz para proteger la modificacion del estado desde sitios en los que no queremos.
MutableState: se puede tanto leer como modificar su valor
Cuando el valor de un MutableState se modifica, todos los Composables que dependen de ese estado se recomponen, y por tanto, la UI se actualiza basada en ese nuevo estado de forma automática.

Fuente: https://devexperto.com/estado-jetpack-compose/

CustomTextField

package tech.yeswecode.coffe4coders.components

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LayoutCoordinates
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import tech.yeswecode.coffe4coders.ui.theme.Coffe4codersTheme


@Composable
fun CustomTextField(value: String,
                    placeholder: String,
                    enabled: Boolean = true,
                    trailingIcon: @Composable (() -> Unit)? = null,
                    onGloballyPositioned : ((LayoutCoordinates)-> Unit)? = null,
                    onValueChange: (String) -> Unit
                    ) {
        val focusManager = LocalFocusManager.current
        OutlinedTextField(
            value = value ,
            onValueChange = onValueChange,
            textStyle = TextStyle(color = Color.Black),
            label = {
                Text(placeholder, style = MaterialTheme.typography.caption)
            },
            modifier = Modifier.fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    if(onGloballyPositioned != null){
                        onGloballyPositioned(coordinates)
                    }
                },
            enabled= enabled,
            keyboardActions = KeyboardActions(
                onDone = {focusManager.clearFocus()}
            ),
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Done,
                keyboardType = KeyboardType.Text
            ),
            trailingIcon = trailingIcon
        )
}


@Preview(showBackground = true)
@Composable
fun CustomTextFieldPreview(){
    Coffe4codersTheme() {
        CustomTextField("","text field"){}
    }
}