md.asif5/kmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented TPIN and quick pay within bank

Browse Source
This commit is contained in:
Md Asif
2025-06-23 04:47:05 +05:30
parent 0d2dfc817e
commit 77a2654401
44 changed files with 1692 additions and 1153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/features/fund_transfer/screens/fund_transfer_screen.dart
View File

@@ -22,10 +22,13 @@ class _FundTransferScreen extends State<FundTransferScreen> {
} else if (key == 'done') {
if (kDebugMode) {
print('Amount entered: $amount');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TransactionPinScreen()));
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => const TransactionPinScreen(
// transactionData: {},
// transactionCode: 'TRANSFER'
// )));
}
} else {
amount += key;

205
lib/features/fund_transfer/screens/payment_animation.dart Normal file
View File

@@ -0,0 +1,205 @@
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:kmobile/data/models/payment_response.dart';
import 'package:lottie/lottie.dart';
import 'package:share_plus/share_plus.dart';
import 'package:path_provider/path_provider.dart';
class PaymentAnimationScreen extends StatefulWidget {
final Future<PaymentResponse> paymentResponse;
const PaymentAnimationScreen({
super.key,
required this.paymentResponse,
});
@override
State<PaymentAnimationScreen> createState() => _PaymentAnimationScreenState();
}
class _PaymentAnimationScreenState extends State<PaymentAnimationScreen> {
final GlobalKey _shareKey = GlobalKey();
Future<void> _shareScreenshot() async {
try {
RenderRepaintBoundary boundary =
_shareKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
ui.Image image = await boundary.toImage(pixelRatio: 3.0);
ByteData? byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();
final tempDir = await getTemporaryDirectory();
final file = await File('${tempDir.path}/payment_result.png').create();
await file.writeAsBytes(pngBytes);
await Share.shareXFiles([XFile(file.path)], text: 'Payment Result');
} catch (e) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Failed to share screenshot: $e')),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder<PaymentResponse>(
future: widget.paymentResponse,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: Lottie.asset(
'assets/animations/rupee.json',
width: 200,
height: 200,
repeat: true,
),
);
}
final response = snapshot.data!;
final isSuccess = response.isSuccess;
return Stack(
children: [
Center(
child: RepaintBoundary(
key: _shareKey,
child: Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 80),
Lottie.asset(
isSuccess
? 'assets/animations/done.json'
: 'assets/animations/error.json',
width: 200,
height: 200,
repeat: false,
),
const SizedBox(height: 10),
isSuccess
? Column(
children: [
const Text(
'Payment Successful!',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.green),
),
const SizedBox(height: 16),
if (response.amount != null)
Text(
'Amount: ${response.amount} ${response.currency ?? ''}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
fontFamily: 'Rubik'),
),
if (response.creditedAccount != null)
Text(
'Credited Account: ${response.creditedAccount}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
fontFamily: 'Rubik'),
),
if (response.date != null)
Text(
'Date: ${response.date!.toLocal().toIso8601String()}',
style: const TextStyle(fontSize: 16),
),
],
)
: Column(
children: [
const Text(
'Payment Failed',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.red),
),
const SizedBox(height: 16),
if (response.errorMessage != null)
Text(
response.errorMessage!,
style: const TextStyle(fontSize: 16),
),
],
),
const SizedBox(height: 40),
],
),
),
),
),
// Buttons at the bottom
Positioned(
left: 0,
right: 0,
bottom: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton.icon(
onPressed: _shareScreenshot,
icon: Icon(
Icons.share_rounded,
color: Theme.of(context).primaryColor,
),
label: Text('Share',
style:
TextStyle(color: Theme.of(context).primaryColor)),
style: ElevatedButton.styleFrom(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
padding: const EdgeInsets.symmetric(
horizontal: 32, vertical: 12),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Theme.of(context).primaryColor,
width: 1,
),
borderRadius: BorderRadius.circular(30),
),
textStyle: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.black),
),
),
ElevatedButton.icon(
onPressed: () {
Navigator.of(context)
.popUntil((route) => route.isFirst);
},
label: const Text('Done'),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
horizontal: 45, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
textStyle: const TextStyle(
fontSize: 18, fontWeight: FontWeight.w600),
),
),
],
),
),
],
);
},
),
);
}
}

159
lib/features/fund_transfer/screens/tpin_otp_screen.dart Normal file
View File

