Perfil SCreen on Work

lib/main.dart

@@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import 'package:sqflite_common_ffi/sqflite_ffi.dart';
 import 'package:turquessa_mesas_hoster/mvvm/views/home/carrito/carrito_screen.dart';
+import 'package:turquessa_mesas_hoster/mvvm/views/home/perfil/perfil_screen.dart';
 import 'package:turquessa_mesas_hoster/mvvm/views/home/producto/producto_screen.dart';
 import 'dart:io';
 
@@ -87,6 +88,7 @@ class MyApp extends StatelessWidget {
         'producto': (context) =>
             ProductScreen(product: Product.staticSandwich()),
         'carrito': (context) => const CarritoScreen(),
+        'perfil': (context) => const PerfilScreen(),
       },
     );
   }

lib/mvvm/views/home/home_screen.dart

@@ -149,7 +149,9 @@ class _HomeScreenState extends State<HomeScreen> {
                 ),
                 IconButton(
                   icon: const Icon(Icons.favorite_border, color: Colors.white),
-                  onPressed: () {},
+                  onPressed: () {
+                    Navigator.of(context).pushNamed('perfil');
+                  },
                 ),
               ],
             )),
@@ -182,7 +184,7 @@ class _HomeScreenState extends State<HomeScreen> {
                           borderRadius: BorderRadius.circular(12),
                         ),
                         child: Center(
-                          child: Image.asset('assets/Turquessa.png'),
+                          child: Image.asset('assets/props.png'),
                         ),
                       ),
                       const SizedBox(width: 20),

lib/mvvm/views/home/perfil/perfil_screen.dart

