➜ Navegación y pantalla de Inicio

En esta lección del curso Carta Digital App en Kotlin, aprenderás a implementar la pantalla de bienvenida de tu aplicación y cómo conectar múltiples pantallas usando el componente NavHost de Jetpack Compose. Verás cómo configurar la navegación en tu MainActivity, y cómo diseñar una interfaz sencilla pero funcional para dar la bienvenida a tus usuarios.

🎯 ¿Qué aprenderás en esta lección?

• Configurar una navegación básica con rememberNavController() y NavHost.
• Crear rutas con un objeto AppRoutes centralizado.
• Diseñar la pantalla de inicio con Jetpack Compose.
• Realizar la transición entre pantallas (por ejemplo, de inicio a carta digital).

MainActivity.kt

package codea.app.cartadigital

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import codea.app.cartadigital.screens.ScreenAdmin
import codea.app.cartadigital.screens.ScreenCarta
import codea.app.cartadigital.screens.ScreenInicio
import codea.app.cartadigital.ui.theme.CartaDigitalTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CartaDigitalTheme {
                Surface(
                    modifier = Modifier.fillMaxSize()
                ) {
                    AppNavigation()
                }
            }
        }
    }
}

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = AppRoutes.SCREEN_INICIO
    ) {
        // Pantalla de inicio
        composable(AppRoutes.SCREEN_INICIO) {
            ScreenInicio(
                onEnterClick = {
                    navController.navigate(AppRoutes.SCREEN_CARTA)
                }
            )
        }

        // Pantalla de la carta
        composable(AppRoutes.SCREEN_CARTA) {
            ScreenCarta()
        }

        // Si tuvieras más pantallas como admin, login o pedido:
        composable(AppRoutes.SCREEN_ADMIN) {
            ScreenAdmin()
        }
        // composable(AppRoutes.SCREEN_LOGIN) { /* ... */ }
        // composable(AppRoutes.SCREEN_PEDIDO) { /* ... */ }
    }
}

object AppRoutes {
    const val SCREEN_INICIO = "inicio"
    const val SCREEN_CARTA = "carta"
    const val SCREEN_PEDIDO = "pedido"
    const val SCREEN_LOGIN = "login"
    const val SCREEN_ADMIN = "admin"
}

✅ ScreenInicio.kt

package codea.app.cartadigital.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import codea.app.cartadigital.R

@Composable
fun ScreenInicio(onEnterClick: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.logo),
            contentDescription = "LOGO CARTA DIGITAL",
            modifier = Modifier
                .fillMaxWidth(0.3f)
                .padding(bottom = 50.dp)
        )
        Text(
            text = "Bienvenido a nuestro restaurant",
            style = MaterialTheme.typography.headlineMedium,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(bottom = 100.dp)
        )
        Button(onClick = onEnterClick) {
            Text("VER LA CARTA")
        }
    }
}

✅ScreenCarta.kt

package codea.app.cartadigital.screens

import androidx.compose.runtime.Composable

@Composable
fun ScreenCarta() {
}

Este módulo te enseña los fundamentos esenciales para estructurar una app moderna en Kotlin usando Jetpack Compose. La navegación declarativa y la composición modular hacen que el desarrollo sea más rápido, limpio y fácil de mantener.