|
@@ -2,8 +2,95 @@ import 'package:flutter/material.dart';
|
|
import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
|
|
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/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 {
|
|
class HomeScreen extends StatefulWidget {
|
|
- const HomeScreen({super.key});
|
|
|
|
|
|
+ const HomeScreen({Key? key}) : super(key: key);
|
|
|
|
|
|
@override
|
|
@override
|
|
State<HomeScreen> createState() => _HomeScreenState();
|
|
State<HomeScreen> createState() => _HomeScreenState();
|
|
@@ -23,88 +110,122 @@ class _HomeScreenState extends State<HomeScreen> {
|
|
Widget build(BuildContext context) {
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
backgroundColor: Colors.white,
|
|
- body: Column(
|
|
|
|
- children: [
|
|
|
|
- Container(
|
|
|
|
- height: 120,
|
|
|
|
- width: double.infinity,
|
|
|
|
- decoration: BoxDecoration(
|
|
|
|
- image: DecorationImage(
|
|
|
|
- image: Image.asset('assets/Turquessa.png').image,
|
|
|
|
|
|
+ body: CustomScrollView(
|
|
|
|
+ slivers: [
|
|
|
|
+ SliverToBoxAdapter(
|
|
|
|
+ child: Container(),
|
|
|
|
+ ),
|
|
|
|
+ SliverAppBar(
|
|
|
|
+ floating: true,
|
|
|
|
+ expandedHeight: 200, // Ajusta la altura para acomodar la imagen
|
|
|
|
+ flexibleSpace: FlexibleSpaceBar(
|
|
|
|
+ background: Image.asset(
|
|
|
|
+ 'assets/Turquessa.png',
|
|
fit: BoxFit.cover,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
- ),
|
|
|
|
- Container(
|
|
|
|
- color: Color.fromARGB(255, 47, 208, 229),
|
|
|
|
- padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
|
|
|
- child: Row(
|
|
|
|
- children: [
|
|
|
|
- Container(
|
|
|
|
- width: 80,
|
|
|
|
- height: 80,
|
|
|
|
- decoration: BoxDecoration(
|
|
|
|
- color: Colors.white,
|
|
|
|
- borderRadius: BorderRadius.circular(12),
|
|
|
|
- ),
|
|
|
|
- child: Center(
|
|
|
|
- child: Image.asset('assets/Turquessa.png'),
|
|
|
|
- ),
|
|
|
|
- ),
|
|
|
|
- const SizedBox(width: 20),
|
|
|
|
- const Text(
|
|
|
|
- 'Turquessa',
|
|
|
|
- style: TextStyle(
|
|
|
|
- color: Colors.black,
|
|
|
|
- fontSize: 26,
|
|
|
|
- fontWeight: FontWeight.bold,
|
|
|
|
- ),
|
|
|
|
- ),
|
|
|
|
- const SizedBox(width: 15),
|
|
|
|
- Container(
|
|
|
|
- padding: const EdgeInsets.all(8),
|
|
|
|
- decoration: BoxDecoration(
|
|
|
|
- shape: BoxShape.circle,
|
|
|
|
- border: Border.all(color: Colors.white, width: 2),
|
|
|
|
- ),
|
|
|
|
- child:
|
|
|
|
- const Icon(Icons.info, color: Colors.white, size: 20),
|
|
|
|
|
|
+ bottom: PreferredSize(
|
|
|
|
+ preferredSize:
|
|
|
|
+ Size.fromHeight(120), // Altura del contenido adicional
|
|
|
|
+ child: Container(
|
|
|
|
+ color: Color.fromARGB(255, 47, 208, 229),
|
|
|
|
+ padding:
|
|
|
|
+ const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
|
|
|
+ child: Row(
|
|
|
|
+ children: [
|
|
|
|
+ Container(
|
|
|
|
+ width: 80,
|
|
|
|
+ height: 80,
|
|
|
|
+ decoration: BoxDecoration(
|
|
|
|
+ color: Colors.white,
|
|
|
|
+ borderRadius: BorderRadius.circular(12),
|
|
|
|
+ ),
|
|
|
|
+ child: Center(
|
|
|
|
+ child: Image.asset('assets/Turquessa.png'),
|
|
|
|
+ ),
|
|
|
|
+ ),
|
|
|
|
+ const SizedBox(width: 20),
|
|
|
|
+ const Text(
|
|
|
|
+ 'Turquessa',
|
|
|
|
+ style: TextStyle(
|
|
|
|
+ color: Colors.black,
|
|
|
|
+ fontSize: 26,
|
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
|
+ ),
|
|
|
|
+ ),
|
|
|
|
+ const SizedBox(width: 15),
|
|
|
|
+ Container(
|
|
|
|
+ padding: const EdgeInsets.all(8),
|
|
|
|
+ decoration: BoxDecoration(
|
|
|
|
+ shape: BoxShape.circle,
|
|
|
|
+ border: Border.all(color: Colors.white, width: 2),
|
|
|
|
+ ),
|
|
|
|
+ child: const Icon(Icons.info,
|
|
|
|
+ color: Colors.white, size: 20),
|
|
|
|
+ ),
|
|
|
|
+ ],
|
|
),
|
|
),
|
|
- ],
|
|
|
|
|
|
+ ),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
- const CategoriasNavBar(),
|
|
|
|
- // Burger menu items
|
|
|
|
- Expanded(
|
|
|
|
- child: ListView(
|
|
|
|
- children: [
|
|
|
|
- _buildBurgerItem(
|
|
|
|
- "1. HAMBURGUESA SENCILLA",
|
|
|
|
- "QUESO, LECHUGA, TOMATE, CEBOLLA, PEPINILLO, MAYONESA, KETCHUP Y ...",
|
|
|
|
- "MXN 115.00",
|
|
|
|
- "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
|
|
|
|
- const Divider(color: Colors.grey, height: 1),
|
|
|
|
- _buildBurgerItem(
|
|
|
|
- "2. SINGLE BURGER",
|
|
|
|
- "HAMBURGUESA SOLA",
|
|
|
|
- "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. BACON BURGER",
|
|
|
|
- "HAMBURGUESA SENCILLA MÁS TOCINO. PAPAS Y SODA",
|
|
|
|
- "MXN 130.00",
|
|
|
|
- "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
|
|
|
|
- ],
|
|
|
|
- ),
|
|
|
|
|
|
+ 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,
|
|
|
|
+ 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(
|
|
Widget _buildBurgerItem(
|
|
- String title, String description, String price, String imageUrl) {
|
|
|
|
|
|
+ String titulo, String descripcion, String precio, String imageUrl) {
|
|
return Padding(
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 20),
|
|
padding: const EdgeInsets.symmetric(vertical: 20),
|
|
child: Row(
|
|
child: Row(
|
|
@@ -126,7 +247,7 @@ Widget _buildBurgerItem(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
children: [
|
|
Text(
|
|
Text(
|
|
- title,
|
|
|
|
|
|
+ titulo,
|
|
style: const TextStyle(
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
color: Colors.black,
|
|
fontSize: 22,
|
|
fontSize: 22,
|
|
@@ -135,7 +256,7 @@ Widget _buildBurgerItem(
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
Text(
|
|
- description,
|
|
|
|
|
|
+ descripcion,
|
|
style: const TextStyle(
|
|
style: const TextStyle(
|
|
color: Colors.grey,
|
|
color: Colors.grey,
|
|
fontSize: 16,
|
|
fontSize: 16,
|
|
@@ -143,7 +264,7 @@ Widget _buildBurgerItem(
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
const SizedBox(height: 20),
|
|
Text(
|
|
Text(
|
|
- price,
|
|
|
|
|
|
+ precio,
|
|
style: const TextStyle(
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
color: Colors.black,
|
|
fontSize: 24,
|
|
fontSize: 24,
|