renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add promotion/detail

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-10-24 14:42:14 +07:00
parent fbeaa3c9e8
commit 338d26a38a
12 changed files with 1681 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
lib/features/promotions/presentation/widgets/featured_promotion_card.dart Normal file
View File

@@ -0,0 +1,125 @@
/// Featured Promotion Card Widget
///
/// Displays a prominent featured promotion with gradient background,
/// typically shown at the top of the promotions page.
library;
import 'package:flutter/material.dart';
import 'package:worker/core/theme/colors.dart';
/// Featured Promotion Card
///
/// Shows a special promotion with:
/// - Gradient background (primary blue to light blue)
/// - Large title and subtitle
/// - Countdown timer (optional)
/// - Percentage icon
class FeaturedPromotionCard extends StatelessWidget {
/// Card title
final String title;
/// Card subtitle/description
final String subtitle;
/// Optional timer text (e.g., "Còn 2 ngày 15:30:45")
final String? timerText;
/// Optional tap callback
final VoidCallback? onTap;
const FeaturedPromotionCard({
required this.title,
required this.subtitle,
this.timerText,
this.onTap,
super.key,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [AppColors.primaryBlue, AppColors.lightBlue],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColors.primaryBlue.withValues(alpha: 0.3),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
child: Row(
children: [
// Left side - Text content
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 8),
// Subtitle
Text(
subtitle,
style: TextStyle(
fontSize: 14,
color: Colors.white.withValues(alpha: 0.9),
),
),
// Timer (if provided)
if (timerText != null) ...[
const SizedBox(height: 12),
Row(
children: [
Icon(
Icons.access_time,
size: 14,
color: Colors.white.withValues(alpha: 0.8),
),
const SizedBox(width: 4),
Text(
timerText!,
style: TextStyle(
fontSize: 12,
color: Colors.white.withValues(alpha: 0.8),
),
),
],
),
],
],
),
),
// Right side - Icon
const SizedBox(width: 16),
Icon(
Icons.percent,
size: 48,
color: Colors.white.withValues(alpha: 0.9),
),
],
),
),
);
}
}

62
lib/features/promotions/presentation/widgets/highlight_box.dart Normal file
View File

@@ -0,0 +1,62 @@
/// Highlight Box Widget
///
/// A highlighted box with gradient background used to emphasize
/// important information in promotion details.
library;
import 'package:flutter/material.dart';
/// Highlight Box Widget
///
/// Displays important promotion information with:
/// - Yellow/orange gradient background
/// - Border styling
/// - Centered text
/// - Optional emoji/icon
class HighlightBox extends StatelessWidget {
const HighlightBox({
required this.text,
this.emoji,
super.key,
});
/// Text to display in the highlight box
final String text;
/// Optional emoji or icon to display before text
final String? emoji;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: const EdgeInsets.symmetric(vertical: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFFEF3C7), // #fef3c7
Color(0xFFFED7AA), // #fed7aa
],
),
border: Border.all(
color: const Color(0xFFFBBF24), // #fbbf24
width: 1,
),
borderRadius: BorderRadius.circular(12),
),
child: Text(
emoji != null ? '$emoji $text' : text,
textAlign: TextAlign.center,
style: const TextStyle(
color: Color(0xFF92400E), // #92400e - brown color
fontSize: 15,
fontWeight: FontWeight.w600,
height: 1.5,
),
),
);
}
}

197
lib/features/promotions/presentation/widgets/promotion_card.dart Normal file
View File

