feat: reward -> poin
This commit is contained in:
efrilm
@@ -0,0 +1,823 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../../common/theme/theme.dart';
|
||||
import '../../poin_page.dart';
|
||||
|
||||
@RoutePage()
|
||||
class ProductRedeemPage extends StatefulWidget {
|
||||
final Product product;
|
||||
final Merchant merchant;
|
||||
final PointCard pointCard;
|
||||
|
||||
const ProductRedeemPage({
|
||||
super.key,
|
||||
required this.product,
|
||||
required this.merchant,
|
||||
required this.pointCard,
|
||||
});
|
||||
|
||||
@override
|
||||
State<ProductRedeemPage> createState() => _ProductRedeemPageState();
|
||||
}
|
||||
|
||||
class _ProductRedeemPageState extends State<ProductRedeemPage>
|
||||
with TickerProviderStateMixin {
|
||||
bool _isProcessing = false;
|
||||
bool _showSuccess = false;
|
||||
String _redeemCode = '';
|
||||
late AnimationController _pulseController;
|
||||
late AnimationController _successController;
|
||||
late Animation<double> _pulseAnimation;
|
||||
late Animation<double> _successAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_pulseController = AnimationController(
|
||||
duration: Duration(milliseconds: 1500),
|
||||
vsync: this,
|
||||
);
|
||||
_successController = AnimationController(
|
||||
duration: Duration(milliseconds: 800),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_pulseAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
|
||||
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
|
||||
);
|
||||
_successAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
||||
CurvedAnimation(parent: _successController, curve: Curves.elasticOut),
|
||||
);
|
||||
|
||||
_pulseController.repeat(reverse: true);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pulseController.dispose();
|
||||
_successController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
bool get canRedeem =>
|
||||
widget.pointCard.availablePoints >= widget.product.pointsRequired;
|
||||
int get pointsShortage =>
|
||||
widget.product.pointsRequired - widget.pointCard.availablePoints;
|
||||
|
||||
Future<void> _processRedeem() async {
|
||||
setState(() {
|
||||
_isProcessing = true;
|
||||
});
|
||||
|
||||
// Simulate API call
|
||||
await Future.delayed(Duration(seconds: 2));
|
||||
|
||||
// Generate mock redeem code
|
||||
_redeemCode =
|
||||
'RDM${DateTime.now().millisecondsSinceEpoch.toString().substring(8)}';
|
||||
|
||||
setState(() {
|
||||
_isProcessing = false;
|
||||
_showSuccess = true;
|
||||
});
|
||||
|
||||
_pulseController.stop();
|
||||
_successController.forward();
|
||||
|
||||
// Auto dismiss after 3 seconds
|
||||
Future.delayed(Duration(seconds: 3), () {
|
||||
if (mounted) {
|
||||
Navigator.pop(
|
||||
context,
|
||||
true,
|
||||
); // Return true to indicate successful redemption
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColor.white,
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
// Custom App Bar with product image
|
||||
SliverAppBar(
|
||||
expandedHeight: 280,
|
||||
floating: false,
|
||||
pinned: true,
|
||||
backgroundColor: AppColor.white,
|
||||
elevation: 0,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
background: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.primary.withOpacity(0.1),
|
||||
AppColor.backgroundLight,
|
||||
],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: AnimatedBuilder(
|
||||
animation: _pulseAnimation,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: _isProcessing ? _pulseAnimation.value : 1.0,
|
||||
child: Container(
|
||||
width: 120,
|
||||
height: 120,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.primary.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
widget.product.image,
|
||||
style: TextStyle(fontSize: 48),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Product Details
|
||||
SliverToBoxAdapter(
|
||||
child: _showSuccess ? _buildSuccessView() : _buildProductDetails(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProductDetails() {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Merchant Info
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(widget.merchant.logo, style: TextStyle(fontSize: 16)),
|
||||
SizedBox(width: 6),
|
||||
Text(
|
||||
widget.merchant.name,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 16),
|
||||
|
||||
// Product Name & Popular Badge
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.product.name,
|
||||
style: AppStyle.h4.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.product.isPopular)
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.warning,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.local_fire_department,
|
||||
color: AppColor.white,
|
||||
size: 14,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
"Popular",
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
SizedBox(height: 8),
|
||||
|
||||
// Description
|
||||
Text(
|
||||
widget.product.fullDescription ?? widget.product.description,
|
||||
style: AppStyle.md.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 24),
|
||||
|
||||
// Points Required Card
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.primary.withOpacity(0.1),
|
||||
AppColor.primary.withOpacity(0.05),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: AppColor.primary.withOpacity(0.3)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.stars_rounded,
|
||||
color: AppColor.warning,
|
||||
size: 24,
|
||||
),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
"Points Required",
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"${widget.product.pointsRequired}",
|
||||
style: AppStyle.h3.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
"Points needed",
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
"${widget.pointCard.availablePoints}",
|
||||
style: AppStyle.h3.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: canRedeem
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
"Your points",
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 20),
|
||||
|
||||
// Insufficient Points Warning
|
||||
if (!canRedeem)
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.error.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: AppColor.error.withOpacity(0.3)),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.warning_amber_rounded,
|
||||
color: AppColor.error,
|
||||
size: 24,
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Insufficient Points",
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.error,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
"You need ${pointsShortage} more points to redeem this item",
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 24),
|
||||
|
||||
// Terms & Conditions
|
||||
_buildInfoSection(
|
||||
"Terms & Conditions",
|
||||
widget.product.termsAndConditions ??
|
||||
"• Valid for single use only\n• Cannot be combined with other offers\n• No cash value\n• Subject to availability\n• Valid at participating locations only",
|
||||
),
|
||||
|
||||
SizedBox(height: 16),
|
||||
|
||||
// Validity
|
||||
_buildInfoSection(
|
||||
"Validity",
|
||||
widget.product.validUntil ??
|
||||
"Valid until: 30 days from redemption date",
|
||||
),
|
||||
|
||||
SizedBox(height: 32),
|
||||
|
||||
// Redeem Button
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
child: ElevatedButton(
|
||||
onPressed: (_isProcessing || !canRedeem) ? null : _processRedeem,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: canRedeem
|
||||
? AppColor.primary
|
||||
: AppColor.textLight,
|
||||
foregroundColor: AppColor.white,
|
||||
elevation: canRedeem ? 4 : 0,
|
||||
shadowColor: AppColor.primary.withOpacity(0.3),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
),
|
||||
child: _isProcessing
|
||||
? Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
AppColor.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Text(
|
||||
"Processing...",
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: Text(
|
||||
canRedeem ? "Redeem Now" : "Insufficient Points",
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 20),
|
||||
|
||||
// Alternative action for insufficient points
|
||||
if (!canRedeem)
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: OutlinedButton(
|
||||
onPressed: () {
|
||||
// Navigate to earn points page or show earn points options
|
||||
_showEarnPointsOptions();
|
||||
},
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: AppColor.primary,
|
||||
side: BorderSide(color: AppColor.primary, width: 2),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.add_circle_outline, size: 20),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
"Earn More Points",
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSuccessView() {
|
||||
return AnimatedBuilder(
|
||||
animation: _successAnimation,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: _successAnimation.value,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(20),
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(height: 40),
|
||||
|
||||
// Success Icon
|
||||
Container(
|
||||
width: 100,
|
||||
height: 100,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.success,
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.success.withOpacity(0.3),
|
||||
blurRadius: 20,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
Icons.check_rounded,
|
||||
color: AppColor.white,
|
||||
size: 48,
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 24),
|
||||
|
||||
// Success Message
|
||||
Text(
|
||||
"Redemption Successful!",
|
||||
style: AppStyle.h4.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.success,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
|
||||
SizedBox(height: 12),
|
||||
|
||||
Text(
|
||||
"Your ${widget.product.name} is ready!",
|
||||
style: AppStyle.lg.copyWith(color: AppColor.textSecondary),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
|
||||
SizedBox(height: 32),
|
||||
|
||||
// Redeem Code Card
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: AppColor.success, width: 2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.success.withOpacity(0.1),
|
||||
blurRadius: 12,
|
||||
offset: Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
"Your Redeem Code",
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
vertical: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.backgroundLight,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
_redeemCode,
|
||||
style: AppStyle.h5.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.primary,
|
||||
letterSpacing: 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Text(
|
||||
"Show this code at ${widget.merchant.name}",
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 24),
|
||||
|
||||
// Points Deducted Info
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.stars, color: AppColor.primary, size: 20),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
"${widget.product.pointsRequired} points deducted",
|
||||
style: AppStyle.md.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInfoSection(String title, String content) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: AppColor.border),
|
||||
),
|
||||
child: Text(
|
||||
content,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
height: 1.6,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _showEarnPointsOptions() {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Colors.transparent,
|
||||
builder: (context) => Container(
|
||||
height: MediaQuery.of(context).size.height * 0.6,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// Handle
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 12),
|
||||
width: 40,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.textLight.withOpacity(0.5),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
|
||||
Padding(
|
||||
padding: EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Earn More Points",
|
||||
style: AppStyle.h5.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
"You need ${pointsShortage} more points to redeem this item",
|
||||
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
|
||||
),
|
||||
|
||||
SizedBox(height: 24),
|
||||
|
||||
// Earn Points Options
|
||||
_buildEarnOption(
|
||||
"🛍️",
|
||||
"Shop & Earn",
|
||||
"Earn 1 point for every \$1 spent",
|
||||
"Earn up to 500 points per day",
|
||||
),
|
||||
|
||||
_buildEarnOption(
|
||||
"🎯",
|
||||
"Complete Missions",
|
||||
"Daily and weekly challenges",
|
||||
"Earn 100-1000 points per mission",
|
||||
),
|
||||
|
||||
_buildEarnOption(
|
||||
"👥",
|
||||
"Refer Friends",
|
||||
"Invite friends to join",
|
||||
"Earn 500 points per referral",
|
||||
),
|
||||
|
||||
SizedBox(height: 20),
|
||||
|
||||
// Close Button
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColor.primary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
"Got it",
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEarnOption(
|
||||
String icon,
|
||||
String title,
|
||||
String description,
|
||||
String reward,
|
||||
) {
|
||||
return Container(
|
||||
margin: EdgeInsets.only(bottom: 12),
|
||||
padding: EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.backgroundLight,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: AppColor.border),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 48,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Center(child: Text(icon, style: TextStyle(fontSize: 24))),
|
||||
),
|
||||
SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
description,
|
||||
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
|
||||
),
|
||||
Text(
|
||||
reward,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Icon(Icons.arrow_forward_ios, color: AppColor.textLight, size: 16),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,911 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../common/theme/theme.dart';
|
||||
import '../../router/app_router.gr.dart';
|
||||
|
||||
// Models
|
||||
class PointCard {
|
||||
final int totalPoints;
|
||||
final int usedPoints;
|
||||
final String membershipLevel;
|
||||
|
||||
PointCard({
|
||||
required this.totalPoints,
|
||||
required this.usedPoints,
|
||||
required this.membershipLevel,
|
||||
});
|
||||
|
||||
int get availablePoints => totalPoints - usedPoints;
|
||||
}
|
||||
|
||||
class Merchant {
|
||||
final String id;
|
||||
final String name;
|
||||
final String logo;
|
||||
final List<Category> categories;
|
||||
|
||||
Merchant({
|
||||
required this.id,
|
||||
required this.name,
|
||||
required this.logo,
|
||||
required this.categories,
|
||||
});
|
||||
}
|
||||
|
||||
class Category {
|
||||
final String id;
|
||||
final String name;
|
||||
final String icon;
|
||||
final List<Product> products;
|
||||
|
||||
Category({
|
||||
required this.id,
|
||||
required this.name,
|
||||
required this.icon,
|
||||
required this.products,
|
||||
});
|
||||
}
|
||||
|
||||
class Product {
|
||||
final String id;
|
||||
final String name;
|
||||
final String image;
|
||||
final int pointsRequired;
|
||||
final String description;
|
||||
final bool isPopular;
|
||||
final String? fullDescription;
|
||||
final String? validUntil;
|
||||
final String? termsAndConditions;
|
||||
|
||||
Product({
|
||||
required this.id,
|
||||
required this.name,
|
||||
required this.image,
|
||||
required this.pointsRequired,
|
||||
required this.description,
|
||||
this.isPopular = false,
|
||||
this.fullDescription,
|
||||
this.validUntil,
|
||||
this.termsAndConditions,
|
||||
});
|
||||
}
|
||||
|
||||
@RoutePage()
|
||||
class PoinPage extends StatefulWidget {
|
||||
const PoinPage({super.key});
|
||||
|
||||
@override
|
||||
State<PoinPage> createState() => _PoinPageState();
|
||||
}
|
||||
|
||||
class _PoinPageState extends State<PoinPage> {
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
|
||||
// Sample data
|
||||
final PointCard pointCard = PointCard(
|
||||
totalPoints: 15000,
|
||||
usedPoints: 3500,
|
||||
membershipLevel: "Gold Member",
|
||||
);
|
||||
|
||||
final List<Merchant> merchants = [
|
||||
Merchant(
|
||||
id: "1",
|
||||
name: "Starbucks",
|
||||
logo: "☕",
|
||||
categories: [
|
||||
Category(
|
||||
id: "c1",
|
||||
name: "Beverages",
|
||||
icon: "🥤",
|
||||
products: [
|
||||
Product(
|
||||
id: "p1",
|
||||
name: "Americano",
|
||||
image: "☕",
|
||||
pointsRequired: 2500,
|
||||
description: "Classic black coffee",
|
||||
isPopular: true,
|
||||
),
|
||||
Product(
|
||||
id: "p2",
|
||||
name: "Cappuccino",
|
||||
image: "☕",
|
||||
pointsRequired: 3000,
|
||||
description: "Espresso with steamed milk",
|
||||
),
|
||||
Product(
|
||||
id: "p3",
|
||||
name: "Frappuccino",
|
||||
image: "🥤",
|
||||
pointsRequired: 4000,
|
||||
description: "Iced blended coffee",
|
||||
),
|
||||
],
|
||||
),
|
||||
Category(
|
||||
id: "c2",
|
||||
name: "Food",
|
||||
icon: "🍰",
|
||||
products: [
|
||||
Product(
|
||||
id: "p4",
|
||||
name: "Croissant",
|
||||
image: "🥐",
|
||||
pointsRequired: 1500,
|
||||
description: "Buttery pastry",
|
||||
),
|
||||
Product(
|
||||
id: "p5",
|
||||
name: "Sandwich",
|
||||
image: "🥪",
|
||||
pointsRequired: 3500,
|
||||
description: "Fresh deli sandwich",
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
Merchant(
|
||||
id: "2",
|
||||
name: "McDonald's",
|
||||
logo: "🍔",
|
||||
categories: [
|
||||
Category(
|
||||
id: "c3",
|
||||
name: "Burgers",
|
||||
icon: "🍔",
|
||||
products: [
|
||||
Product(
|
||||
id: "p6",
|
||||
name: "Big Mac",
|
||||
image: "🍔",
|
||||
pointsRequired: 5000,
|
||||
description: "Iconic double burger",
|
||||
isPopular: true,
|
||||
),
|
||||
Product(
|
||||
id: "p7",
|
||||
name: "Quarter Pounder",
|
||||
image: "🍔",
|
||||
pointsRequired: 4500,
|
||||
description: "Fresh beef quarter pound",
|
||||
),
|
||||
],
|
||||
),
|
||||
Category(
|
||||
id: "c4",
|
||||
name: "Drinks",
|
||||
icon: "🥤",
|
||||
products: [
|
||||
Product(
|
||||
id: "p8",
|
||||
name: "Coca Cola",
|
||||
image: "🥤",
|
||||
pointsRequired: 1000,
|
||||
description: "Ice cold soda",
|
||||
),
|
||||
Product(
|
||||
id: "p9",
|
||||
name: "McCafe Coffee",
|
||||
image: "☕",
|
||||
pointsRequired:
|
||||
20000, // High points untuk demonstrasi insufficient
|
||||
description: "Premium coffee blend",
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
];
|
||||
|
||||
Merchant? selectedMerchant;
|
||||
Map<String, GlobalKey> categoryKeys = {};
|
||||
String? selectedMerchantId; // Track merchant ID untuk detect changes
|
||||
String? activeCategoryId; // Track active category
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
selectedMerchant = merchants.first;
|
||||
selectedMerchantId = selectedMerchant?.id;
|
||||
activeCategoryId =
|
||||
selectedMerchant?.categories.first.id; // Set first category as active
|
||||
_initializeCategoryKeys();
|
||||
}
|
||||
|
||||
void _initializeCategoryKeys() {
|
||||
categoryKeys.clear();
|
||||
for (var category in selectedMerchant?.categories ?? []) {
|
||||
categoryKeys[category.id] = GlobalKey();
|
||||
}
|
||||
}
|
||||
|
||||
void _scrollToCategory(String categoryId) {
|
||||
// Update active category state FIRST
|
||||
setState(() {
|
||||
activeCategoryId = categoryId;
|
||||
});
|
||||
|
||||
// Tunggu sampai widget selesai rebuild dan keys ter-attach
|
||||
Future.delayed(Duration(milliseconds: 50), () {
|
||||
final key = categoryKeys[categoryId];
|
||||
if (key?.currentContext != null) {
|
||||
print("Scrolling to category: $categoryId"); // Debug log
|
||||
|
||||
try {
|
||||
Scrollable.ensureVisible(
|
||||
key!.currentContext!,
|
||||
duration: Duration(milliseconds: 500),
|
||||
curve: Curves.easeInOut,
|
||||
alignment: 0.1, // Position kategori sedikit dari atas
|
||||
);
|
||||
} catch (e) {
|
||||
print("Error scrolling to category: $e");
|
||||
}
|
||||
} else {
|
||||
print("Key not found for category: $categoryId"); // Debug log
|
||||
print("Available keys: ${categoryKeys.keys.toList()}"); // Debug log
|
||||
|
||||
// Retry dengan delay lebih lama jika belum ready
|
||||
Future.delayed(Duration(milliseconds: 200), () {
|
||||
final retryKey = categoryKeys[categoryId];
|
||||
if (retryKey?.currentContext != null) {
|
||||
Scrollable.ensureVisible(
|
||||
retryKey!.currentContext!,
|
||||
duration: Duration(milliseconds: 500),
|
||||
curve: Curves.easeInOut,
|
||||
alignment: 0.1,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void _onMerchantChanged(Merchant merchant) {
|
||||
if (selectedMerchantId == merchant.id)
|
||||
return; // Prevent unnecessary rebuilds
|
||||
|
||||
setState(() {
|
||||
selectedMerchant = merchant;
|
||||
selectedMerchantId = merchant.id;
|
||||
// Reset active category to first category of new merchant
|
||||
activeCategoryId = merchant.categories.first.id;
|
||||
});
|
||||
|
||||
// Reinitialize category keys for new merchant - immediate call
|
||||
_initializeCategoryKeys();
|
||||
|
||||
// Auto scroll to top when merchant changes
|
||||
if (_scrollController.hasClients) {
|
||||
_scrollController.animateTo(
|
||||
0,
|
||||
duration: Duration(milliseconds: 300),
|
||||
curve: Curves.easeOut,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColor.background,
|
||||
body: NestedScrollView(
|
||||
controller: _scrollController,
|
||||
headerSliverBuilder: (context, innerBoxIsScrolled) {
|
||||
return [
|
||||
// Sticky AppBar
|
||||
SliverAppBar(
|
||||
elevation: 0,
|
||||
title: Text("Poin"),
|
||||
centerTitle: true,
|
||||
floating: false,
|
||||
pinned: true, // Made sticky
|
||||
snap: false,
|
||||
),
|
||||
|
||||
// Point Card Section
|
||||
SliverToBoxAdapter(child: _buildPointCard()),
|
||||
|
||||
// Merchant Selection
|
||||
SliverToBoxAdapter(child: _buildMerchantSelection()),
|
||||
|
||||
// Sticky Category Tabs
|
||||
SliverPersistentHeader(
|
||||
pinned: true,
|
||||
key: ValueKey(
|
||||
'${selectedMerchant?.id}_$activeCategoryId',
|
||||
), // Force rebuild with key
|
||||
delegate: _StickyHeaderDelegate(
|
||||
child: _buildCategoryTabs(),
|
||||
height: 66,
|
||||
merchantId: selectedMerchant?.id ?? '', // Pass merchant ID
|
||||
activeCategoryId: activeCategoryId, // Pass active category ID
|
||||
),
|
||||
),
|
||||
];
|
||||
},
|
||||
body: selectedMerchant == null
|
||||
? SizedBox.shrink()
|
||||
: ListView.builder(
|
||||
padding: EdgeInsets.only(top: 16),
|
||||
itemCount: selectedMerchant!.categories.length,
|
||||
itemBuilder: (context, index) {
|
||||
final category = selectedMerchant!.categories[index];
|
||||
return _buildCategorySection(category);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPointCard() {
|
||||
return Container(
|
||||
margin: EdgeInsets.all(16),
|
||||
padding: EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [AppColor.primary, AppColor.primaryDark],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.primary.withOpacity(0.3),
|
||||
blurRadius: 12,
|
||||
offset: Offset(0, 6),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
pointCard.membershipLevel,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textWhite.withOpacity(0.9),
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
"${pointCard.availablePoints}",
|
||||
style: AppStyle.h2.copyWith(
|
||||
color: AppColor.textWhite,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
"Available Points",
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textWhite.withOpacity(0.9),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Container(
|
||||
padding: EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white.withOpacity(0.2),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.stars_rounded,
|
||||
color: AppColor.textWhite,
|
||||
size: 32,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Container(
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: FractionallySizedBox(
|
||||
widthFactor:
|
||||
(pointCard.totalPoints - pointCard.usedPoints) /
|
||||
pointCard.totalPoints,
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.textWhite,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
"Used: ${pointCard.usedPoints}",
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textWhite.withOpacity(0.8),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
"Total: ${pointCard.totalPoints}",
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textWhite.withOpacity(0.8),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMerchantSelection() {
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Select Merchant",
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
Container(
|
||||
height: 80,
|
||||
child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: merchants.length,
|
||||
itemBuilder: (context, index) {
|
||||
final merchant = merchants[index];
|
||||
final isSelected = selectedMerchant?.id == merchant.id;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => _onMerchantChanged(merchant),
|
||||
child: Container(
|
||||
width: 80,
|
||||
margin: EdgeInsets.only(right: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? AppColor.primary : AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: isSelected ? AppColor.primary : AppColor.border,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(merchant.logo, style: TextStyle(fontSize: 24)),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
merchant.name,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: isSelected
|
||||
? AppColor.textWhite
|
||||
: AppColor.textPrimary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCategoryTabs() {
|
||||
if (selectedMerchant == null) return SizedBox.shrink();
|
||||
|
||||
return Container(
|
||||
color: AppColor.background, // Background untuk sticky header
|
||||
padding: EdgeInsets.symmetric(vertical: 8),
|
||||
child: Container(
|
||||
height: 50,
|
||||
child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||
itemCount: selectedMerchant!.categories.length,
|
||||
itemBuilder: (context, index) {
|
||||
final category = selectedMerchant!.categories[index];
|
||||
final isActive =
|
||||
activeCategoryId ==
|
||||
category.id; // Check if this category is active
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => _scrollToCategory(category.id),
|
||||
child: Container(
|
||||
margin: EdgeInsets.only(right: 12),
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: isActive
|
||||
? AppColor.primary
|
||||
: AppColor.white, // Change background when active
|
||||
borderRadius: BorderRadius.circular(25),
|
||||
border: Border.all(
|
||||
color: isActive
|
||||
? AppColor.primary
|
||||
: AppColor.border, // Change border when active
|
||||
width: 2,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.textLight.withOpacity(0.1),
|
||||
blurRadius: 4,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(category.icon, style: TextStyle(fontSize: 16)),
|
||||
SizedBox(width: 6),
|
||||
Text(
|
||||
category.name,
|
||||
style: AppStyle.sm.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
color: isActive
|
||||
? AppColor.textWhite
|
||||
: AppColor
|
||||
.textPrimary, // Change text color when active
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCategorySection(Category category) {
|
||||
return Container(
|
||||
key: categoryKeys[category.id],
|
||||
margin: EdgeInsets.only(bottom: 24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(category.icon, style: TextStyle(fontSize: 20)),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
category.name,
|
||||
style: AppStyle.xl.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(height: 12),
|
||||
// Fixed height yang lebih besar untuk menghindari overflow
|
||||
Container(
|
||||
height: 240, // Increased from 200 to 240
|
||||
child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||
itemCount: category.products.length,
|
||||
itemBuilder: (context, index) {
|
||||
final product = category.products[index];
|
||||
return _buildProductCard(product);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProductCard(Product product) {
|
||||
final canRedeem = pointCard.availablePoints >= product.pointsRequired;
|
||||
final pointsShortage = canRedeem
|
||||
? 0
|
||||
: product.pointsRequired - pointCard.availablePoints;
|
||||
|
||||
return Container(
|
||||
width: 160,
|
||||
margin: EdgeInsets.only(right: 12),
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.textLight.withOpacity(0.15),
|
||||
blurRadius: 8,
|
||||
offset: Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Product Image
|
||||
Container(
|
||||
height: 90, // Reduced from 100 to give more space below
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.backgroundLight,
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(16),
|
||||
),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Center(
|
||||
child: Text(
|
||||
product.image,
|
||||
style: TextStyle(fontSize: 36), // Reduced from 40
|
||||
),
|
||||
),
|
||||
if (product.isPopular)
|
||||
Positioned(
|
||||
top: 6, // Adjusted position
|
||||
right: 6,
|
||||
child: Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 6, // Reduced padding
|
||||
vertical: 3,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.warning,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Text(
|
||||
"Popular",
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 10, // Smaller font
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Product Info - Made more flexible
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
product.name,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: canRedeem
|
||||
? AppColor.textPrimary
|
||||
: AppColor.textLight,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
product.description,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: canRedeem
|
||||
? AppColor.textSecondary
|
||||
: AppColor.textLight,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.stars,
|
||||
size: 14, // Reduced size
|
||||
color: canRedeem
|
||||
? AppColor.warning
|
||||
: AppColor.textLight,
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
"${product.pointsRequired}",
|
||||
style: AppStyle.sm.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: canRedeem
|
||||
? AppColor.primary
|
||||
: AppColor.textLight,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 32, // Reduced from 36
|
||||
child: ElevatedButton(
|
||||
onPressed: canRedeem
|
||||
? () => _redeemProduct(product)
|
||||
: null,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: canRedeem
|
||||
? AppColor.primary
|
||||
: AppColor.textLight,
|
||||
foregroundColor: AppColor.white,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
child: FittedBox(
|
||||
child: Text(
|
||||
canRedeem ? "Redeem" : "Insufficient",
|
||||
style: AppStyle.xs.copyWith(
|
||||
// Changed to xs
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Overlay untuk insufficient points
|
||||
if (!canRedeem)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.textLight.withOpacity(0.7),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Center(
|
||||
child: Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 10,
|
||||
), // Reduced padding
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.lock_outline,
|
||||
color: AppColor.textSecondary,
|
||||
size: 20, // Reduced size
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
"Need ${pointsShortage}",
|
||||
style: AppStyle.xs.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textSecondary,
|
||||
fontSize: 10, // Smaller font
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
Text(
|
||||
"more points",
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontSize: 10, // Smaller font
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _redeemProduct(Product product) {
|
||||
context.router.push(
|
||||
ProductRedeemRoute(
|
||||
product: product,
|
||||
merchant: selectedMerchant!,
|
||||
pointCard: pointCard,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_scrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
// Custom SliverPersistentHeaderDelegate untuk sticky category tabs
|
||||
class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate {
|
||||
final Widget child;
|
||||
final double height;
|
||||
final String merchantId; // Add merchant ID to track changes
|
||||
final String? activeCategoryId; // Add active category to track changes
|
||||
|
||||
_StickyHeaderDelegate({
|
||||
required this.child,
|
||||
required this.height,
|
||||
required this.merchantId, // Track merchant changes
|
||||
required this.activeCategoryId, // Track category changes
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(
|
||||
BuildContext context,
|
||||
double shrinkOffset,
|
||||
bool overlapsContent,
|
||||
) {
|
||||
return child;
|
||||
}
|
||||
|
||||
@override
|
||||
double get maxExtent => height;
|
||||
|
||||
@override
|
||||
double get minExtent => height;
|
||||
|
||||
@override
|
||||
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
|
||||
// Always rebuild when merchant OR active category changes
|
||||
if (oldDelegate is _StickyHeaderDelegate) {
|
||||
bool merchantChanged = oldDelegate.merchantId != merchantId;
|
||||
bool categoryChanged = oldDelegate.activeCategoryId != activeCategoryId;
|
||||
|
||||
print(
|
||||
"shouldRebuild - Merchant changed: $merchantChanged, Category changed: $categoryChanged",
|
||||
);
|
||||
print(
|
||||
"Old merchant: ${oldDelegate.merchantId}, New merchant: $merchantId",
|
||||
);
|
||||
print(
|
||||
"Old category: ${oldDelegate.activeCategoryId}, New category: $activeCategoryId",
|
||||
);
|
||||
|
||||
return merchantChanged || categoryChanged;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user