@@ -0,0 +1,159 @@
import 'package:flutter/material.dart';
import 'package:kmobile/features/fund_transfer/screens/tpin_set_screen.dart';
class TpinOtpScreen extends StatefulWidget {
const TpinOtpScreen({super.key});
@override
State<TpinOtpScreen> createState() => _TpinOtpScreenState();
}
class _TpinOtpScreenState extends State<TpinOtpScreen> {
final List<FocusNode> _focusNodes = List.generate(4, (_) => FocusNode());
final List<TextEditingController> _controllers =
List.generate(4, (_) => TextEditingController());
@override
void dispose() {
for (final node in _focusNodes) {
node.dispose();
}
for (final ctrl in _controllers) {
ctrl.dispose();
}
super.dispose();
}
void _onOtpChanged(int idx, String value) {
if (value.length == 1 && idx < 3) {
_focusNodes[idx + 1].requestFocus();
}
if (value.isEmpty && idx > 0) {
_focusNodes[idx - 1].requestFocus();
}
setState(() {});
}
String get _enteredOtp => _controllers.map((c) => c.text).join();
void _verifyOtp() {
if (_enteredOtp == '0000') {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => TpinSetScreen(),
),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Invalid OTP')),
);
}
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Enter OTP'),
centerTitle: true,
elevation: 0,
),
body: Center(
child: SingleChildScrollView(
child: Column(
// mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.lock_outline,
size: 48, color: theme.colorScheme.primary),
const SizedBox(height: 16),
Text(
'OTP Verification',
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
color: theme.colorScheme.primary,
),
),
const SizedBox(height: 8),
Text(
'Enter the 4-digit OTP sent to your mobile number.',
textAlign: TextAlign.center,
style: theme.textTheme.bodyMedium?.copyWith(
color: Colors.grey[700],
),
),
const SizedBox(height: 32),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(4, (i) {
return Container(
width: 48,
margin: const EdgeInsets.symmetric(horizontal: 8),
child: TextField(
controller: _controllers[i],
focusNode: _focusNodes[i],
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
maxLength: 1,
obscureText: true,
obscuringCharacter: '⬤',
decoration: InputDecoration(
counterText: '',
filled: true,
fillColor: Colors.blue[50],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 2.5,
),
),
),
onChanged: (val) => _onOtpChanged(i, val),
),
);
}),
),
const SizedBox(height: 32),
ElevatedButton.icon(
icon: const Icon(Icons.verified_user_rounded),
label: const Text(
'Verify OTP',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
),
style: ElevatedButton.styleFrom(
backgroundColor: theme.colorScheme.primary,
padding:
const EdgeInsets.symmetric(vertical: 14, horizontal: 28),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
onPressed: _enteredOtp.length == 4 ? _verifyOtp : null,
),
const SizedBox(height: 16),
TextButton(
onPressed: () {
// Resend OTP logic here
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('OTP resent (mock)')),
);
},
child: const Text('Resend OTP'),
),
const SizedBox(height: 60),
],
),
),
),
);
}
}

77
lib/features/fund_transfer/screens/tpin_prompt_screen.dart Normal file
View File

@@ -0,0 +1,77 @@
import 'package:flutter/material.dart';
import 'package:kmobile/features/fund_transfer/screens/tpin_otp_screen.dart';
class TpinSetupPromptScreen extends StatelessWidget {
const TpinSetupPromptScreen({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Set TPIN'),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 100.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.lock_person_rounded,
size: 60, color: theme.colorScheme.primary),
const SizedBox(height: 18),
Text(
'TPIN Required',
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
color: theme.colorScheme.primary,
),
),
const SizedBox(height: 12),
Text(
'You need to set your TPIN to continue with secure transactions.',
textAlign: TextAlign.center,
style: theme.textTheme.bodyMedium?.copyWith(
color: Colors.grey[700],
),
),
const SizedBox(height: 32),
ElevatedButton.icon(
icon: const Icon(Icons.arrow_forward_rounded),
label: const Text(
'Set TPIN',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
),
style: ElevatedButton.styleFrom(
backgroundColor: theme.colorScheme.primary,
padding:
const EdgeInsets.symmetric(vertical: 14, horizontal: 32),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => const TpinOtpScreen(),
),
);
},
),
const SizedBox(height: 18),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 18.0),
child: Text(
'Your TPIN is a 6-digit code used to authorize transactions. Keep it safe and do not share it with anyone.',
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(
color: Colors.grey[600],
),
),
),
],
),
),
);
}
}

215
lib/features/fund_transfer/screens/tpin_set_screen.dart Normal file
View File

