|
@@ -1,5 +1,22 @@
|
|
|
import 'package:flutter/material.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',
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
class CarritoScreen extends StatefulWidget {
|
|
|
const CarritoScreen({super.key});
|
|
|
|
|
@@ -13,16 +30,128 @@ class _CarritoScreenState extends State<CarritoScreen> {
|
|
|
return Scaffold(
|
|
|
backgroundColor: Colors.white,
|
|
|
appBar: AppBar(
|
|
|
- title: Row(
|
|
|
+ title: const Row(
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
children: [
|
|
|
Text('Atrás'),
|
|
|
+ Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Text(
|
|
|
+ 'Su carrito',
|
|
|
+ style: TextStyle(
|
|
|
+ fontStyle: FontStyle.italic,
|
|
|
+ fontSize: 16,
|
|
|
+ color: Colors.black54),
|
|
|
+ ),
|
|
|
+ Text(
|
|
|
+ 'Total: \$0.00',
|
|
|
+ style: TextStyle(
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ fontSize: 20,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
- body: Column(
|
|
|
- children: [],
|
|
|
- ),
|
|
|
+ body: ListView.builder(
|
|
|
+ itemBuilder: (context, index) {
|
|
|
+ final item = items[index];
|
|
|
+ return _buildInfoItem(item['nombre'], item['descripcion'],
|
|
|
+ item['precio'], item['imageUrl']);
|
|
|
+ },
|
|
|
+ itemCount: items.length),
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+_buildInfoItem(String title, String subtitle, String precio, String imageUrl) {
|
|
|
+ return Container(
|
|
|
+ height: 90,
|
|
|
+ width: double.infinity,
|
|
|
+ color: Colors.white,
|
|
|
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ // Leading image
|
|
|
+ Container(
|
|
|
+ width: 80,
|
|
|
+ height: 80,
|
|
|
+ child: ClipRRect(
|
|
|
+ borderRadius: BorderRadius.circular(4),
|
|
|
+ child: Image.network(
|
|
|
+ imageUrl,
|
|
|
+ fit: BoxFit.cover,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(width: 16),
|
|
|
+ // Title and subtitle
|
|
|
+ Expanded(
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ mainAxisAlignment: MainAxisAlignment.center,
|
|
|
+ children: [
|
|
|
+ Text(
|
|
|
+ title,
|
|
|
+ style: TextStyle(
|
|
|
+ color: Colors.black,
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(height: 4),
|
|
|
+ Text(
|
|
|
+ 'MXN $precio',
|
|
|
+ style: TextStyle(
|
|
|
+ color: Colors.black,
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ // Quantity controls
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ width: 40,
|
|
|
+ height: 40,
|
|
|
+ alignment: Alignment.center,
|
|
|
+ child: Icon(
|
|
|
+ Icons.remove,
|
|
|
+ color: Colors.black,
|
|
|
+ size: 24,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ width: 40,
|
|
|
+ alignment: Alignment.center,
|
|
|
+ child: Text(
|
|
|
+ subtitle,
|
|
|
+ style: TextStyle(
|
|
|
+ color: Colors.black,
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ Container(
|
|
|
+ width: 40,
|
|
|
+ height: 40,
|
|
|
+ alignment: Alignment.center,
|
|
|
+ child: Icon(
|
|
|
+ Icons.add,
|
|
|
+ color: Colors.red,
|
|
|
+ size: 24,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+}
|