חנות: רשת המוצרים

חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 19 מתוך 36.

האפליקציה השלישית היא חנות קטנה: רשת של מוצרים, עמוד לכל מוצר, עגלת קניות ותהליך תשלום. זהו המבנה של רוב אפליקציות הקניות, והוא מחזיר אותנו אל Provider ואל intl.

המוצרים נמצאים בקוד ההתחלתי, ולכל אחד מהם יש שם, מחיר, סמל, צבע ותיאור. חנות מציגה אותם ברשת, שניים בכל שורה בטלפון:

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 הוא הרוחב חלקי הגובה: 0.8 גורם לכל כרטיס להיות מעט גבוה יותר מרחב, עם מקום לתמונה ולשתי שורות טקסט.

כל כרטיס הוא רכיב משלו, ProductCard, שמקבל Product. בתוכו, אריח Expanded ממלא את המקום שמעל לשם. הצבע שלו הוא הגוון הבהיר ביותר של צבע המוצר, product.color.shade50, ומעליו מופיע הסמל בצבע מלא. לכן color הוא MaterialColor: יש לו גוונים.

אתגר

בינוני

הציגו את המוצרים:

כתבו רכיב ProductCard שמקבל product שהוא required
זהו Card (עם clipBehavior: Clip.antiAlias) שמכיל Column: רכיב Container מסוג Expanded ברוחב מלא בצבע product.color.shade50, ובמרכזו הסמל של המוצר (בגודל 56, בצבע product.color), ולאחר מכן השם ב-titleMedium עם ריווח פנימי של 12 פיקסלים
החליפו את Center ב-GridView.count מהתיאוריה

נסו בעצמכם

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