updated screens design for demo
This commit is contained in:
@@ -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,
|
||||
),
|
||||
),
|
||||
|
@@ -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()));
|
||||
}
|
||||
},
|
||||
),
|
||||
|
Reference in New Issue
Block a user