Mağaza: Ürün Izgarası

Coddy'nin Flutter Journey'sinin Projeler bölümünün bir parçası. Ders 19 / 36.

Üçüncü uygulama küçük bir mağaza: ürünlerden oluşan bir ızgara, her ürün için bir sayfa, bir sepet ve ödeme adımı. Bu, alışveriş uygulamalarının çoğunun yapısıdır ve Provider ile intl konularını yeniden ele alır.

Ürünler başlangıç projesinde yer alıyor; her birinin bir adı, fiyatı, simgesi, rengi ve açıklaması var. Bir mağaza bunları bir ızgarada, telefonda her satırda iki ürün olacak şekilde gösterir:

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, genişliğin yüksekliğe bölünmesidir: 0.8 değeri, her kartı eninden biraz daha uzun yapar; böylece bir resim ve iki satır metin için yer kalır.

Her kart, bir Product alan kendi widget’ı olan ProductCard’dır. İçinde, bir Expanded kutucuğu ürün adının üstündeki alanı doldurur. Rengi, ürün renginin en açık tonudur: product.color.shade50; üzerine de tam renkteki simge yerleştirilir. color bu yüzden bir MaterialColor’dır: tonları vardır.

Görev

Orta

Ürünleri göster:

required bir product alan ProductCard bileşenini yaz
Column içeren bir Card olsun (clipBehavior: Clip.antiAlias): product.color.shade50 renginde, tam genişlikte bir Container içinde ortalanmış ürün simgesi (boyut 56, product.color) bulunan bir Expanded; ardından 12 piksel dolgu ile titleMedium biçiminde ürün adı
Center bileşenini, kuramsal bölümdeki GridView.count ile değiştir

Kendin dene

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