@@ -0,0 +1,307 @@
+import 'package:animate_do/animate_do.dart';
+import 'package:flutter/material.dart';
+
+class PerfilScreen extends StatefulWidget {
+  const PerfilScreen({super.key});
+
+  @override
+  State<PerfilScreen> createState() => _PerfilScreenState();
+}
+
+class _PerfilScreenState extends State<PerfilScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return SlideInRight(
+      duration: const Duration(milliseconds: 250),
+      child: Scaffold(
+        body: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          child: Column(
+            children: [
+              // Banner principal con fondo azul
+              Container(
+                width: double.infinity,
+                height: 200,
+                decoration: const BoxDecoration(
+                  color: Colors.blue,
+                  borderRadius: BorderRadius.only(
+                    bottomLeft: Radius.circular(20),
+                    bottomRight: Radius.circular(20),
+                  ),
+                ),
+                child: Stack(
+                  children: [
+                    // Texto del banner
+                    const Positioned(
+                      left: 20,
+                      top: 60,
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            'Bienvenido!',
+                            style: TextStyle(
+                              fontSize: 28,
+                              fontWeight: FontWeight.bold,
+                              color: Colors.white,
+                            ),
+                          ),
+                          SizedBox(height: 8),
+                          Text(
+                            'Visitanos el día de hoy para una oferta \n especial en productos seleccionados',
+                            style: TextStyle(
+                              fontSize: 24,
+                              fontWeight: FontWeight.bold,
+                              color: Colors.white,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    // Ilustración de personaje con mochila y teléfono
+                    Positioned(
+                      right: 20,
+                      bottom: 0,
+                      child: Image.asset(
+                        'assets/turquessa_prop.jpg',
+                        height: 150,
+                      ),
+                    ),
+                    // Icono de bombilla
+                    Positioned(
+                      right: 80,
+                      top: 60,
+                      child: Container(
+                        padding: const EdgeInsets.all(8),
+                        decoration: const BoxDecoration(
+                          color: Colors.yellow,
+                          shape: BoxShape.circle,
+                        ),
+                        child: const Icon(
+                          Icons.lightbulb,
+                          color: Colors.white,
+                          size: 24,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              //? Informaicon de usuario
+              Padding(
+                padding: const EdgeInsets.only(top: 16),
+                child: Container(
+                  width: double.infinity,
+                  padding: EdgeInsets.all(20),
+                  decoration: BoxDecoration(
+                    color: Color(0xFFF5F5F5),
+                    borderRadius: BorderRadius.circular(16),
+                  ),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      // Columna izquierda con la información del usuario
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            // Nombre del usuario
+                            Text(
+                              'Usuario Conocido',
+                              style: TextStyle(
+                                fontSize: 22,
+                                fontWeight: FontWeight.bold,
+                                color: Colors.black87,
+                              ),
+                            ),
+                            SizedBox(height: 8),
+
+                            // Correo electrónico
+                            Text(
+                              'atharva@gmail.com',
+                              style: TextStyle(
+                                fontSize: 16,
+                                color: Colors.black54,
+                              ),
+                            ),
+                            SizedBox(height: 8),
+
+                            // Año académico
+                            Text(
+                              'Year: be',
+                              style: TextStyle(
+                                fontSize: 16,
+                                color: Colors.black54,
+                              ),
+                            ),
+                            SizedBox(height: 12),
+
+                            // Botón de editar
+                            GestureDetector(
+                              onTap: () {
+                                // Acción para editar el perfil
+                              },
+                              child: Text(
+                                'Edit',
+                                style: TextStyle(
+                                  fontSize: 16,
+                                  fontWeight: FontWeight.w500,
+                                  color: Colors.blue,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      Container(
+                        width: 80,
+                        height: 80,
+                        child: Image.asset(
+                          'assets/user_with_laptop.png',
+                          fit: BoxFit.cover,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 16),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(16),
+                  child: Container(
+                    height: 110,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    width: double.infinity,
+                    color: Colors.white,
+                    child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          const Row(
+                            children: [
+                              Icon(Icons.nights_stay_rounded, size: 36),
+                              Padding(
+                                padding: EdgeInsets.only(left: 8),
+                                child: Text("Modo oscuro",
+                                    style: TextStyle(
+                                        fontSize: 29,
+                                        fontWeight: FontWeight.bold)),
+                              ),
+                            ],
+                          ),
+                          Switch(
+                            activeColor: Theme.of(context).primaryColor,
+                            value: false,
+                            onChanged: (value) {},
+                          ),
+                        ]),
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 16),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(16),
+                  child: Container(
+                    height: 110,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    width: double.infinity,
+                    color: Colors.white,
+                    child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          const Row(
+                            children: [
+                              Icon(Icons.lock_clock, size: 36),
+                              Padding(
+                                padding: EdgeInsets.only(left: 8),
+                                child: Text("Mis Pedidos",
+                                    style: TextStyle(
+                                        fontSize: 29,
+                                        fontWeight: FontWeight.bold)),
+                              ),
+                            ],
+                          ),
+                          IconButton(
+                              onPressed: () {},
+                              icon:
+                                  const Icon(Icons.arrow_forward_ios_rounded)),
+                        ]),
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 16),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(16),
+                  child: Container(
+                    height: 110,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    width: double.infinity,
+                    color: Colors.white,
+                    child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          const Row(
+                            children: [
+                              Icon(Icons.supervised_user_circle_sharp,
+                                  size: 36),
+                              Padding(
+                                padding: EdgeInsets.only(left: 8),
+                                child: Text("Conoce más de nosotros",
+                                    style: TextStyle(
+                                        fontSize: 29,
+                                        fontWeight: FontWeight.bold)),
+                              ),
+                            ],
+                          ),
+                          IconButton(
+                              onPressed: () {},
+                              icon:
+                                  const Icon(Icons.arrow_forward_ios_rounded)),
+                        ]),
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 16),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(16),
+                  child: Container(
+                      decoration: BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.circular(16),
+                        border: Border.all(color: Colors.red, width: 3),
+                      ),
+                      height: 110,
+                      padding: const EdgeInsets.symmetric(horizontal: 16),
+                      width: double.infinity,
+                      child: const Center(
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: [
+                            Icon(
+                              Icons.logout_outlined,
+                              size: 36,
+                              color: Colors.red,
+                            ),
+                            Text(
+                              "Cerrar Perfil",
+                              style: TextStyle(
+                                  fontWeight: FontWeight.bold,
+                                  fontSize: 30,
+                                  color: Colors.red),
+                            ),
+                          ],
+                        ),
+                      )),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}