aefril/enaklo-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
efrilm
2026-01-16 12:26:06 +07:00
parent 1ce980a87b
commit 82e1f93cce
17 changed files with 1095 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/coin/coin_page.dart
+800
View File
@@ -0,0 +1,800 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/customer/customer_point_loader/customer_point_loader_bloc.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 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 CoinPage extends StatefulWidget {
const CoinPage({super.key});
@override
State<CoinPage> createState() => _CoinPageState();
}
class _CoinPageState extends State<CoinPage> {
final ScrollController _scrollController = ScrollController();
// Sample data - Indonesian content
final PointCard pointCard = PointCard(
totalPoints: 15000,
usedPoints: 3500,
membershipLevel: "Member Emas",
);
final List<Category> categories = [
Category(
id: "c1",
name: "Minuman",
icon: "🥤",
products: [
Product(
id: "p1",
name: "Es Teh Manis",
image: "🧊",
pointsRequired: 1500,
description: "Teh manis dingin segar",
isPopular: true,
),
Product(
id: "p2",
name: "Kopi Susu",
image: "☕",
pointsRequired: 2000,
description: "Kopi dengan susu creamy",
),
Product(
id: "p3",
name: "Jus Jeruk",
image: "🍊",
pointsRequired: 2500,
description: "Jus jeruk segar alami",
),
],
),
Category(
id: "c2",
name: "Makanan",
icon: "🍽️",
products: [
Product(
id: "p4",
name: "Nasi Gudeg",
image: "🍛",
pointsRequired: 4000,
description: "Gudeg Jogja autentik",
isPopular: true,
),
Product(
id: "p5",
name: "Gado-gado",
image: "🥗",
pointsRequired: 3500,
description: "Sayuran dengan bumbu kacang",
),
Product(
id: "p6",
name: "Bakso",
image: "🍲",
pointsRequired: 3000,
description: "Bakso sapi dengan mie",
),
],
),
Category(
id: "c3",
name: "Cemilan",
icon: "🍪",
products: [
Product(
id: "p7",
name: "Keripik Singkong",
image: "🥔",
pointsRequired: 1000,
description: "Keripik singkong renyah",
),
Product(
id: "p8",
name: "Onde-onde",
image: "🍡",
pointsRequired: 1500,
description: "Onde-onde isi kacang hijau",
),
Product(
id: "p9",
name: "Pisang Goreng",
image: "🍌",
pointsRequired: 1200,
description: "Pisang goreng krispy",
),
],
),
Category(
id: "c4",
name: "Voucher",
icon: "🎟️",
products: [
Product(
id: "p10",
name: "Diskon 50%",
image: "🏷️",
pointsRequired: 5000,
description: "Potongan harga 50% untuk semua menu",
isPopular: true,
),
Product(
id: "p11",
name: "Gratis Ongkir",
image: "🚚",
pointsRequired: 2000,
description: "Bebas ongkos kirim untuk pesanan apapun",
),
Product(
id: "p12",
name: "Buy 1 Get 1",
image: "🎁",
pointsRequired: 25000, // High points untuk demonstrasi insufficient
description: "Beli 1 gratis 1 untuk minuman",
),
],
),
];
Map<String, GlobalKey> categoryKeys = {};
String? activeCategoryId; // Track active category
@override
void initState() {
super.initState();
activeCategoryId = categories.first.id; // Set first category as active
_initializeCategoryKeys();
context.read<CustomerPointLoaderBloc>().add(
CustomerPointLoaderEvent.fetched(),
);
}
void _initializeCategoryKeys() {
categoryKeys.clear();
for (var category in 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,
);
}
});
}
});
}
@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,
actions: [
IconButton(
icon: Icon(Icons.history),
onPressed: () => context.router.push(CoinHistoryRoute()),
),
],
),
// Point Card Section
SliverToBoxAdapter(child: _buildPointCard()),
// Sticky Category Tabs
SliverPersistentHeader(
pinned: true,
key: ValueKey(activeCategoryId), // Simplified key
delegate: _StickyHeaderDelegate(
child: _buildCategoryTabs(),
height: 66,
activeCategoryId: activeCategoryId, // Pass active category ID
),
),
];
},
body: ListView.builder(
padding: EdgeInsets.only(top: 16),
itemCount: categories.length,
itemBuilder: (context, index) {
final category = categories[index];
return _buildCategorySection(category);
},
),
),
);
}
Widget _buildPointCard() {
return BlocBuilder<CustomerPointLoaderBloc, CustomerPointLoaderState>(
builder: (context, state) {
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(
// "",
// style: AppStyle.sm.copyWith(
// color: AppColor.textWhite.withOpacity(0.9),
// fontWeight: FontWeight.w500,
// ),
// ),
// SizedBox(height: 4),
Text(
"${state.customerPoint.totalPoints}",
style: AppStyle.h2.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w700,
),
),
Text(
"Poin Tersedia",
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(
// "Terpakai: ${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 _buildCategoryTabs() {
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: categories.length,
itemBuilder: (context, index) {
final category = 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,
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,
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),
),
),
if (product.isPopular)
Positioned(
top: 6,
right: 6,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 6,
vertical: 3,
),
decoration: BoxDecoration(
color: AppColor.warning,
borderRadius: BorderRadius.circular(10),
),
child: Text(
"Populer",
style: AppStyle.xs.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
fontSize: 10,
),
),
),
),
],
),
),
// Product Info
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,
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,
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 ? "Tukar" : "Poin Kurang",
style: AppStyle.xs.copyWith(
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),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.lock_outline,
color: AppColor.textSecondary,
size: 20,
),
SizedBox(height: 4),
Text(
"Butuh ${pointsShortage}",
style: AppStyle.xs.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
fontSize: 10,
),
textAlign: TextAlign.center,
),
Text(
"poin lagi",
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontSize: 10,
),
textAlign: TextAlign.center,
),
],
),
),
),
),
],
),
);
}
void _redeemProduct(Product product) {
context.router.push(
ProductRedeemRoute(product: product, 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? activeCategoryId; // Track active category
_StickyHeaderDelegate({
required this.child,
required this.height,
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) {
// Rebuild when active category changes
if (oldDelegate is _StickyHeaderDelegate) {
bool categoryChanged = oldDelegate.activeCategoryId != activeCategoryId;
print("shouldRebuild - Category changed: $categoryChanged");
print(
"Old category: ${oldDelegate.activeCategoryId}, New category: $activeCategoryId",
);
return categoryChanged;
}
return true;
}
}
lib/presentation/pages/coin/pages/coin_history_page.dart
+388
View File
@@ -0,0 +1,388 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
// Models
enum TransactionType {
all('Semua'),
redeemed('Poin Ditukar'),
earned('Poin Didapat'),
refunded('Poin Dikembalikan'),
bonus('Bonus Poin');
const TransactionType(this.label);
final String label;
}
class PointTransaction {
final String id;
final String title;
final String category;
final String source;
final int points;
final TransactionType type;
final DateTime date;
final String? productImage;
PointTransaction({
required this.id,
required this.title,
required this.category,
required this.source,
required this.points,
required this.type,
required this.date,
this.productImage,
});
bool get isPositive =>
type == TransactionType.earned ||
type == TransactionType.refunded ||
type == TransactionType.bonus;
}
@RoutePage()
class CoinHistoryPage extends StatefulWidget {
const CoinHistoryPage({super.key});
@override
State<CoinHistoryPage> createState() => _CoinHistoryPageState();
}
class _CoinHistoryPageState extends State<CoinHistoryPage> {
TransactionType selectedFilter = TransactionType.all;
// Sample transaction data
final List<PointTransaction> allTransactions = [
PointTransaction(
id: "t1",
title: "Es Teh Manis",
category: "Minuman",
source: "Penukaran Voucher",
points: -1500,
type: TransactionType.redeemed,
date: DateTime.now().subtract(Duration(hours: 2)),
productImage: "🧊",
),
PointTransaction(
id: "t2",
title: "Nasi Gudeg",
category: "Makanan",
source: "Transaksi Pembelian",
points: 400,
type: TransactionType.earned,
date: DateTime.now().subtract(Duration(days: 1)),
productImage: "🍛",
),
PointTransaction(
id: "t3",
title: "Member Emas",
category: "Membership",
source: "Bonus Bulanan",
points: 2000,
type: TransactionType.bonus,
date: DateTime.now().subtract(Duration(days: 2)),
productImage: "🎁",
),
PointTransaction(
id: "t4",
title: "Kopi Susu",
category: "Minuman",
source: "Pembatalan Pesanan",
points: 2000,
type: TransactionType.refunded,
date: DateTime.now().subtract(Duration(days: 3)),
productImage: "☕",
),
PointTransaction(
id: "t5",
title: "Diskon 50%",
category: "Voucher",
source: "Penukaran Voucher",
points: -5000,
type: TransactionType.redeemed,
date: DateTime.now().subtract(Duration(days: 5)),
productImage: "🏷️",
),
PointTransaction(
id: "t6",
title: "Gado-gado",
category: "Makanan",
source: "Transaksi Pembelian",
points: 350,
type: TransactionType.earned,
date: DateTime.now().subtract(Duration(days: 7)),
productImage: "🥗",
),
PointTransaction(
id: "t7",
title: "Hari Kemerdekaan",
category: "Event",
source: "Bonus Special",
points: 1700,
type: TransactionType.bonus,
date: DateTime.now().subtract(Duration(days: 12)),
productImage: "🇮🇩",
),
PointTransaction(
id: "t8",
title: "Keripik Singkong",
category: "Cemilan",
source: "Penukaran Voucher",
points: -1000,
type: TransactionType.redeemed,
date: DateTime.now().subtract(Duration(days: 14)),
productImage: "🥔",
),
PointTransaction(
id: "t9",
title: "Review Produk",
category: "Aktivitas",
source: "Bonus Review",
points: 500,
type: TransactionType.bonus,
date: DateTime.now().subtract(Duration(days: 20)),
productImage: "⭐",
),
PointTransaction(
id: "t10",
title: "Bakso",
category: "Makanan",
source: "Pembatalan Pesanan",
points: 3000,
type: TransactionType.refunded,
date: DateTime.now().subtract(Duration(days: 25)),
productImage: "🍲",
),
];
List<PointTransaction> get filteredTransactions {
if (selectedFilter == TransactionType.all) {
return allTransactions;
}
return allTransactions.where((t) => t.type == selectedFilter).toList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.white,
appBar: AppBar(
title: Text("Riwayat Poin"),
centerTitle: true,
elevation: 0,
),
body: Column(
children: [
_buildFilterChips(),
Expanded(child: _buildTransactionList()),
],
),
);
}
Widget _buildFilterChips() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: TransactionType.values.map((type) {
final isSelected = selectedFilter == type;
return Container(
margin: EdgeInsets.only(right: 8),
child: FilterChip(
selected: isSelected,
label: Text(type.label),
onSelected: (selected) {
setState(() {
selectedFilter = type;
});
},
backgroundColor: AppColor.white,
selectedColor: AppColor.primary,
checkmarkColor: AppColor.white,
labelStyle: AppStyle.sm.copyWith(
color: isSelected ? AppColor.white : AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
side: BorderSide(
color: isSelected ? AppColor.primary : AppColor.border,
width: 1,
),
elevation: 0,
pressElevation: 1,
),
);
}).toList(),
),
),
);
}
Widget _buildTransactionList() {
final transactions = filteredTransactions;
if (transactions.isEmpty) {
return _buildEmptyState();
}
return ListView.builder(
padding: EdgeInsets.all(16),
itemCount: transactions.length,
itemBuilder: (context, index) {
final transaction = transactions[index];
return _buildTransactionCard(transaction);
},
);
}
Widget _buildEmptyState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: AppColor.backgroundLight,
shape: BoxShape.circle,
),
child: Icon(
Icons.history_outlined,
size: 48,
color: AppColor.textLight,
),
),
SizedBox(height: 16),
Text(
"Belum Ada Transaksi",
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
SizedBox(height: 8),
Text(
"Transaksi ${selectedFilter.label.toLowerCase()}\nbelum tersedia",
style: AppStyle.sm.copyWith(color: AppColor.textLight),
textAlign: TextAlign.center,
),
],
),
);
}
Widget _buildTransactionCard(PointTransaction transaction) {
final isPositive = transaction.isPositive;
final formattedDate = _formatDate(transaction.date);
return Container(
margin: EdgeInsets.only(bottom: 16),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white,
border: Border(bottom: BorderSide(color: AppColor.border, width: 1)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Category label
Text(
"Poin Didapat",
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 8),
// Title and Points Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
transaction.title,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.textPrimary,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(width: 12),
Row(
children: [
// Green circle icon
Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: isPositive ? Color(0xFF10B981) : AppColor.error,
shape: BoxShape.circle,
),
child: Icon(Icons.add, color: Colors.white, size: 14),
),
SizedBox(width: 6),
Text(
"${isPositive ? '+' : ''}${transaction.points} Poin",
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w700,
color: isPositive ? Color(0xFF10B981) : AppColor.error,
),
),
],
),
],
),
SizedBox(height: 12),
// Date
Text(
formattedDate,
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
),
],
),
);
}
String _formatDate(DateTime date) {
final now = DateTime.now();
final difference = now.difference(date);
if (difference.inDays == 0) {
if (difference.inHours == 0) {
return "${difference.inMinutes} menit lalu";
}
return "${difference.inHours} jam lalu";
} else if (difference.inDays == 1) {
return "Kemarin";
} else if (difference.inDays < 7) {
return "${difference.inDays} hari lalu";
} else {
final months = [
'Jan',
'Feb',
'Mar',
'Apr',
'Mei',
'Jun',
'Jul',
'Ags',
'Sep',
'Okt',
'Nov',
'Des',
];
return "${date.day} ${months[date.month - 1]} ${date.year}";
}
}
}
lib/presentation/pages/coin/pages/product_redeem/product_redeem_page.dart
+789
View File
@@ -0,0 +1,789 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../../common/theme/theme.dart';
import '../../coin_page.dart';
@RoutePage()
class ProductRedeemPage extends StatefulWidget {
final Product product;
final PointCard pointCard;
const ProductRedeemPage({
super.key,
required this.product,
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: [
// 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),
],
),
),
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),
],
),
);
}
}