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

feat: payment page

Browse Source
This commit is contained in:
efrilm 2025-09-04 21:47:54 +07:00
parent dc4fdf5fbf
commit c12e9bd188
1 changed files with 303 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

417
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 '../../../../common/theme/theme.dart';
// Import your theme files here
// import 'theme.dart';
@RoutePage()
class PaymentPage extends StatefulWidget {
@ -14,125 +12,292 @@ class PaymentPage extends StatefulWidget {
}
class _PaymentPageState extends State<PaymentPage> {
// Sample saved payment methods data
final List<Map<String, dynamic>> savedPaymentMethods = [
// Featured payment methods
final List<Map<String, dynamic>> featuredMethods = [
{
'id': '1',
'type': 'credit_card',
'name': 'Kartu Kredit',
'details': '**** **** **** 1234',
'cardType': 'Visa',
'expiryDate': '12/26',
'isDefault': true,
'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,
'id': 'qris',
'name': 'QRIS',
'subtitle': null,
'icon': 'assets/images/qris.png',
'iconColor': AppColor.black,
'badge': 'Baru',
'badgeColor': const Color(0xFFE57373),
},
];
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(
decoration: const BoxDecoration(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
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(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Logo placeholder
Container(
width: 48,
height: 48,
width: 40,
height: 24,
decoration: BoxDecoration(
color: AppColor.background,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppColor.border),
color: AppColor.black,
borderRadius: BorderRadius.circular(4),
),
child: Center(
child: Text(
method['name'],
style: AppStyle.sm.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w700,
fontSize: 10,
),
),
),
child: Icon(payment['icon'], color: AppColor.primary, size: 24),
),
const SizedBox(width: 16),
Expanded(
Text(
method['name'],
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
const Spacer(),
if (method['badge'] != null)
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: method['badgeColor'],
borderRadius: BorderRadius.circular(12),
),
child: Text(
method['badge'],
style: AppStyle.sm.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
),
],
),
);
}
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(
payment['name'],
style: AppStyle.md.copyWith(
category['name'],
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
],
),
const SizedBox(height: 4),
Row(
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(
payment['cardType'],
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
method['name'],
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
if (payment['expiryDate'] != null) ...[
if (method['subtitle'] != null) ...[
const SizedBox(height: 2),
Text(
' • ',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
),
Text(
'Exp: ${payment['expiryDate']}',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
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,78 +306,40 @@ class _PaymentPageState extends State<PaymentPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
backgroundColor: const Color(0xFFFAFAFA),
appBar: AppBar(title: Text('Metode Pembayaran')),
body: savedPaymentMethods.isEmpty
? _buildEmptyState()
: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: savedPaymentMethods.length,
itemBuilder: (context, index) {
return _buildPaymentCard(savedPaymentMethods[index]);
},
),
),
],
),
);
}
Widget _buildEmptyState() {
return Center(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
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,
// Featured methods
...featuredMethods.map((method) => _buildFeaturedCard(method)),
const SizedBox(height: 16),
// Payment categories
...paymentCategories.map(
(category) => _buildCategoryCard(category),
),
// Section header for other methods
_buildSectionHeader('Metode Pembayaran Lainnya'),
// Other payment methods
Container(
decoration: const BoxDecoration(color: AppColor.white),
child: Column(
children: otherMethods
.map((method) => _buildPaymentMethodCard(method))
.toList(),
),
),
const SizedBox(height: 8),
Text(
'Tambahkan kartu atau e-wallet untuk\nmemudahkan proses pembayaran',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(color: AppColor.textLight, height: 1.4),
),
const SizedBox(height: 32),
SizedBox(
width: 220,
height: 48,
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,
),
),
],
),
),
),
],
),
);
}
}