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

Compare commits

base: aefril:dc4fdf5fbf6f35918b37f408c63e66313104a208
Branches Tags
aefril:main
aefril:dev
..
compare: aefril:37b22fe6629e4c7e300ffe3f2b8a7cb43c55e766
Branches Tags
aefril:main
aefril:dev

2 Commits
dc4fdf5fbf ... 37b22fe662

Author SHA1 Message Date
efrilm
37b22fe662 feat: draw today page 2025-09-04 21:54:56 +07:00
efrilm
c12e9bd188 feat: payment page 2025-09-04 21:47:54 +07:00
2 changed files with 861 additions and 237 deletions
Show Stats Expand all files Collapse all files

479
lib/presentation/pages/account/payment/payment_page.dart
View File

@ -2,8 +2,6 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart'; import '../../../../common/theme/theme.dart';
// Import your theme files here
// import 'theme.dart';
@RoutePage() @RoutePage()
class PaymentPage extends StatefulWidget { class PaymentPage extends StatefulWidget {
@ -14,125 +12,292 @@ class PaymentPage extends StatefulWidget {
} }
class _PaymentPageState extends State<PaymentPage> { class _PaymentPageState extends State<PaymentPage> {
// Sample saved payment methods data // Featured payment methods
final List<Map<String, dynamic>> savedPaymentMethods = [ final List<Map<String, dynamic>> featuredMethods = [
{ {
'id': '1', 'id': 'qris',
'type': 'credit_card', 'name': 'QRIS',
'name': 'Kartu Kredit', 'subtitle': null,
'details': '**** **** **** 1234', 'icon': 'assets/images/qris.png',
'cardType': 'Visa', 'iconColor': AppColor.black,
'expiryDate': '12/26', 'badge': 'Baru',
'isDefault': true, 'badgeColor': const Color(0xFFE57373),
'icon': Icons.credit_card,
},
{
'id': '2',
'type': 'credit_card',
'name': 'Kartu Debit',
'details': '**** **** **** 5678',
'cardType': 'Mastercard',
'expiryDate': '08/27',
'isDefault': false,
'icon': Icons.credit_card,
},
{
'id': '3',
'type': 'ewallet',
'name': 'DANA',
'details': '081234567890',
'cardType': 'E-Wallet',
'expiryDate': null,
'isDefault': false,
'icon': Icons.account_balance_wallet,
},
{
'id': '4',
'type': 'ewallet',
'name': 'GoPay',
'details': '081234567890',
'cardType': 'E-Wallet',
'expiryDate': null,
'isDefault': false,
'icon': Icons.account_balance_wallet,
},
{
'id': '5',
'type': 'bank_account',
'name': 'BCA',
'details': '**** **** 9012',
'cardType': 'Bank Account',
'expiryDate': null,
'isDefault': false,
'icon': Icons.account_balance,
}, },
]; ];
Widget _buildPaymentCard(Map<String, dynamic> payment) { // Main payment categories
final List<Map<String, dynamic>> paymentCategories = [
{
'id': 'credit_card',
'name': 'Kartu Kredit',
'subtitle':
'Minimal pembayaran Rp 10.000 dan mendukung Kartu Berlogo Visa, Mastercard dan JCB',
'icon': Icons.credit_card,
'iconColor': const Color(0xFF2E7D32),
'hasArrow': false,
},
];
// Other payment methods
final List<Map<String, dynamic>> otherMethods = [
{
'id': 'gopay',
'name': 'Gopay',
'subtitle': 'Aktifkan Sekarang',
'logo': 'assets/images/gopay.png',
'iconColor': const Color(0xFF00AA5B),
'hasArrow': true,
},
{
'id': 'dana',
'name': 'Dana',
'subtitle': 'Aktifkan Sekarang',
'logo': 'assets/images/dana.png',
'iconColor': const Color(0xFF118EEA),
'hasArrow': true,
},
{
'id': 'blu',
'name': 'blu',
'subtitle': 'Aktifkan Sekarang',
'logo': 'assets/images/blu.png',
'iconColor': const Color(0xFF00D4FF),
'hasArrow': true,
},
{
'id': 'shopeepay',
'name': 'ShopeePay',
'subtitle': 'Aktifkan Sekarang',
'logo': 'assets/images/shopeepay.png',
'iconColor': const Color(0xFFEE4D2D),
'hasArrow': true,
},
{
'id': 'ovo',
'name': 'OVO',
'subtitle': 'Aktifkan Sekarang',
'logo': 'assets/images/ovo.png',
'iconColor': const Color(0xFF4C3EC9),
'hasArrow': true,
},
];
Widget _buildFeaturedCard(Map<String, dynamic> method) {
return Container( return Container(
decoration: const BoxDecoration( margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.white, color: AppColor.white,
border: Border(bottom: BorderSide(color: AppColor.border)), borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.border.withOpacity(0.3)),
), ),
child: Padding( child: Row(
padding: const EdgeInsets.all(16), children: [
child: Row( // Logo placeholder
children: [ Container(
Container( width: 40,
width: 48, height: 24,
height: 48, decoration: BoxDecoration(
decoration: BoxDecoration( color: AppColor.black,
color: AppColor.background, borderRadius: BorderRadius.circular(4),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppColor.border),
),
child: Icon(payment['icon'], color: AppColor.primary, size: 24),
), ),
const SizedBox(width: 16), child: Center(
Expanded( child: Text(
child: Column( method['name'],
crossAxisAlignment: CrossAxisAlignment.start, style: AppStyle.sm.copyWith(
children: [ color: AppColor.white,
Row( fontWeight: FontWeight.w700,
children: [ fontSize: 10,
Text( ),
payment['name'], ),
style: AppStyle.md.copyWith( ),
fontWeight: FontWeight.w600, ),
color: AppColor.textPrimary, const SizedBox(width: 16),
), Text(
), method['name'],
], style: AppStyle.lg.copyWith(
), fontWeight: FontWeight.w600,
const SizedBox(height: 4), color: AppColor.textPrimary,
Row( ),
children: [ ),
Text( const Spacer(),
payment['cardType'], if (method['badge'] != null)
style: AppStyle.sm.copyWith( Container(
color: AppColor.textSecondary, padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
), decoration: BoxDecoration(
), color: method['badgeColor'],
if (payment['expiryDate'] != null) ...[ borderRadius: BorderRadius.circular(12),
Text( ),
' • ', child: Text(
style: AppStyle.sm.copyWith( method['badge'],
color: AppColor.textSecondary, style: AppStyle.sm.copyWith(
), color: AppColor.white,
), fontWeight: FontWeight.w600,
Text( ),
'Exp: ${payment['expiryDate']}', ),
style: AppStyle.sm.copyWith( ),
color: AppColor.textSecondary, ],
), ),
), );
], }
],
), Widget _buildCategoryCard(Map<String, dynamic> category) {
], return Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.border.withOpacity(0.3)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: category['iconColor'].withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
category['icon'],
color: category['iconColor'],
size: 20,
),
),
const SizedBox(width: 16),
Text(
category['name'],
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
],
),
if (category['subtitle'] != null) ...[
const SizedBox(height: 12),
Text(
category['subtitle'],
style: AppStyle.md.copyWith(
color: const Color(0xFF4CAF50),
height: 1.4,
), ),
), ),
], ],
],
),
);
}
Widget _buildPaymentMethodCard(Map<String, dynamic> method) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
// Handle method selection
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
decoration: const BoxDecoration(
color: AppColor.white,
border: Border(
bottom: BorderSide(color: Color(0xFFF5F5F5), width: 1),
),
),
child: Row(
children: [
// Method logo/icon
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: method['logo'] != null
? ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
method['logo'],
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return _buildFallbackIcon(method);
},
),
)
: _buildFallbackIcon(method),
),
const SizedBox(width: 16),
// Method info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
method['name'],
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
if (method['subtitle'] != null) ...[
const SizedBox(height: 2),
Text(
method['subtitle'],
style: AppStyle.md.copyWith(color: AppColor.textLight),
),
],
],
),
),
// Arrow icon
if (method['hasArrow'] == true)
const Icon(
Icons.chevron_right,
color: AppColor.textLight,
size: 20,
),
],
),
),
),
);
}
Widget _buildFallbackIcon(Map<String, dynamic> method) {
String initial = method['name'][0].toUpperCase();
Color backgroundColor = method['iconColor'] ?? AppColor.primary;
return Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: backgroundColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
initial,
style: AppStyle.md.copyWith(
color: backgroundColor,
fontWeight: FontWeight.w700,
),
),
),
);
}
Widget _buildSectionHeader(String title) {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 24, 20, 8),
child: Text(
title,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.textPrimary,
), ),
), ),
); );
@ -141,77 +306,39 @@ class _PaymentPageState extends State<PaymentPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: AppColor.background, backgroundColor: const Color(0xFFFAFAFA),
appBar: AppBar(title: Text('Metode Pembayaran')), appBar: AppBar(title: Text('Metode Pembayaran')),
body: savedPaymentMethods.isEmpty body: SingleChildScrollView(
? _buildEmptyState() child: Column(
: Column( crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( const SizedBox(height: 16),
child: ListView.builder( // Featured methods
itemCount: savedPaymentMethods.length, ...featuredMethods.map((method) => _buildFeaturedCard(method)),
itemBuilder: (context, index) {
return _buildPaymentCard(savedPaymentMethods[index]);
},
),
),
],
),
);
}
Widget _buildEmptyState() { const SizedBox(height: 16),
return Center(
child: Column( // Payment categories
mainAxisAlignment: MainAxisAlignment.center, ...paymentCategories.map(
children: [ (category) => _buildCategoryCard(category),
Icon(Icons.payment_outlined, size: 80, color: AppColor.textLight),
const SizedBox(height: 16),
Text(
'Belum Ada Metode Pembayaran',
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
), ),
),
const SizedBox(height: 8), // Section header for other methods
Text( _buildSectionHeader('Metode Pembayaran Lainnya'),
'Tambahkan kartu atau e-wallet untuk\nmemudahkan proses pembayaran',
textAlign: TextAlign.center, // Other payment methods
style: AppStyle.md.copyWith(color: AppColor.textLight, height: 1.4), Container(
), decoration: const BoxDecoration(color: AppColor.white),
const SizedBox(height: 32), child: Column(
SizedBox( children: otherMethods
width: 220, .map((method) => _buildPaymentMethodCard(method))
height: 48, .toList(),
child: ElevatedButton(
onPressed: () {
// Navigate to add payment method form
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.add, color: AppColor.white, size: 20),
const SizedBox(width: 8),
Text(
'Tambah Pembayaran',
style: AppStyle.md.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
],
), ),
), ),
),
], const SizedBox(height: 32),
],
),
), ),
); );
} }

