المتجر: شبكة المنتجات

جزء من قسم المشاريع في رحلة 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 مطلوبًا
إنه 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'),
      ),
    );
  }
}