Toko: Grid Produk

Termasuk bagian Proyek dalam perjalanan Flutter di Coddy. Pelajaran 19 dari 36.

Aplikasi ketiga adalah toko kecil: kisi produk, halaman untuk setiap produk, keranjang, dan pembayaran. Bentuknya seperti kebanyakan aplikasi belanja, dan aplikasi ini kembali menggunakan Provider dan intl.

Produk sudah tersedia di starter, masing-masing dengan nama, harga, ikon, warna, dan deskripsi. Toko menampilkannya dalam kisi, dua produk per baris di ponsel:

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 adalah lebar dibagi tinggi: 0.8 membuat setiap kartu sedikit lebih tinggi daripada lebarnya, sehingga ada ruang untuk gambar dan dua baris teks.

Setiap kartu adalah widget tersendiri, ProductCard, yang menerima Product. Di dalamnya, tile Expanded mengisi ruang di atas nama. Warnanya adalah nuansa paling terang dari warna produk, product.color.shade50, dengan ikon dalam warna penuh di atasnya. Itulah alasan color bertipe MaterialColor: tipe ini memiliki nuansa-nuansa warna.

Tantangan

Sedang

Tampilkan produk:

tulis widget ProductCard yang menerima required product
widget ini berupa Card (dengan clipBehavior: Clip.antiAlias) yang menampung Column: Container Expanded selebar penuh dengan warna product.color.shade50 dan ikon produk di tengah (ukuran 56, product.color), lalu nama dengan titleMedium dan padding 12 piksel
ganti Center dengan GridView.count dari teori

Coba sendiri

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