785 lines
24 KiB
Dart
785 lines
24 KiB
Dart
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 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 - 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();
|
|
}
|
|
|
|
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,
|
|
),
|
|
|
|
// 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 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(
|
|
"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;
|
|
}
|
|
}
|