Tienda: La cuadrícula de productos

Parte de la sección Proyectos del Journey de Flutter de Coddy. Lección 19 de 36.

La tercera aplicación es una tienda pequeña: una cuadrícula de productos, una página para cada uno, un carrito y una pantalla de pago. Tiene la estructura de la mayoría de las aplicaciones de compras y vuelve a utilizar Provider e intl.

Los productos están en el proyecto inicial, cada uno con un nombre, un precio, un icono, un color y una descripción. Una tienda los muestra en una cuadrícula, dos por fila en un teléfono:

GridView.count(
  crossAxisCount: 2,
  padding: const EdgeInsets.all(16),
  mainAxisSpacing: 12,
  crossAxisSpacing: 12,
  childAspectRatio: 0.8,
  children: [for (Product product in products) ProductCard(product: product)],
)

childAspectRatio es el ancho dividido por el alto: 0.8 hace que cada tarjeta sea un poco más alta que ancha, con espacio para una imagen y dos líneas de texto.

Cada tarjeta es su propio widget, ProductCard, que recibe un Product. Dentro, un mosaico Expanded ocupa el espacio encima del nombre. Su color es el tono más claro del color del producto, product.color.shade50, con el icono superpuesto en el color completo. Por eso color es un MaterialColor: tiene los distintos tonos.

Desafío

Intermedio

Muestra los productos:

escribe un widget ProductCard que reciba un product required
es un Card (con clipBehavior: Clip.antiAlias) que contiene un Column: un Container de ancho completo dentro de un Expanded, en product.color.shade50, con el icono del producto en el centro (tamaño 56, product.color); después, el nombre en titleMedium con 12 píxeles de relleno
reemplaza Center por GridView.count, como en la teoría

Pruébalo tú mismo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
      ),
      home: const ShopScreen(),
    );
  }
}

class Product {
  const Product({
    required this.name,
    required this.price,
    required this.icon,
    required this.color,
    required this.description,
  });

  final String name;
  final double price;
  final IconData icon;
  final MaterialColor color;
  final String description;
}

const List<Product> products = [
  Product(
    name: 'Headphones',
    price: 59,
    icon: Icons.headphones,
    color: Colors.indigo,
    description: 'Wireless headphones with 30 hours of battery.',
  ),
  Product(
    name: 'Watch',
    price: 129,
    icon: Icons.watch,
    color: Colors.teal,
    description: 'A smart watch that counts your steps.',
  ),
  Product(
    name: 'Backpack',
    price: 45.5,
    icon: Icons.backpack,
    color: Colors.orange,
    description: 'Room for a laptop, a lunch and a jacket.',
  ),
  Product(
    name: 'Mug',
    price: 12,
    icon: Icons.coffee,
    color: Colors.brown,
    description: 'Holds a big coffee and keeps it warm.',
  ),
  Product(
    name: 'Camera',
    price: 1299,
    icon: Icons.photo_camera,
    color: Colors.blueGrey,
    description: 'A mirrorless camera for sharp photos.',
  ),
  Product(
    name: 'Sneakers',
    price: 89.99,
    icon: Icons.directions_run,
    color: Colors.red,
    description: 'Light running shoes for every day.',
  ),
];

class ShopScreen extends StatelessWidget {
  const ShopScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Coddy Shop')),
      body: const Center(
        child: Text('Products go here'),
      ),
    );
  }
}