Notificaciones

En Jetpack Compose, puedes crear fácilmente diálogos y Snackbars para mostrar mensajes o notificaciones. A continuación te muestro cómo implementar un AlertDialog y un Snackbar en una aplicación.

AlertDialog

Es una ventana emergente que solicita la atención del usuario y generalmente ofrece una decisión (aceptar, cancelar, etc.). Para poder hacer esto necesitamos crear un estado booleano que va controlar si el dialogo se muestra o no.

@Composable
fun DialogExample() {
    var showDialog by remember { mutableStateOf(false) }

    // Botón para mostrar el diálogo
    Button(onClick = { showDialog = true }) {
        Text("Mostrar Dialogo")
    }

    // Mostrar AlertDialog
    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            title = { Text(text = "Título del Diálogo") },
            text = { Text("Este es un mensaje dentro del diálogo.") },
            confirmButton = {
                Button(onClick = { showDialog = false }) {
                    Text("Aceptar")
                }
            },
            dismissButton = {
                Button(onClick = { showDialog = false }) {
                    Text("Cancelar")
                }
            }
        )
    }
}

Snackbar

Un Snackbar es una pequeña notificación que aparece en la parte inferior de la pantalla, generalmente para proporcionar comentarios sobre una operación realizada por el usuario. Vamos a configurar este tipo de notificaciones para que se muestren dentro del snackBarHost de un Scaffold.

@Composable
fun SnackbarExample() {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) },
        content = { innerPadding ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(innerPadding)
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar("Este es un Snackbar")
                    }
                }) {
                    Text("Mostrar Snackbar")
                }
            }
        }
    )
}