619
lib/presentation/pages/draw/pages/draw_detail/pages/draw_today_page.dart
View File

@ -1,3 +1,4 @@
import 'dart:math' show cos, sin;
import 'package:auto_route/auto_route.dart'; import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -17,16 +18,27 @@ class _DrawTodayPageState extends State<DrawTodayPage>
late AnimationController _slideController; late AnimationController _slideController;
late AnimationController _scaleController; late AnimationController _scaleController;
late AnimationController _pulseController; late AnimationController _pulseController;
late AnimationController _celebrationController;
late Animation<double> _fadeAnimation; late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation; late Animation<Offset> _slideAnimation;
late Animation<double> _scaleAnimation; late Animation<double> _scaleAnimation;
late Animation<double> _pulseAnimation; late Animation<double> _pulseAnimation;
late Animation<double> _celebrationAnimation;
// Lottery Logic
String globalNumber = '849302';
String userNumber = '849302'; // Change this to test winner/loser
bool isWinner = false;
bool hasCheckedResult = false;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
// Check if user is winner
isWinner = userNumber == globalNumber;
_fadeController = AnimationController( _fadeController = AnimationController(
duration: Duration(milliseconds: 1200), duration: Duration(milliseconds: 1200),
vsync: this, vsync: this,
@ -47,6 +59,11 @@ class _DrawTodayPageState extends State<DrawTodayPage>
vsync: this, vsync: this,
); );
_celebrationController = AnimationController(
duration: Duration(milliseconds: 3000),
vsync: this,
);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate( _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut), CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
); );
@ -64,6 +81,10 @@ class _DrawTodayPageState extends State<DrawTodayPage>
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut), CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
); );
_celebrationAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _celebrationController, curve: Curves.elasticOut),
);
_startAnimations(); _startAnimations();
} }
@ -77,6 +98,11 @@ class _DrawTodayPageState extends State<DrawTodayPage>
await Future.delayed(Duration(milliseconds: 300)); await Future.delayed(Duration(milliseconds: 300));
_scaleController.forward(); _scaleController.forward();
if (isWinner) {
await Future.delayed(Duration(milliseconds: 600));
_celebrationController.forward();
}
await Future.delayed(Duration(milliseconds: 800)); await Future.delayed(Duration(milliseconds: 800));
_pulseController.repeat(reverse: true); _pulseController.repeat(reverse: true);
} }
@ -87,9 +113,348 @@ class _DrawTodayPageState extends State<DrawTodayPage>
_slideController.dispose(); _slideController.dispose();
_scaleController.dispose(); _scaleController.dispose();
_pulseController.dispose(); _pulseController.dispose();
_celebrationController.dispose();
super.dispose(); super.dispose();
} }
void _checkMyNumber() {
setState(() {
hasCheckedResult = true;
});
if (isWinner) {
_showWinnerDialog();
} else {
_showLoserDialog();
}
}
void _showWinnerDialog() {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent,
child: Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppColor.warning, AppColor.warning.withOpacity(0.8)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: AppColor.warning.withOpacity(0.5),
blurRadius: 30,
spreadRadius: 5,
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Animated Trophy
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 1000),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Transform.rotate(
angle: (1 - value) * 0.5,
child: Icon(
Icons.emoji_events_rounded,
color: AppColor.white,
size: 80,
),
),
);
},
),
SizedBox(height: 20),
Text(
'SELAMAT!',
style: AppStyle.h2.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w900,
letterSpacing: 2,
),
),
SizedBox(height: 8),
Text(
'Kamu Pemenang Hari Ini!',
style: AppStyle.lg.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 16),
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
),
child: Column(
children: [
Text(
'Nomor Pemenang',
style: AppStyle.sm.copyWith(
color: AppColor.white.withOpacity(0.8),
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 8),
Text(
globalNumber,
style: TextStyle(
color: AppColor.white,
fontSize: 32,
fontWeight: FontWeight.w900,
letterSpacing: 8,
),
),
],
),
),
SizedBox(height: 20),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppColor.primary,
borderRadius: BorderRadius.circular(12),
),
child: Text(
'🏆 Hadiah: 3KG Emas Batangan 🏆',
style: AppStyle.md.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w700,
),
),
),
SizedBox(height: 24),
Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.white,
foregroundColor: AppColor.primary,
padding: EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
'Tutup',
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
),
),
),
),
SizedBox(width: 12),
Expanded(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Tim kami akan menghubungimu segera!',
),
backgroundColor: AppColor.success,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
behavior: SnackBarBehavior.floating,
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
foregroundColor: AppColor.white,
padding: EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
'Klaim Hadiah',
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
),
),
),
),
],
),
],
),
),
);
},
);
}
void _showLoserDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent,
child: Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: AppColor.black.withOpacity(0.1),
blurRadius: 20,
spreadRadius: 0,
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
shape: BoxShape.circle,
),
child: Icon(
Icons.close_rounded,
color: AppColor.primary,
size: 40,
),
),
SizedBox(height: 16),
Text(
'Belum Beruntung',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 8),
Text(
'Jangan menyerah! Coba lagi besok ya',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 16),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Nomor Global:',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
Text(
globalNumber,
style: AppStyle.sm.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w700,
letterSpacing: 2,
),
),
],
),
SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Nomor Kamu:',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
Text(
userNumber,
style: AppStyle.sm.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w700,
letterSpacing: 2,
),
),
],
),
],
),
),
SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
foregroundColor: AppColor.white,
padding: EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
'Oke, Sampai Jumpa Besok!',
style: AppStyle.md.copyWith(fontWeight: FontWeight.w600),
),
),
),
],
),
),
);
},
);
}
Widget _buildTitle() { Widget _buildTitle() {
return SlideTransition( return SlideTransition(
position: _slideAnimation, position: _slideAnimation,
@ -130,78 +495,111 @@ class _DrawTodayPageState extends State<DrawTodayPage>
borderRadius: BorderRadius.circular(24), borderRadius: BorderRadius.circular(24),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: AppColor.black.withOpacity(0.08), color: isWinner
? AppColor.warning.withOpacity(0.3)
: AppColor.black.withOpacity(0.08),
blurRadius: 30, blurRadius: 30,
spreadRadius: 0, spreadRadius: 0,
offset: Offset(0, 15), offset: Offset(0, 15),
), ),
], ],
), ),
child: Padding( child: Stack(
padding: EdgeInsets.all(24), children: [
child: Column( // Winner celebration overlay
children: [ if (isWinner)
// Label Positioned.fill(
Container( child: AnimatedBuilder(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), animation: _celebrationAnimation,
decoration: BoxDecoration( builder: (context, child) {
color: AppColor.primary.withOpacity(0.08), return CustomPaint(
borderRadius: BorderRadius.circular(20), painter: WinnerCelebrationPainter(
), _celebrationAnimation.value,
child: Text( ),
'NOMOR UNDIAN GLOBAL', );
style: AppStyle.xs.copyWith( },
color: AppColor.primary,
fontWeight: FontWeight.w700,
letterSpacing: 1,
),
), ),
), ),
SizedBox(height: 20), Padding(
padding: EdgeInsets.all(24),
// Animated Number child: Column(
AnimatedBuilder( children: [
animation: _pulseAnimation, // Label
builder: (context, child) { Container(
return Transform.scale( padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
scale: _pulseAnimation.value, decoration: BoxDecoration(
child: Container( color: isWinner
padding: EdgeInsets.symmetric( ? AppColor.warning.withOpacity(0.15)
horizontal: 20, : AppColor.primary.withOpacity(0.08),
vertical: 16, borderRadius: BorderRadius.circular(20),
), ),
decoration: BoxDecoration( child: Text(
gradient: LinearGradient( isWinner ? '🎉 NOMOR PEMENANG 🎉' : 'NOMOR UNDIAN GLOBAL',
colors: [ style: AppStyle.xs.copyWith(
AppColor.primary.withOpacity(0.05), color: isWinner ? AppColor.warning : AppColor.primary,
AppColor.primary.withOpacity(0.02), fontWeight: FontWeight.w700,
], letterSpacing: 1,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppColor.primary.withOpacity(0.1),
width: 1,
),
),
child: Text(
'849302',
style: TextStyle(
color: AppColor.primary,
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: 12,
height: 1.0,
),
), ),
), ),
); ),
},
SizedBox(height: 20),
// Animated Number
AnimatedBuilder(
animation: _pulseAnimation,
builder: (context, child) {
return Transform.scale(
scale: _pulseAnimation.value,
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 16,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: isWinner
? [
AppColor.warning.withOpacity(0.1),
AppColor.warning.withOpacity(0.05),
]
: [
AppColor.primary.withOpacity(0.05),
AppColor.primary.withOpacity(0.02),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isWinner
? AppColor.warning.withOpacity(0.3)
: AppColor.primary.withOpacity(0.1),
width: 1,
),
),
child: Text(
globalNumber,
style: TextStyle(
color: isWinner
? AppColor.warning
: AppColor.primary,
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: 12,
height: 1.0,
),
),
),
);
},
),
],
), ),
], ),
), ],
), ),
), ),
); );
@ -310,6 +708,79 @@ class _DrawTodayPageState extends State<DrawTodayPage>
padding: EdgeInsets.symmetric(horizontal: 20), padding: EdgeInsets.symmetric(horizontal: 20),
child: Column( child: Column(
children: [ children: [
// Check My Number Button
Container(
width: double.infinity,
margin: EdgeInsets.only(bottom: 12),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: hasCheckedResult ? null : _checkMyNumber,
borderRadius: BorderRadius.circular(16),
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: hasCheckedResult
? null
: LinearGradient(
colors: [
AppColor.warning.withOpacity(0.8),
AppColor.warning,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
color: hasCheckedResult
? AppColor.black.withOpacity(0.15)
: null,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: hasCheckedResult
? AppColor.white.withOpacity(0.15)
: AppColor.warning.withOpacity(0.3),
width: 1,
),
boxShadow: hasCheckedResult
? null
: [
BoxShadow(
color: AppColor.warning.withOpacity(0.3),
blurRadius: 15,
offset: Offset(0, 5),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
hasCheckedResult
? Icons.check_circle_rounded
: Icons.casino_rounded,
color: hasCheckedResult
? AppColor.white.withOpacity(0.5)
: AppColor.white,
size: 20,
),
SizedBox(width: 8),
Text(
hasCheckedResult
? 'Sudah Dicek'
: 'Cek Nomorku Sekarang!',
style: AppStyle.md.copyWith(
color: hasCheckedResult
? AppColor.white.withOpacity(0.5)
: AppColor.white,
fontWeight: FontWeight.w700,
),
),
],
),
),
),
),
),
// Next Draw Card // Next Draw Card
Container( Container(
width: double.infinity, width: double.infinity,
@ -389,7 +860,7 @@ class _DrawTodayPageState extends State<DrawTodayPage>
), ),
SizedBox(width: 8), SizedBox(width: 8),
Text( Text(
'Cek tiket undianmu di menu Tiket Saya', 'Nomormu hari ini: $userNumber',
style: AppStyle.xs.copyWith( style: AppStyle.xs.copyWith(
color: AppColor.white.withOpacity(0.9), color: AppColor.white.withOpacity(0.9),
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
@ -450,3 +921,29 @@ class _DrawTodayPageState extends State<DrawTodayPage>
); );
} }
} }
// Custom painter for winner celebration effect
class WinnerCelebrationPainter extends CustomPainter {
final double animationValue;
WinnerCelebrationPainter(this.animationValue);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..style = PaintingStyle.fill;
// Draw floating golden particles
for (int i = 0; i < 12; i++) {
final angle = (i * 30) * (3.14159 / 180);
final radius = animationValue * 50;
final x = size.width / 2 + radius * cos(angle);
final y = size.height / 2 + radius * sin(angle);
paint.color = AppColor.warning.withOpacity(0.4 * animationValue);
canvas.drawCircle(Offset(x, y), 3 * animationValue, paint);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}