@@ -0,0 +1,197 @@
/// Promotion Card Widget
///
/// Displays an individual promotion with image, title, description,
/// date range, and action button.
library;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:worker/core/router/app_router.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/home/domain/entities/promotion.dart';
/// Promotion Card
///
/// Shows:
/// - Promotion image (150px height)
/// - Title and description
/// - Date range with calendar icon
/// - "Chi tiết" button
class PromotionCard extends StatelessWidget {
/// Promotion data
final Promotion promotion;
/// Callback when card or detail button is tapped
final VoidCallback? onTap;
const PromotionCard({
required this.promotion,
this.onTap,
super.key,
});
@override
Widget build(BuildContext context) {
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.08),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Image
CachedNetworkImage(
imageUrl: promotion.imageUrl,
height: 150,
width: double.infinity,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
height: 150,
color: AppColors.grey100,
child: const Center(
child: CircularProgressIndicator(),
),
),
errorWidget: (context, url, error) => Container(
height: 150,
color: AppColors.grey100,
child: const Center(
child: Icon(
Icons.image_not_supported,
size: 48,
color: AppColors.grey500,
),
),
),
),
// Content
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title
Text(
promotion.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0xFF212121),
),
),
const SizedBox(height: 8),
// Description
Text(
promotion.description,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF666666),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
// Bottom row: Date and button
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Date range
Expanded(
child: Row(
children: [
const Icon(
Icons.calendar_today,
size: 12,
color: AppColors.primaryBlue,
),
const SizedBox(width: 4),
Expanded(
child: Text(
_formatDateRange(),
style: const TextStyle(
fontSize: 12,
color: AppColors.primaryBlue,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
const SizedBox(width: 8),
// Detail button
ElevatedButton(
onPressed: () {
if (onTap != null) {
onTap!();
} else {
// Navigate to promotion detail page
context.pushNamed(
RouteNames.promotionDetail,
extra: promotion,
);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primaryBlue,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
minimumSize: Size.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 0,
),
child: const Text(
'Chi tiết',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
],
),
],
),
),
],
),
),
);
}
/// Format date range for display
String _formatDateRange() {
final startDay = promotion.startDate.day.toString().padLeft(2, '0');
final startMonth = promotion.startDate.month.toString().padLeft(2, '0');
final endDay = promotion.endDate.day.toString().padLeft(2, '0');
final endMonth = promotion.endDate.month.toString().padLeft(2, '0');
final year = promotion.endDate.year;
return '$startDay/$startMonth - $endDay/$endMonth/$year';
}
}

220
lib/features/promotions/presentation/widgets/promotion_section.dart Normal file
View File

@@ -0,0 +1,220 @@
/// Promotion Section Widget
///
/// A reusable section widget for organizing content in promotion details.
/// Each section has a title with icon and customizable content.
library;
import 'package:flutter/material.dart';
import 'package:worker/core/theme/colors.dart';
/// Promotion Section Widget
///
/// Displays a content section with:
/// - Icon and title
/// - Custom content widget
/// - Bottom border separator
class PromotionSection extends StatelessWidget {
const PromotionSection({
required this.title,
required this.icon,
required this.content,
this.isLast = false,
super.key,
});
/// Section title
final String title;
/// Icon to display next to title
final IconData icon;
/// Content widget to display in the section
final Widget content;
/// Whether this is the last section (no bottom border)
final bool isLast;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
decoration: BoxDecoration(
border: isLast
? null
: const Border(
bottom: BorderSide(
color: Color(0xFFE2E8F0), // --border-color
width: 1,
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Section Title with Icon
Row(
children: [
Icon(
icon,
size: 20,
color: AppColors.primaryBlue,
),
const SizedBox(width: 8),
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Color(0xFF1E293B), // --text-primary
),
),
],
),
const SizedBox(height: 16),
// Section Content
content,
],
),
);
}
}
/// Promotion Content Text Widget
///
/// Standard text styling for section content with proper line height.
class PromotionContentText extends StatelessWidget {
const PromotionContentText(
this.text, {
this.isBold = false,
super.key,
});
final String text;
final bool isBold;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Text(
text,
style: TextStyle(
fontSize: 15,
color: const Color(0xFF64748B), // --text-secondary
height: 1.7,
fontWeight: isBold ? FontWeight.w600 : FontWeight.normal,
),
),
);
}
}
/// Promotion Bullet List Widget
///
/// Displays a list with custom bullet points.
class PromotionBulletList extends StatelessWidget {
const PromotionBulletList({
required this.items,
super.key,
});
final List<String> items;
@override
Widget build(BuildContext context) {
return Column(
children: items.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
final isLast = index == items.length - 1;
return Container(
padding: const EdgeInsets.symmetric(vertical: 8),
decoration: BoxDecoration(
border: isLast
? null
: const Border(
bottom: BorderSide(
color: Color(0xFFF1F5F9), // Light border
width: 1,
),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Custom bullet point
const Text(
'•',
style: TextStyle(
color: AppColors.primaryBlue,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 12),
// Item text
Expanded(
child: Text(
item,
style: const TextStyle(
fontSize: 15,
color: Color(0xFF64748B), // --text-secondary
height: 1.7,
),
),
),
],
),
);
}).toList(),
);
}
}
/// Contact Info Widget
///
/// Displays contact information with labels and values.
class ContactInfo extends StatelessWidget {
const ContactInfo({
required this.label,
required this.value,
super.key,
});
final String label;
final String value;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: '$label: ',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF64748B),
height: 1.7,
),
),
TextSpan(
text: value,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Color(0xFF64748B),
height: 1.7,
),
),
],
),
),
);
}
}