➜ Diseño de la interface de inicio

En esta lección, aprenderás a implementar la Pantalla de Inicio de tu aplicación de restaurante en Flutter. Esta pantalla servirá como una introducción visual a la app, mostrando un logotipo y un botón que llevará al usuario al menú principal.

Objetivos:

• Implementar una pantalla inicial con un fondo llamativo.
• Agregar una imagen representativa (logotipo).
• Añadir un botón que redirige al menú de la aplicación.

Estructura de la Pantalla de Inicio

1. Scaffold

El widget Scaffold es el contenedor base de la pantalla. Define la estructura general y el color de fondo de la interfaz, en este caso, con el color amber.

2. Stack

Utilizamos un Stack para posicionar varios elementos sobrepuestos, incluyendo el logotipo, el texto decorativo y el botón de navegación.

3. Texto Rotado en la Parte Inferior

• Se usa un Positioned para ubicar un contenedor con texto en la parte inferior derecha de la pantalla.
• El texto, "La mejor comida típika", está rotado 90 grados con el widget RotatedBox, estilizado con cursivas, espaciado de letras, y color blanco.

4. Logotipo del Restaurante

• En el centro de la pantalla, se muestra el logotipo de la app con un Image.asset, que carga una imagen desde los recursos locales.
• La imagen se ajusta al 50% del ancho de la pantalla y tiene una altura fija de 200px.

5. Botón de Navegación al Menú

• Se incluye un botón TextButton en la parte inferior de la pantalla. Está envuelto en un Container con estilo (color naranja y bordes redondeados).
• El botón tiene un ícono de flecha hacia la derecha, y al ser presionado, navega a la Pantalla del Menú mediante Navigator.pushReplacement.

Código de la Pantalla de Inicio:

dart

import 'package:apprestaurant/screens/pantallaMenu.dart';
import 'package:flutter/material.dart';

class Pantallainicio extends StatefulWidget {
  const Pantallainicio({super.key});

  @override
  State<Pantallainicio> createState() => _PantallainicioState();
}

class _PantallainicioState extends State<Pantallainicio> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Container(
        child: Stack(
          children: [
            Positioned(
              child: Align(
                alignment: FractionalOffset.bottomRight,
                child: Container(
                    padding: const EdgeInsets.only(
                        right: 15, left: 15, top: 30, bottom: 30),
                    decoration: const BoxDecoration(
                        color: Colors.orange,
                        borderRadius:
                            BorderRadius.only(topLeft: Radius.circular(50))),
                    child: const RotatedBox(
                      quarterTurns: 3,
                      child: Padding(
                        padding: EdgeInsets.all(10),
                        child: Text(
                          "La mejor comida típika",
                          style: TextStyle(
                              fontSize: 25.0,
                              color: Colors.white,
                              letterSpacing: 5,
                              fontStyle: FontStyle.italic),
                        ),
                      ),
                    )),
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Image.asset(
                    "assets/img/ic_logo.png",
                    width: MediaQuery.of(context).size.width / 2,
                    height: 200,
                  ),
                ),
                const SizedBox(height: 100),
                TextButton(
                    onPressed: () {
                      Navigator.of(context).pushReplacement(
                          MaterialPageRoute(builder: (_) => PantallaMenu()));
                    },
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.orange,
                          borderRadius: BorderRadius.circular(35)),
                      child: const Padding(
                        padding: EdgeInsets.all(20),
                        child: Icon(
                          Icons.chevron_right,
                          color: Colors.white,
                        ),
                      ),
                    ))
              ],
            )
          ],
        ),
      ),
    );
  }
}

Explicación del Código:

1. Scaffold:

   • El Scaffold es la estructura principal de la pantalla, con un fondo color amber.

2. Stack:

   • Utiliza un Stack para superponer varios elementos:
     • Un texto rotado en la parte inferior derecha.
     • El logotipo del restaurante centrado.
     • Un botón de navegación en la parte inferior.

3. Texto Estilizado:

   • El texto "La mejor comida típika" está rotado 90 grados utilizando el widget RotatedBox. Se aplica un estilo con letra cursiva, color blanco y un espaciado de letras de 5px, dándole un toque llamativo y visualmente atractivo.

4. Logotipo:

   • En el centro de la pantalla, se incluye el logotipo del restaurante, utilizando Image.asset para cargar la imagen local. Este logotipo tiene una altura fija de 200px y un ancho que ocupa la mitad de la pantalla.

5. Botón de Navegación:

   • El botón lleva al usuario al menú principal de la aplicación. Se define con un TextButton estilizado mediante un Container con color naranja y bordes redondeados. Al presionar el botón, se ejecuta Navigator.pushReplacement, que redirige al usuario a la Pantalla Menú.