Fetch por Categorias on work

lib/mvvm/views/home/categorias_navbar.dart

@@ -14,12 +14,14 @@ class _CategoriasNavBarState extends State<CategoriasNavBar> {
   @override
   void initState() {
     super.initState();
-    final homeViewModel = Provider.of<HomeViewModel>(context, listen: false);
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final homeViewModel = Provider.of<HomeViewModel>(context, listen: false);
+    });
   }
 
   @override
   Widget build(BuildContext context) {
-    final homeViewModel = Provider.of<HomeViewModel>(context);
+    final homeViewModel = Provider.of<HomeViewModel>(context, listen: false);
     return SingleChildScrollView(
       scrollDirection: Axis.horizontal,
       child: Column(
@@ -39,106 +41,163 @@ class _CategoriasNavBarState extends State<CategoriasNavBar> {
                     child:
                         const Icon(Icons.menu, color: Colors.white, size: 28)),
                 const SizedBox(width: 40),
-                Container(
-                  padding: const EdgeInsets.only(bottom: 5),
-                  decoration: const BoxDecoration(
-                    border: Border(
-                      bottom: BorderSide(
-                        color: Color.fromARGB(255, 47, 208, 229),
-                        width: 3.0,
+                //! Menu items
+                homeViewModel.categorias.isEmpty
+                    ? const Center(
+                        child: CircularProgressIndicator(),
+                      )
+                    : Row(
+                        children: homeViewModel.categorias
+                            .map((e) => Padding(
+                                padding:
+                                    const EdgeInsets.symmetric(horizontal: 8),
+                                child: GestureDetector(
+                                  onTap: () {
+                                    homeViewModel.selectCategoria(e);
+                                  },
+                                  child: AnimatedContainer(
+                                    duration: const Duration(milliseconds: 300),
+                                    curve: Curves.easeInOut,
+                                    padding: const EdgeInsets.only(bottom: 5),
+                                    decoration: BoxDecoration(
+                                      border: Border(
+                                        bottom: BorderSide(
+                                          color:
+                                              homeViewModel.selectedCategoria ==
+                                                      e
+                                                  ? const Color.fromARGB(
+                                                      255, 47, 208, 229)
+                                                  : Colors.transparent,
+                                          width:
+                                              homeViewModel.selectedCategoria ==
+                                                      e
+                                                  ? 3.0
+                                                  : 0.0,
+                                        ),
+                                      ),
+                                    ),
+                                    child: AnimatedDefaultTextStyle(
+                                      duration:
+                                          const Duration(milliseconds: 300),
+                                      curve: Curves.easeInOut,
+                                      style: TextStyle(
+                                        color:
+                                            homeViewModel.selectedCategoria == e
+                                                ? const Color.fromARGB(
+                                                    255, 47, 208, 229)
+                                                : Colors.white,
+                                        fontSize:
+                                            homeViewModel.selectedCategoria == e
+                                                ? 20
+                                                : 18,
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                      child: Text(e.nombre!),
+                                    ),
+                                  ),
+                                )))
+                            .toList(),
                       ),
-                    ),
-                  ),
-                  child: const Text(
-                    "Café",
-                    style: TextStyle(
-                      color: Color.fromARGB(255, 47, 208, 229),
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Bolsa',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Brunch',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Desserts',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Drinks',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Smoothies',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Tés',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Tisanas',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Vip',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const SizedBox(width: 40),
-                const Text(
-                  'Libros',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
+                // Container(
+                //   padding: const EdgeInsets.only(bottom: 5),
+                //   decoration: const BoxDecoration(
+                //     border: Border(
+                //       bottom: BorderSide(
+                //         color: Color.fromARGB(255, 47, 208, 229),
+                //         width: 3.0,
+                //       ),
+                //     ),
+                //   ),
+                //   child: const Text(
+                //     "Café",
+                //     style: TextStyle(
+                //       color: Color.fromARGB(255, 47, 208, 229),
+                //       fontSize: 18,
+                //       fontWeight: FontWeight.bold,
+                //     ),
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Bolsa',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Brunch',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Desserts',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Drinks',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Smoothies',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Tés',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Tisanas',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Vip',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(width: 40),
+                // const Text(
+                //   'Libros',
+                //   style: TextStyle(
+                //     color: Colors.white,
+                //     fontSize: 18,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
               ],
             ),
           ),

lib/mvvm/views/home/home_screen.dart

@@ -12,93 +12,6 @@ import 'package:turquessa_mesas_hoster/mvvm/views/home/producto/producto_screen.
 import 'package:turquessa_mesas_hoster/utils/widgets/widgets.dart';
 import 'package:turquessa_mesas_hoster/utils/widgets/horario_modal.dart';
 
-const List<Map<String, dynamic>> items = [
-  {
-    'nombre': 'Hamburguesa de res',
-    'descripcion': 'Hamburguesa de res con queso cheddar',
-    'precio': '\$ 120.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de res',
-    'descripcion': 'Hamburguesa de res con queso cheddar',
-    'precio': '\$ 120.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-  {
-    'nombre': 'Hamburguesa de pollo',
-    'descripcion': 'Hamburguesa de pollo con queso cheddar',
-    'precio': '\$ 100.00',
-    'imageUrl':
-        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
-  },
-];
-
 class HomeScreen extends StatefulWidget {
   const HomeScreen({Key? key}) : super(key: key);
 
@@ -117,8 +30,10 @@ class _HomeScreenState extends State<HomeScreen> {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       Provider.of<ProductoViewModel>(context, listen: false)
           .sincronizarProductosYCategorias();
-      homeViewModel.fetchLocalCategorias();
       homeViewModel.isHorarioServicio();
+      homeViewModel.fetchLocalCategorias();
+      homeViewModel
+          .fetchLocalProductosPorCategoria(homeViewModel.selectedCategoria!);
       productoViewModel.sincronizarProductos();
       productoViewModel.sincronizarCategorias();
       productoViewModel.fetchLocalAll();
@@ -128,7 +43,7 @@ class _HomeScreenState extends State<HomeScreen> {
   @override
   Widget build(BuildContext context) {
     final homeViewModel = Provider.of<HomeViewModel>(context, listen: false);
-
+    final productos = homeViewModel.productos ?? [];
     return Scaffold(
         key: homeViewModel.scaffoldKey,
         drawer: const CustomDrawer(),
@@ -243,13 +158,17 @@ class _HomeScreenState extends State<HomeScreen> {
             SliverList(
                 delegate: SliverChildBuilderDelegate(
               (context, index) {
-                return _buildBurgerItem(
-                  items[index]['nombre'],
-                  items[index]['descripcion'],
-                  items[index]['precio'],
-                  items[index]['imageUrl'],
-                  context,
-                );
+                productos.isEmpty
+                    ? _buildBurgerItem(
+                        productos[index].nombre!,
+                        productos[index].descripcion!,
+                        productos[index].precio.toString(),
+                        productos[index].media![0].ruta! ?? ' ',
+                        context,
+                      )
+                    : const Center(
+                        child: CircularProgressIndicator(),
+                      );
               },
               childCount: items.length,
             ))