This commit is contained in:
Phuoc Nguyen
2025-10-24 14:07:22 +07:00
parent c4272f9a21
commit fbeaa3c9e8
5 changed files with 387 additions and 317 deletions

View File

@@ -14,17 +14,17 @@ import 'package:worker/features/home/domain/entities/promotion.dart';
/// Displays a horizontal scrollable list of promotion cards.
/// Each card shows an image, title, and brief description.
class PromotionSlider extends StatelessWidget {
/// List of promotions to display
final List<Promotion> promotions;
/// Callback when a promotion is tapped
final void Function(Promotion promotion)? onPromotionTap;
const PromotionSlider({
super.key,
required this.promotions,
this.onPromotionTap,
});
/// List of promotions to display
final List<Promotion> promotions;
/// Callback when a promotion is tapped
final void Function(Promotion promotion)? onPromotionTap;
@override
Widget build(BuildContext context) {
@@ -32,49 +32,54 @@ class PromotionSlider extends StatelessWidget {
return const SizedBox.shrink();
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Chương trình ưu đãi',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(
'Chương trình ưu đãi',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Color(0xFF212121), // --text-dark
),
),
),
),
SizedBox(
height: 230,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12),
itemCount: promotions.length,
itemBuilder: (context, index) {
return _PromotionCard(
promotion: promotions[index],
onTap: onPromotionTap != null
? () => onPromotionTap!(promotions[index])
: null,
);
},
const SizedBox(height: 12),
SizedBox(
height: 210, // 140px image + 54px text area
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: promotions.length,
itemBuilder: (context, index) {
return _PromotionCard(
promotion: promotions[index],
onTap: onPromotionTap != null
? () => onPromotionTap!(promotions[index])
: null,
);
},
),
),
),
],
],
),
);
}
}
/// Individual Promotion Card
class _PromotionCard extends StatelessWidget {
final Promotion promotion;
final VoidCallback? onTap;
const _PromotionCard({
required this.promotion,
this.onTap,
});
final Promotion promotion;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
@@ -82,13 +87,13 @@ class _PromotionCard extends StatelessWidget {
onTap: onTap,
child: Container(
width: 280,
margin: const EdgeInsets.symmetric(horizontal: 4),
margin: const EdgeInsets.only(right: 12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
@@ -96,6 +101,7 @@ class _PromotionCard extends StatelessWidget {
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Promotion Image
ClipRRect(
@@ -104,7 +110,7 @@ class _PromotionCard extends StatelessWidget {
child: CachedNetworkImage(
imageUrl: promotion.imageUrl,
height: 140,
width: double.infinity,
width: 280,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
height: 140,
@@ -126,35 +132,39 @@ class _PromotionCard extends StatelessWidget {
),
// Promotion Info
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
promotion.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
promotion.description,
style: TextStyle(
fontSize: 12,
color: AppColors.grey500,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
Container(
padding: const EdgeInsets.all(12),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(12),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
promotion.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF212121),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Text(
promotion.description,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF666666), // --text-muted
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),