add promotion/detail
This commit is contained in:
Phuoc Nguyen
195
lib/features/promotions/presentation/pages/promotions_page.dart
Normal file
195
lib/features/promotions/presentation/pages/promotions_page.dart
Normal file
@@ -0,0 +1,195 @@
|
||||
/// Promotions Page
|
||||
///
|
||||
/// Displays all available promotions with a featured promotion card
|
||||
/// at the top and a scrollable list of promotion cards below.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:worker/core/theme/colors.dart';
|
||||
import 'package:worker/features/home/domain/entities/promotion.dart';
|
||||
import 'package:worker/features/home/presentation/providers/promotions_provider.dart';
|
||||
import 'package:worker/features/promotions/presentation/widgets/featured_promotion_card.dart';
|
||||
import 'package:worker/features/promotions/presentation/widgets/promotion_card.dart';
|
||||
|
||||
/// Promotions Page
|
||||
///
|
||||
/// Shows:
|
||||
/// - Header bar with title
|
||||
/// - Featured promotion card (gradient background)
|
||||
/// - List of promotion cards
|
||||
///
|
||||
/// Layout designed for 375px width mobile screens.
|
||||
class PromotionsPage extends ConsumerWidget {
|
||||
const PromotionsPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// Watch promotions provider (same as home page)
|
||||
final promotionsAsync = ref.watch(promotionsProvider);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF4F6F8),
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Header
|
||||
_buildHeader(),
|
||||
|
||||
// Scrollable content
|
||||
Expanded(
|
||||
child: promotionsAsync.when(
|
||||
data: (promotions) => _buildPromotionsContent(
|
||||
context,
|
||||
promotions,
|
||||
),
|
||||
loading: () => const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
error: (error, stack) => Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
color: AppColors.danger,
|
||||
size: 48,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Không thể tải khuyến mãi',
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.grey900,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
error.toString(),
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build header bar
|
||||
Widget _buildHeader() {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: const Text(
|
||||
'Khuyến mãi',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFF212121),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build promotions content with featured card and list
|
||||
Widget _buildPromotionsContent(
|
||||
BuildContext context,
|
||||
List<Promotion> promotions,
|
||||
) {
|
||||
if (promotions.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.local_offer_outlined,
|
||||
size: 64,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Chưa có khuyến mãi',
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.grey900,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Hãy quay lại sau để xem các ưu đãi mới',
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return CustomScrollView(
|
||||
slivers: [
|
||||
// Featured Promotion Card (first promotion)
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 16, bottom: 24),
|
||||
child: FeaturedPromotionCard(
|
||||
title: promotions.first.title,
|
||||
subtitle: promotions.first.description,
|
||||
timerText: 'Còn 2 ngày 15:30:45',
|
||||
onTap: () {
|
||||
context.push('/promotions/${promotions.first.id}');
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Promotion List (all promotions)
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildListDelegate(
|
||||
promotions
|
||||
.map(
|
||||
(promotion) => PromotionCard(
|
||||
promotion: promotion,
|
||||
onTap: () {
|
||||
context.push('/promotions/${promotion.id}');
|
||||
},
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom padding for navigation clearance
|
||||
const SliverToBoxAdapter(
|
||||
child: SizedBox(height: 16),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user