RadioButton en Jetpack Compose

🎥 Video Tutorial

Mira este video paso a paso para aprender a crear RadioButtons:

❓ ¿Qué es un RadioButton?

El RadioButton es un componente que permite al usuario seleccionar UNA opción entre varias. Es ideal para preguntas de opción múltiple o configuraciones donde solo se puede elegir una alternativa.

Ejemplo Visual:

Sumar

Restar

Multiplicar

📋 Parámetros obligatorios:

selected: Booleano que indica si está seleccionado
onClick: Función lambda que se ejecuta al hacer clic

📝 Forma Básica: Un RadioButton

Primero aprenderemos a crear un RadioButton simple:

Crear la variable observable

var selectedOption by rememberSaveable { mutableStateOf("sumar") }

Esta variable guarda la opción seleccionada actualmente.

Crear el Row

Row organiza los elementos horizontalmente (uno al lado del otro).

Nueva propiedad: verticalAlignment

Trabaja sobre el eje secundario (vertical) para centrar los elementos verticalmente dentro del Row.

Implementar RadioButton + Text

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    RadioButton(
        selected = selectedOption == "sumar",
        onClick = {
            selectedOption = "sumar"
        }
    )
    Text("Sumar")
}

✅ Cómo funciona:

selected compara si "sumar" == selectedOption
Si es igual → devuelve true → RadioButton se muestra seleccionado
Al hacer clic → actualiza selectedOption = "sumar"

🔢 Múltiples RadioButtons

Ahora veamos cómo crear varios RadioButtons para múltiples opciones:

var selectedOption by rememberSaveable { mutableStateOf("sumar") }

// Opción 1: Sumar
Row(verticalAlignment = Alignment.CenterVertically) {
    RadioButton(
        selected = selectedOption == "sumar",
        onClick = { selectedOption = "sumar" }
    )
    Text("Sumar")
}

// Opción 2: Restar
Row(verticalAlignment = Alignment.CenterVertically) {
    RadioButton(
        selected = selectedOption == "restar",
        onClick = { selectedOption = "restar" }
    )
    Text("Restar")
}

// Opción 3: Multiplicar
Row(verticalAlignment = Alignment.CenterVertically) {
    RadioButton(
        selected = selectedOption == "multiplicar",
        onClick = { selectedOption = "multiplicar" }
    )
    Text("Multiplicar")
}

⚠️ Problema:

Este código funciona, pero tiene mucha repetición. ¡Hay una forma más eficiente!

⚡ Forma Eficiente: Usando Listas

❌ Forma Manual

Código repetitivo
Difícil de mantener
Más propenso a errores

Manual

✅ Forma con Lista

Código limpio y conciso
Fácil de agregar opciones
Más profesional

Recomendado

Paso 1: Crear la lista de opciones

val opciones = listOf("sumar", "restar", "multiplicar")
var optionSelected by rememberSaveable { 
    mutableStateOf(opciones.first()) // Primer elemento
}

Paso 2: Recorrer la lista con forEach

opciones.forEach { opcion ->
    Row(verticalAlignment = Alignment.CenterVertically) {
        RadioButton(
            selected = optionSelected == opcion,
            onClick = { optionSelected = opcion }
        )
        Text(text = opcion)
    }
}

🎉 Resultado:

Con este código obtenemos el mismo resultado que antes, pero de forma mucho más elegante y mantenible. Si necesitas agregar más opciones, solo modificas la lista.

🔧 Función Composable Reutilizable

El siguiente paso es crear una función que puedas usar en cualquier parte de tu aplicación:

Crear la función RadioButtonUi

@Composable
fun RadioButtonUi(
    lista: List<String>,
    selectedOption: String,
    onClick: (String) -> Unit
) {
    lista.forEach { option ->
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp)
        ) {
            RadioButton(
                selected = selectedOption == option,
                onClick = { onClick(option) }
            )
            Text(
                text = option,
                modifier = Modifier.padding(start = 8.dp)
            )
        }
    }
}

📚 Explicación de los parámetros:

lista: Lista de opciones a mostrar
selectedOption: Opción actualmente seleccionada
onClick: Callback que se ejecuta al seleccionar una opción

Cómo usar la función

val opciones = listOf("sumar", "restar", "multiplicar")
var optionSelected by rememberSaveable { 
    mutableStateOf(opciones.first()) 
}

RadioButtonUi(
    lista = opciones,
    selectedOption = optionSelected,
    onClick = { item ->
        optionSelected = item
    }
)

✅ Flujo completo:

Usuario hace clic en un RadioButton
Se ejecuta onClick(option) dentro de RadioButtonUi
Esto invoca la lambda { item -> optionSelected = item }
Se actualiza optionSelected con el nuevo valor
La interfaz se recompone mostrando la nueva selección

📊 Comparación de Enfoques

🔸 Básico

Un RadioButton individual con su propia lógica.

Row {
  RadioButton(...)
  Text("Opción")
}

3 líneas/opción

🔹 Con forEach

Itera sobre una lista para crear múltiples opciones.

opciones.forEach {
  Row {
    RadioButton(...)
  }
}

1 bloque para todas

🔷 Función Reutilizable

Componente que se puede usar en toda la app.

RadioButtonUi(
  lista = opciones,
  ...
)

Profesional

🔘 RadioButton en Jetpack Compose