updated screens design for demo

This commit is contained in:
2025-05-31 21:49:09 +05:30
parent 1ad1cd07cc
commit 0c1d6fc718
8 changed files with 309 additions and 110 deletions

View File

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:flutter_swipe_button/flutter_swipe_button.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../fund_transfer/screens/transaction_pin_screen.dart';
class QuickPayOutsideBankScreen extends StatefulWidget {
const QuickPayOutsideBankScreen({super.key});
@@ -15,6 +17,7 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
// Controllers
final accountNumberController = TextEditingController();
final confirmAccountNumberController = TextEditingController();
final nameController = TextEditingController();
final bankNameController = TextEditingController();
final branchNameController = TextEditingController();
@@ -30,6 +33,7 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
void dispose() {
// Dispose controllers
accountNumberController.dispose();
confirmAccountNumberController.dispose();
nameController.dispose();
bankNameController.dispose();
branchNameController.dispose();
@@ -50,7 +54,7 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
},
),
title: const Text(
'Quick Pay - Other Bank',
'Quick Pay - Outside Bank',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
),
centerTitle: false,
@@ -71,7 +75,17 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
key: _formKey,
child: ListView(
children: [
const SizedBox(height: 25),
const SizedBox(height: 10),
const Row(
children: [
Text('Debit from:'),
Text(
'0300015678903456',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
)
],
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
labelText: 'Account Number',
@@ -88,6 +102,7 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
),
controller: accountNumberController,
keyboardType: TextInputType.number,
obscureText: true,
textInputAction: TextInputAction.next,
validator: (value) {
if (value == null || value.isEmpty) {
@@ -98,6 +113,35 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
return null;
},
),
const SizedBox(height: 24),
TextFormField(
controller: confirmAccountNumberController,
decoration: const InputDecoration(
labelText: 'Confirm Account Number',
// prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
isDense: true,
filled: true,
fillColor: Colors.white,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 2),
),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Re-enter account number';
}
if (value != accountNumberController.text) {
return 'Account numbers do not match';
}
return null;
},
),
const SizedBox(height: 25),
TextFormField(
decoration: const InputDecoration(
@@ -297,11 +341,10 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
Expanded(child: buildTransactionModeSelector()),
],
),
const SizedBox(height: 45),
Align(
alignment: Alignment.center,
child: SwipeButton.expand(
alignment: Alignment.center,
child: SwipeButton.expand(
thumb: const Icon(
Icons.arrow_forward,
color: Colors.white,
@@ -312,20 +355,26 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
height: 56,
child: const Text(
"Swipe to Pay",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
style:
TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
onSwipe: () {
if (_formKey.currentState!.validate()) {
// Perform payment logic
final selectedMode = transactionModes[selectedTransactionIndex];
final selectedMode =
transactionModes[selectedTransactionIndex];
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Paying via $selectedMode...')),
SnackBar(
content: Text('Paying via $selectedMode...')),
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const TransactionPinScreen()));
}
},
)
),
)),
],
),
),
@@ -351,7 +400,7 @@ class _QuickPayOutsideBankScreen extends State<QuickPayOutsideBankScreen> {
color: isSelected ? Colors.blue[200] : Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: isSelected? Colors.blue : Colors.grey,
color: isSelected ? Colors.blue : Colors.grey,
width: isSelected ? 0 : 1.2,
),
),

View File

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:flutter_swipe_button/flutter_swipe_button.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../fund_transfer/screens/transaction_pin_screen.dart';
class QuickPayWithinBankScreen extends StatefulWidget {
const QuickPayWithinBankScreen({super.key});
@@ -13,6 +15,7 @@ class _QuickPayWithinBankScreen extends State<QuickPayWithinBankScreen> {
final _formKey = GlobalKey<FormState>();
final TextEditingController accountNumberController = TextEditingController();
final TextEditingController confirmAccountNumberController = TextEditingController();
final TextEditingController nameController = TextEditingController();
final TextEditingController amountController = TextEditingController();
@@ -48,7 +51,17 @@ class _QuickPayWithinBankScreen extends State<QuickPayWithinBankScreen> {
key: _formKey,
child: Column(
children: [
const SizedBox(height: 25),
const SizedBox(height: 10),
const Row(
children: [
Text('Debit from:'),
Text(
'0300015678903456',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
)
],
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
labelText: 'Account Number',
@@ -65,6 +78,7 @@ class _QuickPayWithinBankScreen extends State<QuickPayWithinBankScreen> {
),
controller: accountNumberController,
keyboardType: TextInputType.number,
obscureText: true,
textInputAction: TextInputAction.next,
validator: (value) {
if (value == null || value.isEmpty) {
@@ -85,6 +99,35 @@ class _QuickPayWithinBankScreen extends State<QuickPayWithinBankScreen> {
),
)),
const SizedBox(height: 25),
TextFormField(
controller: confirmAccountNumberController,
decoration: const InputDecoration(
labelText: 'Confirm Account Number',
// prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
isDense: true,
filled: true,
fillColor: Colors.white,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 2),
),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Re-enter account number';
}
if (value != accountNumberController.text) {
return 'Account numbers do not match';
}
return null;
},
),
const SizedBox(height: 24),
TextFormField(
decoration: const InputDecoration(
labelText: 'Name',
@@ -170,6 +213,10 @@ class _QuickPayWithinBankScreen extends State<QuickPayWithinBankScreen> {
const SnackBar(
content: Text('Processing Payment...')),
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TransactionPinScreen()));
}
},
),