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,
),
],
),
),
],
),

View File

@@ -34,74 +34,85 @@ class QuickActionItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
return Material(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(12),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Icon with optional badge
Stack(
clipBehavior: Clip.none,
children: [
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.primaryBlue.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
padding: const EdgeInsets.all(16),
child: Stack(
alignment: Alignment.center, // Center the column within the stack
clipBehavior: Clip.none,
children: [
Column(
mainAxisSize: MainAxisSize.max, // Take all available space
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Icon
Icon(
icon,
size: 20,
size: 32,
color: AppColors.primaryBlue,
),
),
// Badge
if (badge != null && badge!.isNotEmpty)
Positioned(
top: -4,
right: -4,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColors.danger,
borderRadius: BorderRadius.circular(10),
),
constraints: const BoxConstraints(
minWidth: 20,
minHeight: 20,
),
child: Text(
badge!,
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
const SizedBox(height: 8),
// Label
Text(
label,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Color(0xFF212121), // --text-dark
),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
// Badge (positioned absolute like HTML)
if (badge != null && badge!.isNotEmpty)
Positioned(
top: -4,
right: -4,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: AppColors.danger,
borderRadius: BorderRadius.circular(12),
),
constraints: const BoxConstraints(
minWidth: 20,
),
child: Text(
badge!,
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
),
],
),
const SizedBox(height: 8),
// Label
Text(
label,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
],
),
),
),
);

View File

@@ -41,24 +41,41 @@ class QuickActionSection extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
return Container(
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.07),
blurRadius: 15,
offset: const Offset(0, 4),
),
],
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 16,
children: [
// Section Title
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w700,
color: Color(0xFF212121), // --text-dark
height: 1.0, // Reduce line height to minimize spacing
),
),
const SizedBox(height: 12),
// Action Grid
_buildActionGrid(),
// Action Grid (always 3 columns to match HTML)
// Using Transform to remove spacing between title and grid
Transform.translate(
offset: const Offset(0, -4),
child: _buildActionGrid(),
),
],
),
),
@@ -66,17 +83,15 @@ class QuickActionSection extends StatelessWidget {
}
Widget _buildActionGrid() {
// Determine grid layout based on number of items
final int crossAxisCount = actions.length <= 2 ? 2 : 3;
return GridView.builder(
padding: EdgeInsets.zero, // Remove default GridView padding
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, // Always 3 columns to match HTML
childAspectRatio: 1.0,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: actions.length,
itemBuilder: (context, index) {