ソースを参照

Sliver Changes

c90Beretta 2 ヶ月 前
コミット
d35a482ab0
共有1 個のファイルを変更した140 個の追加89 個の削除を含む
  1. 140 89
      lib/mvvm/views/home/home_screen.dart

+ 140 - 89
lib/mvvm/views/home/home_screen.dart

@@ -2,6 +2,93 @@ import 'package:flutter/material.dart';
 import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
 import 'package:turquessa_mesas_hoster/mvvm/views/home/categorias_navbar.dart';
 
+const List<Map<String, dynamic>> items = [
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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',
+  },
+  {
+    'titulo': '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);
 
@@ -25,6 +112,9 @@ class _HomeScreenState extends State<HomeScreen> {
         backgroundColor: Colors.white,
         body: CustomScrollView(
           slivers: [
+            SliverToBoxAdapter(
+              child: Container(),
+            ),
             SliverAppBar(
               floating: true,
               expandedHeight: 200, // Ajusta la altura para acomodar la imagen
@@ -78,101 +168,62 @@ class _HomeScreenState extends State<HomeScreen> {
                 ),
               ),
             ),
-            SliverList(delegate: SliverChildBuilderDelegate((context, index) {
-              return Column(
-                children: [
-                  CategoriasNavBar(),
-                  Container(
-                    width: double.infinity,
-                    padding: const EdgeInsets.symmetric(
-                        horizontal: 20, vertical: 10),
-                    child: const Text(
-                      "Turquessa-Coffee",
-                      style: TextStyle(
+            SliverPersistentHeader(
+              delegate: CategoriasSliverChild(),
+              pinned: true,
+            ),
+            SliverList(
+                delegate: SliverChildBuilderDelegate(
+              (context, index) {
+                if (index < items.length) {
+                  return Column(
+                    children: [
+                      _buildBurgerItem(
+                          items[index]['titulo'],
+                          items[index]['descripcion'],
+                          items[index]['precio'],
+                          items[index]['imageUrl']),
+                      const Divider(
                         color: Colors.black,
-                        fontSize: 28,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
-                  ),
-                  _buildBurgerItem(
-                      "1. Machiatto Vainilla",
-                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
-                      "MXN 115.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "2. Cappuccino Simple",
-                      "Solo café, leche y espuma de leche",
-                      "MXN 90.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "3. Frappé de Cajeta",
-                      "Café, leche, cajeta y hielo",
-                      "MXN 130.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "1. Machiatto Vainilla",
-                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
-                      "MXN 115.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "2. Cappuccino Simple",
-                      "Solo café, leche y espuma de leche",
-                      "MXN 90.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "3. Frappé de Cajeta",
-                      "Café, leche, cajeta y hielo",
-                      "MXN 130.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "1. Machiatto Vainilla",
-                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
-                      "MXN 115.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "2. Cappuccino Simple",
-                      "Solo café, leche y espuma de leche",
-                      "MXN 90.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "3. Frappé de Cajeta",
-                      "Café, leche, cajeta y hielo",
-                      "MXN 130.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
-                  _buildBurgerItem(
-                      "1. Machiatto Vainilla",
-                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
-                      "MXN 115.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "2. Cappuccino Simple",
-                      "Solo café, leche y espuma de leche",
-                      "MXN 90.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
-                  const Divider(color: Colors.grey, height: 1),
-                  _buildBurgerItem(
-                      "3. Frappé de Cajeta",
-                      "Café, leche, cajeta y hielo",
-                      "MXN 130.00",
-                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
-                ],
-              );
-            }))
+                        height: 2,
+                      )
+                    ],
+                  );
+                } else {
+                  return _buildBurgerItem(
+                      items[index]['titulo'],
+                      items[index]['descripcion'],
+                      items[index]['precio'],
+                      items[index]['imageUrl']);
+                }
+              },
+              childCount: items.length,
+            ))
           ],
         ));
   }
 }
 
+class CategoriasSliverChild extends SliverPersistentHeaderDelegate {
+  @override
+  Widget build(
+      BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return SingleChildScrollView(
+        scrollDirection: Axis.horizontal, child: CategoriasNavBar());
+  }
+
+  @override
+  double get maxExtent => 120.0;
+
+  @override
+  double get minExtent => 120.0;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
+    return false;
+  }
+}
+
 Widget _buildBurgerItem(
     String titulo, String descripcion, String precio, String imageUrl) {
   return Padding(