Shop: Das Produkt-Raster

Teil des Abschnitts Projekte der Flutter-Journey von Coddy. Lektion 19 von 36.

Die dritte App ist ein kleiner Laden: ein Produktgitter, eine Seite für jedes Produkt, ein Warenkorb und ein Bezahlvorgang. Sie entspricht dem Aufbau der meisten Shopping-Apps und bringt Provider und intl zurück.

Die Produkte sind im Starter enthalten, jedes mit einem Namen, einem Preis, einem Symbol, einer Farbe und einer Beschreibung. Ein Laden zeigt sie in einem Gitter an, zwei pro Zeile auf einem Smartphone:

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 ist die Breite geteilt durch die Höhe: 0.8 macht jede Karte etwas höher als breit, mit Platz für ein Bild und zwei Textzeilen.

Jede Karte ist ein eigenes Widget, ProductCard, das ein Product entgegennimmt. Darin füllt eine Expanded-Kachel den Platz über dem Namen aus. Ihre Farbe ist der hellste Farbton der Produktfarbe, product.color.shade50, mit dem Symbol darüber in voller Farbe. Deshalb ist color ein MaterialColor: Es besitzt die Farbabstufungen.

Aufgabe

Mittel

Zeige die Produkte:

Schreibe ein ProductCard-Widget, das ein erforderliches product entgegennimmt
Es ist eine Card (mit clipBehavior: Clip.antiAlias), die eine Column enthält: einen Expanded-Container in voller Breite in product.color.shade50 mit dem Produktsymbol in der Mitte (Größe 56, product.color), danach den Namen in titleMedium mit 12 Pixel Abstand
Ersetze das Center durch das GridView.count aus der Theorie

Probier es selbst

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