118 lines
3.2 KiB
Dart
Raw Normal View History

import 'package:flutter/material.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/product/product.dart';
import '../../../components/image/image.dart';
class ProductCard extends StatelessWidget {
const ProductCard({super.key, required this.product, this.onTap});
final Product product;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: 12.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
spreadRadius: 1,
blurRadius: 6,
offset: const Offset(0, 2),
),
],
),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
// Product Image
_buildProductImage(),
const SizedBox(width: 12),
// Product Info
Expanded(child: _buildProductInfo()),
],
),
),
),
);
}
Widget _buildProductImage() {
return Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.background,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: AppNetworkImage(url: product.imageUrl, fit: BoxFit.cover),
),
);
}
Widget _buildProductInfo() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.name,
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
product.description,
style: TextStyle(fontSize: 12, color: AppColor.textLight),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
product.price.currencyFormatRp,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColor.primary,
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: _getStatusColor().withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
product.isActive ? 'AKTIF' : 'NONAKTIF',
style: TextStyle(
fontSize: 12,
color: _getStatusColor(),
fontWeight: FontWeight.w500,
),
),
),
],
),
],
);
}
Color _getStatusColor() {
return product.isActive ? Colors.green : Colors.red;
}
}