🧮 Cómo crear una calculadora con Jetpack Compose paso a paso

¿Querés aprender a crear tu primera calculadora en Android con Jetpack Compose? En este tutorial vas a construir una app funcional y moderna, con buenas prácticas y lista para personalizar.

1. Requisitos previos

• Android Studio actualizado (Arctic Fox o superior).
• SDK de Android configurado.
• Conocimientos básicos de Kotlin y Jetpack Compose.

(Si necesitás ayuda para configurar Android Studio, mirá mi post “Cómo configurar tu entorno de desarrollo Android Studio paso a paso”).

2. Crear el proyecto en Android Studio

1. Abrí Android Studio → New Project → Empty Compose Activity.
2. Configurá nombre, paquete y lenguaje (Kotlin).
3. Finalizá y esperá a que se genere la estructura.

(📸 Aquí podés insertar una imagen de la ventana “New Project” para hacerlo más visual).

3. Diseñar la interfaz de la calculadora

En MainActivity.kt vas a reemplazar el contenido con el siguiente código:

@Composable
fun CalculatorScreen() {
    var input by remember { mutableStateOf("0") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = input,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            style = MaterialTheme.typography.h4,
            textAlign = TextAlign.End
        )

        // Filas de botones
        val buttons = listOf(
            listOf("7", "8", "9", "/"),
            listOf("4", "5", "6", "*"),
            listOf("1", "2", "3", "-"),
            listOf("0", ".", "=", "+")
        )

        buttons.forEach { row ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                row.forEach { label ->
                    Button(
                        onClick = { /* TODO: lógica de cálculo */ },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                    ) {
                        Text(label)
                    }
                }
            }
        }
    }
}

@Composable
fun CalculatorScreen() {
    var input by remember { mutableStateOf("0") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = input,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            style = MaterialTheme.typography.h4,
            textAlign = TextAlign.End
        )

        // Filas de botones
        val buttons = listOf(
            listOf("7", "8", "9", "/"),
            listOf("4", "5", "6", "*"),
            listOf("1", "2", "3", "-"),
            listOf("0", ".", "=", "+")
        )

        buttons.forEach { row ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                row.forEach { label ->
                    Button(
                        onClick = { /* TODO: lógica de cálculo */ },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                    ) {
                        Text(label)
                    }
                }
            }
        }
    }
}

(📸 Sugerencia: insertar una captura de la calculadora funcionando en el emulador.)

4. Separar la lógica de cálculo (Buenas prácticas)

Para mantener limpio el código, creá una función aparte para procesar las operaciones:

fun evaluateExpression(expression: String): String {
    return try {
        val result = ExpressionBuilder(expression).build().evaluate()
        result.toString()
    } catch (e: Exception) {
        "Error"
    }
}

fun evaluateExpression(expression: String): String {
    return try {
        val result = ExpressionBuilder(expression).build().evaluate()
        result.toString()
    } catch (e: Exception) {
        "Error"
    }
}

Luego llamás a esta función en el onClick de los botones para actualizar el estado.

5. Personalizar el diseño

• Ajustá colores con MaterialTheme.colors.
• Cambiá tipografía con MaterialTheme.typography.
• Agregá animaciones a los botones con animateColorAsState para mejorar la experiencia de usuario.

6. Funcionalidades extra sugeridas

• Botón AC para limpiar.
• Soporte para porcentajes.
• Vibración al presionar botones (usando HapticFeedback).

(Esto enriquece tu app y la hace más profesional).

7. Recursos útiles

• Documentación oficial Jetpack Compose
• Guía Material Design
• Repositorio ejemplo en GitHub

8. Checklist descargable

Para que no te pierdas ningún paso, podés descargar mi Checklist PDF con todo este proceso resumido.

(Aquí colocás un botón tipo CTA con enlace al PDF que subas a tu WordPress).

9. Video complemento

Si preferís verlo en acción, te dejo un video de mi canal donde construyo esta app en tiempo real.
(Incrustás tu video de YouTube aquí)

📢 CTA final

“¿Te gustó este tutorial? Suscribite a mi blog para más guías de Android y Jetpack Compose.”