@@ -0,0 +1,215 @@
import 'package:flutter/material.dart';
import 'package:kmobile/api/services/auth_service.dart';
import 'package:kmobile/di/injection.dart';
enum TPinMode { set, confirm }
class TpinSetScreen extends StatefulWidget {
const TpinSetScreen({super.key});
@override
State<TpinSetScreen> createState() => _TpinSetScreenState();
}
class _TpinSetScreenState extends State<TpinSetScreen> {
TPinMode _mode = TPinMode.set;
final List<String> _tpin = [];
String? _initialTpin;
String? _errorText;
void addDigit(String digit) {
if (_tpin.length < 6) {
setState(() {
_tpin.add(digit);
_errorText = null;
});
if (_tpin.length == 6) {
_handleComplete();
}
}
}
void deleteDigit() {
if (_tpin.isNotEmpty) {
setState(() {
_tpin.removeLast();
_errorText = null;
});
}
}
void _handleComplete() async {
final pin = _tpin.join();
if (_mode == TPinMode.set) {
setState(() {
_initialTpin = pin;
_tpin.clear();
_mode = TPinMode.confirm;
});
} else if (_mode == TPinMode.confirm) {
if (_initialTpin == pin) {
final authService = getIt<AuthService>();
try {
await authService.setTpin(pin);
} catch (e) {
setState(() {
_errorText = "Failed to set TPIN. Please try again.";
_tpin.clear();
});
return;
}
if (!mounted) return;
// Show success dialog before popping
await showDialog(
context: context,
barrierDismissible: false,
builder: (ctx) => AlertDialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
title: const Column(
children: [
Icon(Icons.check_circle, color: Colors.green, size: 60),
SizedBox(height: 12),
Text('Success!', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
content: const Text(
'Your TPIN was set up successfully.',
textAlign: TextAlign.center,
),
actions: [
TextButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: const Text('OK', style: TextStyle(fontSize: 16)),
),
],
),
);
if (mounted) {
Navigator.of(context).pop();
}
} else {
setState(() {
_errorText = "Pins do not match. Try again.";
_tpin.clear();
});
}
}
}
Widget buildPinDots() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(6, (index) {
return Container(
margin: const EdgeInsets.all(8),
width: 15,
height: 15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: index < _tpin.length ? Colors.black : Colors.grey[400],
),
);
}),
);
}
Widget buildNumberPad() {
List<List<String>> keys = [
['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9'],
['Enter', '0', '<']
];
return Column(
children: keys.map((row) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: row.map((key) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
if (key == '<') {
deleteDigit();
} else if (key == 'Enter') {
if (_tpin.length == 6) {
_handleComplete();
} else {
setState(() {
_errorText = "Please enter 6 digits";
});
}
} else if (key.isNotEmpty) {
addDigit(key);
}
},
child: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey[200],
),
alignment: Alignment.center,
child: key == 'Enter'
? const Icon(Icons.check)
: Text(
key == '<' ? '⌫' : key,
style: TextStyle(
fontSize: 20,
color: key == 'Enter' ? Colors.blue : Colors.black,
),
),
),
),
);
}).toList(),
);
}).toList(),
);
}
String getTitle() {
switch (_mode) {
case TPinMode.set:
return "Set your new TPIN";
case TPinMode.confirm:
return "Confirm your new TPIN";
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Set TPIN')),
body: SafeArea(
child: Column(
children: [
const Spacer(),
const Icon(Icons.lock_outline, size: 60, color: Colors.blue),
const SizedBox(height: 20),
Text(
getTitle(),
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
),
const SizedBox(height: 20),
buildPinDots(),
if (_errorText != null)
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(_errorText!,
style: const TextStyle(color: Colors.red)),
),
const Spacer(),
buildNumberPad(),
const Spacer(),
],
),
),
);
}
}

111
lib/features/fund_transfer/screens/transaction_pin_screen.dart
View File

