Product Screen

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 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/producto/producto_screen.dart';
 import 'dart:io';
 
 import 'core/models/models.dart';
@@ -82,6 +83,7 @@ class MyApp extends StatelessWidget {
       routes: {
         'login': (context) => const LoginScreen(),
         'home': (context) => const HomeScreen(),
+        'producto': (context) => const ProductScreen(),
       },
     );
   }

lib/mvvm/views/home/home_screen.dart

@@ -7,6 +7,7 @@ import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
 import 'package:turquessa_mesas_hoster/mvvm/views/home/categorias_navbar.dart';
 import 'package:turquessa_mesas_hoster/mvvm/viewmodels/home_view_model.dart';
 import 'package:turquessa_mesas_hoster/utils/widgets/modal_infonegaocio.dart';
+import 'package:turquessa_mesas_hoster/mvvm/views/home/producto/producto_screen.dart';
 
 const List<Map<String, dynamic>> items = [
   {
@@ -124,6 +125,32 @@ class _HomeScreenState extends State<HomeScreen> {
     final homeViewModel = Provider.of<HomeViewModel>(context);
     final pedidoViewModel = Provider.of<ProductoViewModel>(context);
     return Scaffold(
+        bottomNavigationBar: BottomAppBar(
+            color: Colors.black,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: [
+                IconButton(
+                  icon: const Icon(Icons.search, color: Colors.white),
+                  onPressed: () {},
+                ),
+                IconButton(
+                  icon: const Icon(Icons.menu, color: Colors.white),
+                  onPressed: () {},
+                ),
+                const Text(
+                  'Producto',
+                  style: TextStyle(
+                    color: Colors.cyanAccent,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                IconButton(
+                  icon: const Icon(Icons.favorite_border, color: Colors.white),
+                  onPressed: () {},
+                ),
+              ],
+            )),
         backgroundColor: Colors.white,
         body: CustomScrollView(
           slivers: [
@@ -191,7 +218,12 @@ class _HomeScreenState extends State<HomeScreen> {
             ),
             const SliverToBoxAdapter(
               child: Center(
-                child: Text('Coffee', style: TextStyle(fontSize: 30)),
+                child: Text('Coffee',
+                    style: TextStyle(
+                      fontSize: 40,
+                      fontWeight: FontWeight.bold,
+                      fontStyle: FontStyle.italic,
+                    )),
               ),
             ),
             SliverList(
@@ -202,6 +234,7 @@ class _HomeScreenState extends State<HomeScreen> {
                   items[index]['descripcion'],
                   items[index]['precio'],
                   items[index]['imageUrl'],
+                  context,
                 );
               },
               childCount: items.length,
@@ -231,10 +264,12 @@ class CategoriasSliverChild extends SliverPersistentHeaderDelegate {
   }
 }
 
-Widget _buildBurgerItem(
-    String nombre, String descripcion, String precio, String imageUrl) {
+Widget _buildBurgerItem(String nombre, String descripcion, String precio,
+    String imageUrl, BuildContext context) {
   return GestureDetector(
-    onTap: () {},
+    onTap: () {
+      Navigator.of(context).pushNamed('producto');
+    },
     child: Column(
       children: [
         Padding(

lib/mvvm/views/home/producto/producto_screen.dart

@@ -5,6 +5,98 @@ class ProductScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Placeholder();
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.info),
+            onPressed: () => (context) {
+              Navigator.of(context).pop();
+            },
+          ),
+        ],
+      ),
+      backgroundColor: Colors.white,
+      body: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Stack(children: [
+            Positioned(
+              top: 20,
+              left: 20,
+              child: IconButton(
+                icon: const Icon(
+                  Icons.arrow_back,
+                  color: Colors.white,
+                ),
+                onPressed: () => Navigator.pop(context),
+              ),
+            ),
+            Container(
+              height: 350,
+              width: double.infinity,
+              decoration: BoxDecoration(
+                borderRadius: const BorderRadius.only(
+                  topLeft: Radius.circular(25),
+                  topRight: Radius.circular(25),
+                ),
+                image: DecorationImage(
+                  image: NetworkImage(
+                      'https://cdn.pixabay.com/photo/2023/04/02/21/38/sandwich-7895477_1280.jpg'),
+                  fit: BoxFit.cover,
+                  colorFilter: ColorFilter.mode(
+                    Colors.black.withOpacity(0.3),
+                    BlendMode.darken,
+                  ),
+                ),
+              ),
+            )
+          ]),
+          const SizedBox(height: 20),
+          const Padding(
+            padding: EdgeInsets.symmetric(horizontal: 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Sandwich de pollo',
+                  style: TextStyle(
+                    color: Colors.black,
+                    fontSize: 44,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                SizedBox(height: 10),
+                Text(
+                  'Descripcion del producto',
+                  style: TextStyle(
+                    color: Colors.black,
+                    fontSize: 36,
+                  ),
+                ),
+                SizedBox(height: 10),
+                Text(
+                  'Precio: \$ 10.00',
+                  style: TextStyle(
+                    color: Colors.black,
+                    fontSize: 36,
+                  ),
+                ),
+                SizedBox(height: 10),
+                Text(
+                  'Existencia: 10',
+                  style: TextStyle(
+                    color: Colors.black,
+                    fontSize: 36,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }

pubspec.lock

@@ -1,6 +1,14 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  animate_do:
+    dependency: "direct main"
+    description:
+      name: animate_do
+      sha256: e5c8b92e8495cba5adfff17c0b017d50f46b2766226e9faaf68bc08c91aef034
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.0"
   async:
     dependency: transitive
     description:

pubspec.yaml

@@ -51,6 +51,7 @@ dependencies:
   url_launcher: ^6.3.0
   otp: ^3.1.4
   universal_html: ^2.2.4
+  animate_do: ^4.2.0
 
 dev_dependencies:
   flutter_test: