build method

  1. @override
Widget build(
  1. BuildContext context
)
override

Builds the UI for a single order card.

Displays order details including ID, status, items, total, and an ExpansionTile for additional details like shipping address and delivery information.

Parameters:

Returns: A Widget representing the order card UI.

Implementation

@override
Widget build(BuildContext context) {
  final items = (orderData['items'] as List)
      .map((item) => CartItem.fromMap(item))
      .toList();
  final createdAt = (orderData['createdAt'] as Timestamp?)?.toDate();
  final total = orderData['total'] as double;
  final shippingDetails =
      orderData['shippingDetails'] as Map<String, dynamic>;
  final deliveryPerson =
      shippingDetails['deliveryPerson'] as Map<String, dynamic>?;

  return Card(
    elevation: 4,
    margin: const EdgeInsets.only(bottom: 16),
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Order #${orderData['orderId']}',
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                orderData['status'],
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: _getStatusColor(orderData['status']),
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Text(
            createdAt != null
                ? 'Ordered on: ${createdAt.day}/${createdAt.month}/${createdAt.year}'
                : 'Order Date Unavailable',
            style: const TextStyle(color: Colors.grey),
          ),
          const Divider(height: 16),
          ...items.map((item) => Padding(
                padding: const EdgeInsets.symmetric(vertical: 4),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Text(
                        '${item.productName} x ${item.quantity}',
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    Text(
                        '₹${(item.price * item.quantity).toStringAsFixed(2)}'),
                  ],
                ),
              )),
          const Divider(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                'Total',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
              Text(
                '₹${total.toStringAsFixed(2)}',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.green,
                  fontSize: 16,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          ExpansionTile(
            title: const Text('Order Details'),
            children: [
              ListTile(
                title: const Text('Shipping Address'),
                subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(shippingDetails['name']),
                    Text(shippingDetails['phone']),
                    Text(shippingDetails['address']),
                    Text(
                        '${shippingDetails['city']} - ${shippingDetails['pinCode']}'),
                  ],
                ),
              ),
              if (deliveryPerson != null &&
                  (orderData['status'] == 'Shipped' ||
                      orderData['status'] == 'Completed'))
                ListTile(
                  title: const Text('Delivery Person'),
                  subtitle: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(deliveryPerson['name']),
                      Text(deliveryPerson['phone']),
                    ],
                  ),
                ),
              ListTile(
                title: const Text('Delivery Option'),
                subtitle: Text(orderData['deliveryOption']),
              ),
              ListTile(
                title: const Text('Payment Method'),
                subtitle: Text(orderData['paymentMethod']),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}