@@ -1,9 +1,16 @@
import 'package:flutter/material.dart';
import 'package:kmobile/api/services/auth_service.dart';
import 'package:kmobile/api/services/payment_service.dart';
import 'package:kmobile/data/models/transfer.dart';
import 'package:kmobile/di/injection.dart';
import 'package:kmobile/features/fund_transfer/screens/payment_animation.dart';
import 'package:kmobile/features/fund_transfer/screens/tpin_prompt_screen.dart';
import 'package:kmobile/features/fund_transfer/screens/transaction_success_screen.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
class TransactionPinScreen extends StatefulWidget {
const TransactionPinScreen({super.key});
final Transfer transactionData;
const TransactionPinScreen({super.key, required this.transactionData});
@override
State<TransactionPinScreen> createState() => _TransactionPinScreen();
@@ -11,6 +18,38 @@ class TransactionPinScreen extends StatefulWidget {
class _TransactionPinScreen extends State<TransactionPinScreen> {
final List<String> _pin = [];
bool _loading = true;
@override
void initState() {
super.initState();
_checkIfTpinIsSet();
}
Future<void> _checkIfTpinIsSet() async {
setState(() => _loading = true);
try {
final authService = getIt<AuthService>();
final isSet = await authService.checkTpin();
if (!isSet && mounted) {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => const TpinSetupPromptScreen(),
),
);
} else if (mounted) {
setState(() => _loading = false);
}
} catch (e) {
if (mounted) {
setState(() => _loading = false);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Failed to check TPIN status')),
);
}
}
}
void _onKeyPressed(String value) {
setState(() {
@@ -43,16 +82,13 @@ class _TransactionPinScreen extends State<TransactionPinScreen> {
Widget _buildKey(String label, {IconData? icon}) {
return Expanded(
child: InkWell(
onTap: () {
onTap: () async {
if (label == 'back') {
_onKeyPressed('back');
} else if (label == 'done') {
// Handle submit if needed
if (_pin.length == 6) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TransactionSuccessScreen()));
await sendTransaction();
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Please enter a 6-digit TPIN")),
@@ -90,6 +126,27 @@ class _TransactionPinScreen extends State<TransactionPinScreen> {
);
}
Future<void> sendTransaction() async {
final paymentService = getIt<PaymentService>();
final transfer = widget.transactionData;
transfer.tpin = _pin.join();
try {
final paymentResponse = paymentService.processQuickPayWithinBank(transfer);
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (_) => PaymentAnimationScreen(paymentResponse: paymentResponse)
),
);
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(e.toString())),
);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -105,35 +162,23 @@ class _TransactionPinScreen extends State<TransactionPinScreen> {
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
),
centerTitle: false,
actions: const [
Padding(
padding: EdgeInsets.only(right: 10.0),
child: CircleAvatar(
backgroundImage: AssetImage('assets/images/avatar.jpg'),
// Replace with your image
radius: 20,
),
),
],
),
body: Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Column(
children: [
const Spacer(),
const Text(
'Enter Your TPIN',
style: TextStyle(fontSize: 18),
padding: const EdgeInsets.only(bottom: 20.0),
child: Column(
children: [
const Spacer(),
const Text(
'Enter Your TPIN',
style: TextStyle(fontSize: 18),
),
const SizedBox(height: 20),
_buildPinIndicators(),
const Spacer(),
_buildKeypad(),
],
),
),
const SizedBox(height: 20),
_buildPinIndicators(),
const Spacer(),
_buildKeypad(),
],
),
),
);
}
}
}

24
lib/features/fund_transfer/screens/transaction_success_screen.dart
View File

@@ -7,16 +7,14 @@ import 'package:screenshot/screenshot.dart';
import '../../../app.dart';
class TransactionSuccessScreen extends StatefulWidget {
const TransactionSuccessScreen({super.key});
final String creditAccount;
const TransactionSuccessScreen({super.key, required this.creditAccount});
@override
State<TransactionSuccessScreen> createState() => _TransactionSuccessScreen();
}
class _TransactionSuccessScreen extends State<TransactionSuccessScreen> {
final String transactionDate = "18th March, 2025 04:30 PM";
final String referenceNumber = "TXN32131093012931993";
final ScreenshotController _screenshotController = ScreenshotController();
Future<void> _shareScreenshot() async {
@@ -35,6 +33,10 @@ class _TransactionSuccessScreen extends State<TransactionSuccessScreen> {
@override
Widget build(BuildContext context) {
final String transactionDate =
DateTime.now().toLocal().toString().split(' ')[0];
final String creditAccount = widget.creditAccount;
return Scaffold(
body: SafeArea(
child: Stack(
@@ -74,7 +76,7 @@ class _TransactionSuccessScreen extends State<TransactionSuccessScreen> {
),
const SizedBox(height: 16),
Text(
"Reference No: $referenceNumber",
"To Account Number: $creditAccount",
style: const TextStyle(
fontSize: 12,
color: Colors.black87,
@@ -102,9 +104,9 @@ class _TransactionSuccessScreen extends State<TransactionSuccessScreen> {
padding: const EdgeInsets.symmetric(vertical: 16),
backgroundColor: Colors.white,
foregroundColor: Colors.blueAccent,
side: const BorderSide(color: Colors.black, width: 1),
elevation: 0
),
side:
const BorderSide(color: Colors.black, width: 1),
elevation: 0),
),
),
const SizedBox(width: 12),
@@ -115,7 +117,8 @@ class _TransactionSuccessScreen extends State<TransactionSuccessScreen> {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const NavigationScaffold()));
builder: (context) =>
const NavigationScaffold()));
},
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
@@ -135,5 +138,4 @@ class _TransactionSuccessScreen extends State<TransactionSuccessScreen> {
),
);
}
}
}