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

feat: poin page

Browse Source
This commit is contained in:
efrilm 2025-08-29 19:24:33 +07:00
parent 30a2bece41
commit 079813e95b
3 changed files with 148 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
lib/presentation/pages/poin/pages/product_redeem/product_redeem_page.dart
View File

@ -7,13 +7,11 @@ import '../../poin_page.dart';
@RoutePage() @RoutePage()
class ProductRedeemPage extends StatefulWidget { class ProductRedeemPage extends StatefulWidget {
final Product product; final Product product;
final Merchant merchant;
final PointCard pointCard; final PointCard pointCard;
const ProductRedeemPage({ const ProductRedeemPage({
super.key, super.key,
required this.product, required this.product,
required this.merchant,
required this.pointCard, required this.pointCard,
}); });
@ -171,31 +169,6 @@ class _ProductRedeemPageState extends State<ProductRedeemPage>
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ 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 // Product Name & Popular Badge
Row( Row(
children: [ children: [
@ -591,13 +564,6 @@ class _ProductRedeemPageState extends State<ProductRedeemPage>
), ),
), ),
SizedBox(height: 12), SizedBox(height: 12),
Text(
"Show this code at ${widget.merchant.name}",
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
textAlign: TextAlign.center,
),
], ],
), ),
), ),

421
lib/presentation/pages/poin/poin_page.dart
View File

