Negozio: La griglia dei prodotti

Fa parte della sezione Progetti del percorso Flutter di Coddy. Lezione 19 di 36.

La terza app è un piccolo negozio: una griglia di prodotti, una pagina per ciascuno, un carrello e una procedura di pagamento. È la struttura della maggior parte delle app per lo shopping e riporta in scena Provider e intl.

I prodotti sono già presenti nel progetto iniziale, ciascuno con un nome, un prezzo, un’icona, un colore e una descrizione. Un negozio li mostra in una griglia, due per riga su un telefono:

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 è la larghezza divisa per l’altezza: 0.8 rende ogni scheda un po’ più alta che larga, lasciando spazio per un’immagine e due righe di testo.

Ogni scheda è un widget a sé, ProductCard, che riceve un Product. Al suo interno, un riquadro Expanded riempie lo spazio sopra il nome. Il suo colore è la tonalità più chiara del colore del prodotto, product.color.shade50, con l’icona sovrapposta nel colore pieno. Ecco perché color è un MaterialColor: ha diverse tonalità.

Sfida

Medio

Mostra i prodotti:

scrivi un widget ProductCard che accetta un product required
è una Card (con clipBehavior: Clip.antiAlias) che contiene una Column: un Container Expanded a larghezza piena in product.color.shade50 con l'icona del prodotto al centro (dimensione 56, product.color), poi il nome in titleMedium con 12 pixel di padding
sostituisci il Center con il GridView.count della teoria

Provalo tu

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'),
      ),
    );
  }
}