Loja: Grade de Produtos

Parte da seção Projetos do Journey de Flutter da Coddy. Lição 19 de 36.

O terceiro aplicativo é uma pequena loja: uma grade de produtos, uma página para cada um, um carrinho e um checkout. É o formato da maioria dos aplicativos de compras e traz de volta o Provider e o intl.

Os produtos estão no projeto inicial, cada um com um nome, um preço, um ícone, uma cor e uma descrição. Uma loja os exibe em uma grade, dois por linha em um celular:

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 é a largura dividida pela altura: 0.8 deixa cada cartão um pouco mais alto do que largo, com espaço para uma imagem e duas linhas de texto.

Cada cartão é seu próprio widget, ProductCard, que recebe um Product. Dentro dele, um bloco Expanded preenche o espaço acima do nome. Sua cor é o tom mais claro da cor do produto, product.color.shade50, com o ícone na cor completa por cima. É por isso que color é um MaterialColor: ele tem vários tons.

Desafio

Médio

Mostre os produtos:

escreva um widget ProductCard que recebe um product required
ele é um Card (com clipBehavior: Clip.antiAlias) que contém uma Column: um Container Expanded de largura total em product.color.shade50, com o ícone do produto no meio (tamanho 56, product.color); em seguida, o nome em titleMedium com 12 pixels de preenchimento
substitua o Center pelo GridView.count apresentado na teoria

Experimente você mesmo

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