Merge branch 'BRNDEV' into desarrollo

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

@@ -1,9 +1,14 @@
 import 'package:flutter/material.dart';
 
-class ProductScreen extends StatelessWidget {
+class ProductScreen extends StatefulWidget {
   const ProductScreen({super.key});
 
   @override
+  State<ProductScreen> createState() => _ProductScreenState();
+}
+
+class _ProductScreenState extends State<ProductScreen> {
+  @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
@@ -19,83 +24,458 @@ class ProductScreen extends StatelessWidget {
         ],
       ),
       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,
+      body: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Stack(children: [
+              Positioned(
+                top: 20,
+                left: 20,
+                child: IconButton(
+                  icon: const Icon(
+                    Icons.arrow_back,
+                    color: Colors.white,
+                    semanticLabel: "Regresar",
+                  ),
+                  onPressed: () => Navigator.pop(context),
                 ),
-                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(
+                    'Queso, Lechuga, tomate, cebolla, pepinillo, mayonesa, ketchup y moztaza. Acompañado de Papas y Soda',
+                    style: TextStyle(
+                      color: Colors.black,
+                      fontSize: 26,
+                    ),
+                  ),
+                  SizedBox(height: 10),
+                  Text(
+                    'MXN 115.00',
+                    style: TextStyle(
+                      color: Colors.black,
+                      fontSize: 36,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  Divider(
+                    height: 2,
+                  ),
+                  SizedBox(height: 10),
+                  ToppingsView(),
+                ],
               ),
             ),
-            Container(
-              height: 350,
-              width: double.infinity,
-              decoration: BoxDecoration(
-                borderRadius: const BorderRadius.only(
-                  topLeft: Radius.circular(25),
-                  topRight: Radius.circular(25),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class ToppingsView extends StatefulWidget {
+  const ToppingsView({super.key});
+
+  @override
+  State<ToppingsView> createState() => _ToppingsViewState();
+}
+
+class _ToppingsViewState extends State<ToppingsView> {
+  // Estado para controlar la expansión de cada sección
+  bool isToppingsExpanded = false;
+  bool isRefrescoExpanded = false;
+  bool isCoccionExpanded = false;
+  bool isQuesoExpanded = true;
+
+  // Estado para la selección de queso
+  bool isQuesoSelected = false;
+
+  // Opciones para los dropdowns (como ejemplo)
+  final List<String> toppingsOptions = [
+    'Cebolla',
+    'Pepperoni',
+    'Champiñones',
+    'Tocino',
+    'Pimiento',
+    'Jalapeño'
+  ];
+  final List<String> refrescoOptions = [
+    'Coca-Cola',
+    'Sprite',
+    'Fanta',
+    'Agua mineral'
+  ];
+  final List<String> coccionOptions = [
+    'Término medio',
+    'Tres cuartos',
+    'Bien cocido'
+  ];
+
+  // Selecciones actuales
+  List<String> selectedToppings = [];
+  String? selectedRefresco;
+  String? selectedCoccion;
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Container(
+        color: Colors.white,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // 1. Dropdown de Toppings
+              _buildDropdownSection(
+                title: "SELECCIONA 3 TOPPINGS",
+                subtitle: "Seleccione hasta 3 opciones",
+                isExpanded: isToppingsExpanded,
+                onTap: () {
+                  setState(() {
+                    isToppingsExpanded = !isToppingsExpanded;
+                  });
+                },
+                content: isToppingsExpanded ? _buildToppingsContent() : null,
+              ),
+              const Divider(color: Colors.grey),
+
+              // 2. Dropdown de Refresco
+              _buildDropdownSection(
+                title: "ELIGE UN REFRESCO SIN COSTO",
+                subtitle: "Seleccione hasta 1 opcion",
+                isExpanded: isRefrescoExpanded,
+                onTap: () {
+                  setState(() {
+                    isRefrescoExpanded = !isRefrescoExpanded;
+                  });
+                },
+                content: isRefrescoExpanded ? _buildRefrescoContent() : null,
+              ),
+              const Divider(color: Colors.grey),
+
+              // 3. Dropdown de Término de Cocción
+              _buildDropdownSection(
+                title: "Elige el término de cocción",
+                subtitle: "Seleccione mínimo 1 opciones",
+                isExpanded: isCoccionExpanded,
+                onTap: () {
+                  setState(() {
+                    isCoccionExpanded = !isCoccionExpanded;
+                  });
+                },
+                content: isCoccionExpanded ? _buildCoccionContent() : null,
+                showObligatorio: true,
+              ),
+              const Divider(color: Colors.grey),
+
+              // 4. Dropdown de Queso amarillo
+              _buildDropdownSection(
+                title: "Queso amarillo para papas",
+                subtitle: null, // Sin subtítulo
+                isExpanded: isQuesoExpanded,
+                onTap: () {
+                  setState(() {
+                    isQuesoExpanded = !isQuesoExpanded;
+                  });
+                },
+                content: isQuesoExpanded ? _buildQuesoContent() : null,
+              ),
+              const Divider(color: Colors.grey),
+
+              // 5. Sección de Comentarios
+              const SizedBox(height: 20),
+              const Text(
+                "Comentarios",
+                style: TextStyle(
+                  color: Colors.black,
+                  fontSize: 20,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const SizedBox(height: 10),
+              Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(8),
+                  border: Border.all(color: Colors.grey),
                 ),
-                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,
+                height: 80,
+                child: const TextField(
+                  style: TextStyle(color: Colors.black),
+                  maxLines: 3,
+                  decoration: InputDecoration(
+                    contentPadding: EdgeInsets.all(12),
+                    border: InputBorder.none,
+                    hintText: "Agrega instrucciones especiales...",
+                    hintStyle: TextStyle(color: Colors.grey),
                   ),
                 ),
               ),
-            )
-          ]),
-          const SizedBox(height: 20),
-          const Padding(
-            padding: EdgeInsets.symmetric(horizontal: 20),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  'Sandwich de pollo',
+
+              // 6. Precio
+              const SizedBox(height: 30),
+              const Center(
+                child: Text(
+                  "Precio: MXN 115.00",
                   style: TextStyle(
-                    color: Colors.black,
-                    fontSize: 44,
+                    color: Colors.white,
+                    fontSize: 24,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
-                SizedBox(height: 10),
-                Text(
-                  'Descripcion del producto',
-                  style: TextStyle(
+              ),
+              const SizedBox(height: 20),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  // Construye la estructura base de cada dropdown
+  Widget _buildDropdownSection({
+    required String title,
+    String? subtitle,
+    required bool isExpanded,
+    required VoidCallback onTap,
+    Widget? content,
+    bool showObligatorio = false,
+  }) {
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const SizedBox(height: 16),
+                    Text(
+                      title,
+                      style: const TextStyle(
+                        color: Colors.black,
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    if (subtitle != null) ...[
+                      const SizedBox(height: 4),
+                      Text(
+                        subtitle,
+                        style: const TextStyle(
+                          color: Colors.grey,
+                          fontSize: 16,
+                        ),
+                      ),
+                    ],
+                    if (subtitle == null) const SizedBox(height: 16),
+                  ],
+                ),
+              ),
+              if (showObligatorio) ...[
+                Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(20),
+                    border: Border.all(color: Colors.grey),
+                  ),
+                  child: const Text(
+                    "Obligatorio",
+                    style: TextStyle(color: Colors.grey),
+                  ),
+                ),
+                const SizedBox(width: 10),
+              ],
+              GestureDetector(
+                onTap: onTap,
+                child: Container(
+                  width: 40,
+                  height: 40,
+                  decoration: const BoxDecoration(
+                    color: Color(0xFF333333),
+                    shape: BoxShape.circle,
+                  ),
+                  child: Icon(
+                    isExpanded
+                        ? Icons.keyboard_arrow_up
+                        : Icons.keyboard_arrow_down,
                     color: Colors.black,
-                    fontSize: 36,
                   ),
                 ),
-                SizedBox(height: 10),
+              ),
+            ],
+          ),
+          if (content != null) content,
+          const SizedBox(height: 8),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildToppingsContent() {
+    return Column(
+      children: toppingsOptions.map((topping) {
+        final isSelected = selectedToppings.contains(topping);
+        return CheckboxListTile(
+          contentPadding: const EdgeInsets.symmetric(horizontal: 8),
+          title: Text(
+            topping,
+            style: const TextStyle(color: Colors.black),
+          ),
+          value: isSelected,
+          activeColor: Colors.blue,
+          checkColor: Colors.black,
+          side: const BorderSide(color: Colors.black),
+          onChanged: (bool? value) {
+            setState(() {
+              if (value == true) {
+                if (selectedToppings.length < 3) {
+                  selectedToppings.add(topping);
+                }
+              } else {
+                selectedToppings.remove(topping);
+              }
+            });
+          },
+        );
+      }).toList(),
+    );
+  }
+
+  // Contenido del dropdown de Refresco
+  Widget _buildRefrescoContent() {
+    return Column(
+      children: refrescoOptions.map((refresco) {
+        return RadioListTile<String>(
+          title: Text(
+            refresco,
+            style: const TextStyle(color: Colors.black),
+          ),
+          value: refresco,
+          groupValue: selectedRefresco,
+          activeColor: Colors.blue,
+          fillColor: MaterialStateProperty.resolveWith<Color>((states) {
+            return Colors.black;
+          }),
+          onChanged: (String? value) {
+            setState(() {
+              selectedRefresco = value;
+            });
+          },
+        );
+      }).toList(),
+    );
+  }
+
+  // Contenido del dropdown de Cocción
+  Widget _buildCoccionContent() {
+    return Column(
+      children: coccionOptions.map((coccion) {
+        return RadioListTile<String>(
+          title: Text(
+            coccion,
+            style: const TextStyle(color: Colors.black),
+          ),
+          value: coccion,
+          groupValue: selectedCoccion,
+          activeColor: Colors.blue,
+          fillColor: MaterialStateProperty.resolveWith<Color>((states) {
+            return Colors.black;
+          }),
+          onChanged: (String? value) {
+            setState(() {
+              selectedCoccion = value;
+            });
+          },
+        );
+      }).toList(),
+    );
+  }
+
+  // Contenido del dropdown de Queso
+  Widget _buildQuesoContent() {
+    return Container(
+      margin: const EdgeInsets.only(top: 8, bottom: 8),
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: InkWell(
+        onTap: () {
+          setState(() {
+            isQuesoSelected = !isQuesoSelected;
+          });
+        },
+        child: Row(
+          children: [
+            Container(
+              width: 24,
+              height: 24,
+              margin: const EdgeInsets.only(left: 12),
+              decoration: BoxDecoration(
+                border: Border.all(color: Colors.black),
+              ),
+              child: isQuesoSelected
+                  ? const Icon(Icons.check, color: Colors.black, size: 20)
+                  : null,
+            ),
+            const SizedBox(width: 16),
+            const Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
                 Text(
-                  'Precio: \$ 10.00',
+                  "Queso amarillo",
                   style: TextStyle(
                     color: Colors.black,
-                    fontSize: 36,
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
                   ),
                 ),
-                SizedBox(height: 10),
                 Text(
-                  'Existencia: 10',
+                  "+ MXN 5.00",
                   style: TextStyle(
                     color: Colors.black,
-                    fontSize: 36,
+                    fontSize: 16,
                   ),
                 ),
               ],
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }

lib/utils/widgets/modal_infonegaocio.dart

@@ -1,3 +1,4 @@
+import 'package:animate_do/animate_do.dart';
 import 'package:flutter/material.dart';
 
 void mostrarInformacionNegocioBottomSheet(BuildContext context) {
@@ -5,135 +6,139 @@ void mostrarInformacionNegocioBottomSheet(BuildContext context) {
     context: context,
     isScrollControlled: true,
     backgroundColor: Colors.transparent,
-    builder: (context) => Container(
-      height: MediaQuery.of(context).size.height * 0.7,
-      decoration: const BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.only(
-          topLeft: Radius.circular(25),
-          topRight: Radius.circular(25),
+    builder: (context) => FadeInRight(
+      duration: const Duration(milliseconds: 300),
+      child: Container(
+        height: MediaQuery.of(context).size.height * 0.7,
+        decoration: const BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(25),
+            topRight: Radius.circular(25),
+          ),
         ),
-      ),
-      child: SingleChildScrollView(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Container(
-              height: 150,
-              width: double.infinity,
-              decoration: BoxDecoration(
-                borderRadius: const BorderRadius.only(
-                  topLeft: Radius.circular(25),
-                  topRight: Radius.circular(25),
+        child: SingleChildScrollView(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                height: 150,
+                width: double.infinity,
+                decoration: BoxDecoration(
+                  borderRadius: const BorderRadius.only(
+                    topLeft: Radius.circular(25),
+                    topRight: Radius.circular(25),
+                  ),
+                  image: DecorationImage(
+                    image: const AssetImage('assets/turquessa_prop.jpg'),
+                    fit: BoxFit.cover,
+                    colorFilter: ColorFilter.mode(
+                      Colors.black.withOpacity(0.3),
+                      BlendMode.darken,
+                    ),
+                  ),
                 ),
-                image: DecorationImage(
-                  image: const AssetImage('assets/turquessa_prop.jpg'),
-                  fit: BoxFit.cover,
-                  colorFilter: ColorFilter.mode(
-                    Colors.black.withOpacity(0.3),
-                    BlendMode.darken,
+                child: Center(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Container(
+                        padding: const EdgeInsets.all(8),
+                        decoration: BoxDecoration(
+                          color: Colors.white,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Image.asset('assets/Turquessa.png', height: 50),
+                      ),
+                      const SizedBox(height: 10),
+                      const Text(
+                        'Turquessa-Coffee',
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontSize: 24,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ],
                   ),
                 ),
               ),
-              child: Center(
+
+              // Sección de información
+              Padding(
+                padding: const EdgeInsets.all(20),
                 child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Container(
-                      padding: const EdgeInsets.all(8),
-                      decoration: BoxDecoration(
-                        color: Colors.white,
-                        borderRadius: BorderRadius.circular(10),
-                      ),
-                      child: Image.asset('assets/Turquessa.png', height: 50),
-                    ),
-                    const SizedBox(height: 10),
                     const Text(
-                      'Turquessa-Coffee',
+                      'Acerca de nosotros',
                       style: TextStyle(
-                        color: Colors.white,
-                        fontSize: 24,
+                        fontSize: 18,
                         fontWeight: FontWeight.bold,
+                        color: Color(0xFF2FD0E5),
                       ),
                     ),
-                  ],
-                ),
-              ),
-            ),
-
-            // Sección de información
-            Padding(
-              padding: const EdgeInsets.all(20),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  const Text(
-                    'Acerca de nosotros',
-                    style: TextStyle(
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
-                      color: Color(0xFF2FD0E5),
+                    const SizedBox(height: 8),
+                    const Text(
+                      'Turquessa-Coffee es una cafetería de especialidad con los mejores granos seleccionados. Nuestro compromiso es ofrecer una experiencia única en cada taza.',
+                      style: TextStyle(fontSize: 14, color: Colors.black87),
                     ),
-                  ),
-                  const SizedBox(height: 8),
-                  const Text(
-                    'Turquessa-Coffee es una cafetería de especialidad con los mejores granos seleccionados. Nuestro compromiso es ofrecer una experiencia única en cada taza.',
-                    style: TextStyle(fontSize: 14, color: Colors.black87),
-                  ),
-                  const SizedBox(height: 20),
+                    const SizedBox(height: 20),
 
-                  // Información de contacto
-                  _buildInfoItem(Icons.location_on, 'Dirección',
-                      'Av. Principal #123, Zona Centro'),
-                  _buildInfoItem(Icons.access_time, 'Horario',
-                      'Lun-Vie: 7:00 - 20:00\nSáb-Dom: 8:00 - 18:00'),
-                  _buildInfoItem(Icons.phone, 'Teléfono', '(55) 1234-5678'),
-                  _buildInfoItem(Icons.email, 'Email', 'info@turquessa.com'),
-                  _buildInfoItem(
-                      Icons.language, 'Sitio web', 'www.turquessa.com'),
+                    // Información de contacto
+                    _buildInfoItem(Icons.location_on, 'Dirección',
+                        'C. Quintero Arce 248, El Llano'),
+                    _buildInfoItem(Icons.access_time, 'Horario',
+                        'Lun-Sáb: 8 a.m.- 10 p.m.\nDom: 4:00 p.m - 10 p.m'),
+                    _buildInfoItem(Icons.phone, 'Teléfono', '(662) 466 6626'),
+                    _buildInfoItem(
+                        Icons.email, 'Contacto', 'turquessacoffee@info.com'),
+                    _buildInfoItem(
+                        Icons.language, 'Sitio web', 'turquessacoffee.com'),
 
-                  const SizedBox(height: 20),
+                    const SizedBox(height: 20),
 
-                  // Redes sociales
-                  const Text(
-                    'Síguenos en redes sociales',
-                    style: TextStyle(
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
-                      color: Color(0xFF2FD0E5),
+                    // Redes sociales
+                    const Text(
+                      'Síguenos en redes sociales',
+                      style: TextStyle(
+                        fontSize: 18,
+                        fontWeight: FontWeight.bold,
+                        color: Color(0xFF2FD0E5),
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        _buildSocialButton(Icons.facebook, 'Facebook'),
+                        _buildSocialButton(Icons.camera_alt, 'Instagram'),
+                        _buildSocialButton(Icons.chat_bubble, 'Twitter'),
+                      ],
                     ),
-                  ),
-                  const SizedBox(height: 10),
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                    children: [
-                      _buildSocialButton(Icons.facebook, 'Facebook'),
-                      _buildSocialButton(Icons.camera_alt, 'Instagram'),
-                      _buildSocialButton(Icons.chat_bubble, 'Twitter'),
-                    ],
-                  ),
 
-                  const SizedBox(height: 30),
-                  Center(
-                    child: TextButton(
-                      onPressed: () => Navigator.pop(context),
-                      child: Container(
-                        padding: const EdgeInsets.symmetric(
-                            horizontal: 30, vertical: 10),
-                        decoration: BoxDecoration(
-                          color: const Color(0xFF2FD0E5),
-                          borderRadius: BorderRadius.circular(20),
+                    const SizedBox(height: 30),
+                    Center(
+                      child: TextButton(
+                        onPressed: () => Navigator.pop(context),
+                        child: Container(
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 30, vertical: 10),
+                          decoration: BoxDecoration(
+                            color: const Color(0xFF2FD0E5),
+                            borderRadius: BorderRadius.circular(20),
+                          ),
+                          child: const Text('Cerrar',
+                              style: TextStyle(color: Colors.white)),
                         ),
-                        child: const Text('Cerrar',
-                            style: TextStyle(color: Colors.white)),
                       ),
                     ),
-                  ),
-                  const SizedBox(height: 20),
-                ],
+                    const SizedBox(height: 20),
+                  ],
+                ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
     ),