@ -19,20 +19,6 @@ class PointCard {
int get availablePoints => totalPoints - usedPoints; 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 { class Category {
final String id; final String id;
final String name; final String name;
@ -82,142 +68,144 @@ class PoinPage extends StatefulWidget {
class _PoinPageState extends State<PoinPage> { class _PoinPageState extends State<PoinPage> {
final ScrollController _scrollController = ScrollController(); final ScrollController _scrollController = ScrollController();
// Sample data // Sample data - Indonesian content
final PointCard pointCard = PointCard( final PointCard pointCard = PointCard(
totalPoints: 15000, totalPoints: 15000,
usedPoints: 3500, usedPoints: 3500,
membershipLevel: "Gold Member", membershipLevel: "Member Emas",
); );
final List<Merchant> merchants = [ final List<Category> categories = [
Merchant( Category(
id: "1", id: "c1",
name: "Starbucks", name: "Minuman",
logo: "☕", icon: "🥤",
categories: [ products: [
Category( Product(
id: "c1", id: "p1",
name: "Beverages", name: "Es Teh Manis",
icon: "🥤", image: "🧊",
products: [ pointsRequired: 1500,
Product( description: "Teh manis dingin segar",
id: "p1", isPopular: true,
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( Product(
id: "c2", id: "p2",
name: "Food", name: "Kopi Susu",
icon: "🍰", image: "☕",
products: [ pointsRequired: 2000,
Product( description: "Kopi dengan susu creamy",
id: "p4", ),
name: "Croissant", Product(
image: "🥐", id: "p3",
pointsRequired: 1500, name: "Jus Jeruk",
description: "Buttery pastry", image: "🍊",
), pointsRequired: 2500,
Product( description: "Jus jeruk segar alami",
id: "p5",
name: "Sandwich",
image: "🥪",
pointsRequired: 3500,
description: "Fresh deli sandwich",
),
],
), ),
], ],
), ),
Merchant( Category(
id: "2", id: "c2",
name: "McDonald's", name: "Makanan",
logo: "🍔", icon: "🍽️",
categories: [ products: [
Category( Product(
id: "c3", id: "p4",
name: "Burgers", name: "Nasi Gudeg",
icon: "🍔", image: "🍛",
products: [ pointsRequired: 4000,
Product( description: "Gudeg Jogja autentik",
id: "p6", isPopular: true,
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( Product(
id: "c4", id: "p5",
name: "Drinks", name: "Gado-gado",
icon: "🥤", image: "🥗",
products: [ pointsRequired: 3500,
Product( description: "Sayuran dengan bumbu kacang",
id: "p8", ),
name: "Coca Cola", Product(
image: "🥤", id: "p6",
pointsRequired: 1000, name: "Bakso",
description: "Ice cold soda", image: "🍲",
), pointsRequired: 3000,
Product( description: "Bakso sapi dengan mie",
id: "p9", ),
name: "McCafe Coffee", ],
image: "☕", ),
pointsRequired: Category(
20000, // High points untuk demonstrasi insufficient id: "c3",
description: "Premium coffee blend", 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",
), ),
], ],
), ),
]; ];
Merchant? selectedMerchant;
Map<String, GlobalKey> categoryKeys = {}; Map<String, GlobalKey> categoryKeys = {};
String? selectedMerchantId; // Track merchant ID untuk detect changes
String? activeCategoryId; // Track active category String? activeCategoryId; // Track active category
@override @override
void initState() { void initState() {
super.initState(); super.initState();
selectedMerchant = merchants.first; activeCategoryId = categories.first.id; // Set first category as active
selectedMerchantId = selectedMerchant?.id;
activeCategoryId =
selectedMerchant?.categories.first.id; // Set first category as active
_initializeCategoryKeys(); _initializeCategoryKeys();
} }
void _initializeCategoryKeys() { void _initializeCategoryKeys() {
categoryKeys.clear(); categoryKeys.clear();
for (var category in selectedMerchant?.categories ?? []) { for (var category in categories) {
categoryKeys[category.id] = GlobalKey(); categoryKeys[category.id] = GlobalKey();
} }
} }
@ -264,30 +252,6 @@ class _PoinPageState extends State<PoinPage> {
}); });
} }
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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
@ -309,34 +273,26 @@ class _PoinPageState extends State<PoinPage> {
// Point Card Section // Point Card Section
SliverToBoxAdapter(child: _buildPointCard()), SliverToBoxAdapter(child: _buildPointCard()),
// Merchant Selection
SliverToBoxAdapter(child: _buildMerchantSelection()),
// Sticky Category Tabs // Sticky Category Tabs
SliverPersistentHeader( SliverPersistentHeader(
pinned: true, pinned: true,
key: ValueKey( key: ValueKey(activeCategoryId), // Simplified key
'${selectedMerchant?.id}_$activeCategoryId',
), // Force rebuild with key
delegate: _StickyHeaderDelegate( delegate: _StickyHeaderDelegate(
child: _buildCategoryTabs(), child: _buildCategoryTabs(),
height: 66, height: 66,
merchantId: selectedMerchant?.id ?? '', // Pass merchant ID
activeCategoryId: activeCategoryId, // Pass active category ID activeCategoryId: activeCategoryId, // Pass active category ID
), ),
), ),
]; ];
}, },
body: selectedMerchant == null body: ListView.builder(
? SizedBox.shrink() padding: EdgeInsets.only(top: 16),
: ListView.builder( itemCount: categories.length,
padding: EdgeInsets.only(top: 16), itemBuilder: (context, index) {
itemCount: selectedMerchant!.categories.length, final category = categories[index];
itemBuilder: (context, index) { return _buildCategorySection(category);
final category = selectedMerchant!.categories[index]; },
return _buildCategorySection(category); ),
},
),
), ),
); );
} }
@ -385,7 +341,7 @@ class _PoinPageState extends State<PoinPage> {
), ),
), ),
Text( Text(
"Available Points", "Poin Tersedia",
style: AppStyle.sm.copyWith( style: AppStyle.sm.copyWith(
color: AppColor.textWhite.withOpacity(0.9), color: AppColor.textWhite.withOpacity(0.9),
), ),
@ -431,7 +387,7 @@ class _PoinPageState extends State<PoinPage> {
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Used: ${pointCard.usedPoints}", "Terpakai: ${pointCard.usedPoints}",
style: AppStyle.xs.copyWith( style: AppStyle.xs.copyWith(
color: AppColor.textWhite.withOpacity(0.8), color: AppColor.textWhite.withOpacity(0.8),
), ),
@ -449,74 +405,7 @@ class _PoinPageState extends State<PoinPage> {
); );
} }
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() { Widget _buildCategoryTabs() {
if (selectedMerchant == null) return SizedBox.shrink();
return Container( return Container(
color: AppColor.background, // Background untuk sticky header color: AppColor.background, // Background untuk sticky header
padding: EdgeInsets.symmetric(vertical: 8), padding: EdgeInsets.symmetric(vertical: 8),
@ -525,9 +414,9 @@ class _PoinPageState extends State<PoinPage> {
child: ListView.builder( child: ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(horizontal: 16), padding: EdgeInsets.symmetric(horizontal: 16),
itemCount: selectedMerchant!.categories.length, itemCount: categories.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final category = selectedMerchant!.categories[index]; final category = categories[index];
final isActive = final isActive =
activeCategoryId == activeCategoryId ==
category.id; // Check if this category is active category.id; // Check if this category is active
@ -607,7 +496,7 @@ class _PoinPageState extends State<PoinPage> {
SizedBox(height: 12), SizedBox(height: 12),
// Fixed height yang lebih besar untuk menghindari overflow // Fixed height yang lebih besar untuk menghindari overflow
Container( Container(
height: 240, // Increased from 200 to 240 height: 240,
child: ListView.builder( child: ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(horizontal: 16), padding: EdgeInsets.symmetric(horizontal: 16),
@ -651,7 +540,7 @@ class _PoinPageState extends State<PoinPage> {
children: [ children: [
// Product Image // Product Image
Container( Container(
height: 90, // Reduced from 100 to give more space below height: 90,
width: double.infinity, width: double.infinity,
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.backgroundLight, color: AppColor.backgroundLight,
@ -664,16 +553,16 @@ class _PoinPageState extends State<PoinPage> {
Center( Center(
child: Text( child: Text(
product.image, product.image,
style: TextStyle(fontSize: 36), // Reduced from 40 style: TextStyle(fontSize: 36),
), ),
), ),
if (product.isPopular) if (product.isPopular)
Positioned( Positioned(
top: 6, // Adjusted position top: 6,
right: 6, right: 6,
child: Container( child: Container(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: 6, // Reduced padding horizontal: 6,
vertical: 3, vertical: 3,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
@ -681,11 +570,11 @@ class _PoinPageState extends State<PoinPage> {
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
), ),
child: Text( child: Text(
"Popular", "Populer",
style: AppStyle.xs.copyWith( style: AppStyle.xs.copyWith(
color: AppColor.white, color: AppColor.white,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontSize: 10, // Smaller font fontSize: 10,
), ),
), ),
), ),
@ -694,7 +583,7 @@ class _PoinPageState extends State<PoinPage> {
), ),
), ),
// Product Info - Made more flexible // Product Info
Expanded( Expanded(
child: Padding( child: Padding(
padding: EdgeInsets.all(12), padding: EdgeInsets.all(12),
@ -730,7 +619,7 @@ class _PoinPageState extends State<PoinPage> {
children: [ children: [
Icon( Icon(
Icons.stars, Icons.stars,
size: 14, // Reduced size size: 14,
color: canRedeem color: canRedeem
? AppColor.warning ? AppColor.warning
: AppColor.textLight, : AppColor.textLight,
@ -753,7 +642,7 @@ class _PoinPageState extends State<PoinPage> {
SizedBox(height: 8), SizedBox(height: 8),
SizedBox( SizedBox(
width: double.infinity, width: double.infinity,
height: 32, // Reduced from 36 height: 32,
child: ElevatedButton( child: ElevatedButton(
onPressed: canRedeem onPressed: canRedeem
? () => _redeemProduct(product) ? () => _redeemProduct(product)
@ -770,9 +659,8 @@ class _PoinPageState extends State<PoinPage> {
), ),
child: FittedBox( child: FittedBox(
child: Text( child: Text(
canRedeem ? "Redeem" : "Insufficient", canRedeem ? "Tukar" : "Poin Kurang",
style: AppStyle.xs.copyWith( style: AppStyle.xs.copyWith(
// Changed to xs
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: AppColor.white, color: AppColor.white,
), ),
@ -797,10 +685,7 @@ class _PoinPageState extends State<PoinPage> {
), ),
child: Center( child: Center(
child: Container( child: Container(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
horizontal: 12,
vertical: 10,
), // Reduced padding
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.white, color: AppColor.white,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
@ -811,23 +696,23 @@ class _PoinPageState extends State<PoinPage> {
Icon( Icon(
Icons.lock_outline, Icons.lock_outline,
color: AppColor.textSecondary, color: AppColor.textSecondary,
size: 20, // Reduced size size: 20,
), ),
SizedBox(height: 4), SizedBox(height: 4),
Text( Text(
"Need ${pointsShortage}", "Butuh ${pointsShortage}",
style: AppStyle.xs.copyWith( style: AppStyle.xs.copyWith(
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: AppColor.textSecondary, color: AppColor.textSecondary,
fontSize: 10, // Smaller font fontSize: 10,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
Text( Text(
"more points", "poin lagi",
style: AppStyle.xs.copyWith( style: AppStyle.xs.copyWith(
color: AppColor.textSecondary, color: AppColor.textSecondary,
fontSize: 10, // Smaller font fontSize: 10,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -843,11 +728,7 @@ class _PoinPageState extends State<PoinPage> {
void _redeemProduct(Product product) { void _redeemProduct(Product product) {
context.router.push( context.router.push(
ProductRedeemRoute( ProductRedeemRoute(product: product, pointCard: pointCard),
product: product,
merchant: selectedMerchant!,
pointCard: pointCard,
),
); );
} }
@ -862,13 +743,11 @@ class _PoinPageState extends State<PoinPage> {
class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate { class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate {
final Widget child; final Widget child;
final double height; final double height;
final String merchantId; // Add merchant ID to track changes final String? activeCategoryId; // Track active category
final String? activeCategoryId; // Add active category to track changes
_StickyHeaderDelegate({ _StickyHeaderDelegate({
required this.child, required this.child,
required this.height, required this.height,
required this.merchantId, // Track merchant changes
required this.activeCategoryId, // Track category changes required this.activeCategoryId, // Track category changes
}); });
@ -889,22 +768,16 @@ class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate {
@override @override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) { bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
// Always rebuild when merchant OR active category changes // Rebuild when active category changes
if (oldDelegate is _StickyHeaderDelegate) { if (oldDelegate is _StickyHeaderDelegate) {
bool merchantChanged = oldDelegate.merchantId != merchantId;
bool categoryChanged = oldDelegate.activeCategoryId != activeCategoryId; bool categoryChanged = oldDelegate.activeCategoryId != activeCategoryId;
print( print("shouldRebuild - Category changed: $categoryChanged");
"shouldRebuild - Merchant changed: $merchantChanged, Category changed: $categoryChanged",
);
print(
"Old merchant: ${oldDelegate.merchantId}, New merchant: $merchantId",
);
print( print(
"Old category: ${oldDelegate.activeCategoryId}, New category: $activeCategoryId", "Old category: ${oldDelegate.activeCategoryId}, New category: $activeCategoryId",
); );
return merchantChanged || categoryChanged; return categoryChanged;
} }
return true; return true;
} }

8
lib/presentation/router/app_router.gr.dart
View File

@ -403,7 +403,6 @@ class ProductRedeemRoute extends _i23.PageRouteInfo<ProductRedeemRouteArgs> {
ProductRedeemRoute({ ProductRedeemRoute({
_i24.Key? key, _i24.Key? key,
required _i16.Product product, required _i16.Product product,
required _i16.Merchant merchant,
required _i16.PointCard pointCard, required _i16.PointCard pointCard,
List<_i23.PageRouteInfo>? children, List<_i23.PageRouteInfo>? children,
}) : super( }) : super(
@ -411,7 +410,6 @@ class ProductRedeemRoute extends _i23.PageRouteInfo<ProductRedeemRouteArgs> {
args: ProductRedeemRouteArgs( args: ProductRedeemRouteArgs(
key: key, key: key,
product: product, product: product,
merchant: merchant,
pointCard: pointCard, pointCard: pointCard,
), ),
initialChildren: children, initialChildren: children,
@ -426,7 +424,6 @@ class ProductRedeemRoute extends _i23.PageRouteInfo<ProductRedeemRouteArgs> {
return _i17.ProductRedeemPage( return _i17.ProductRedeemPage(
key: args.key, key: args.key,
product: args.product, product: args.product,
merchant: args.merchant,
pointCard: args.pointCard, pointCard: args.pointCard,
); );
}, },
@ -437,7 +434,6 @@ class ProductRedeemRouteArgs {
const ProductRedeemRouteArgs({ const ProductRedeemRouteArgs({
this.key, this.key,
required this.product, required this.product,
required this.merchant,
required this.pointCard, required this.pointCard,
}); });
@ -445,13 +441,11 @@ class ProductRedeemRouteArgs {
final _i16.Product product; final _i16.Product product;
final _i16.Merchant merchant;
final _i16.PointCard pointCard; final _i16.PointCard pointCard;
@override @override
String toString() { String toString() {
return 'ProductRedeemRouteArgs{key: $key, product: $product, merchant: $merchant, pointCard: $pointCard}'; return 'ProductRedeemRouteArgs{key: $key, product: $product, pointCard: $pointCard}';
} }
} }