updated screens design for demo
This commit is contained in:
@@ -8,46 +8,96 @@ class AccountStatementScreen extends StatefulWidget {
|
||||
State<AccountStatementScreen> createState() => _AccountStatementScreen();
|
||||
}
|
||||
|
||||
class _AccountStatementScreen extends State<AccountStatementScreen>{
|
||||
class _AccountStatementScreen extends State<AccountStatementScreen> {
|
||||
DateTime? fromDate;
|
||||
DateTime? toDate;
|
||||
final _amountRangeController = TextEditingController(text: "");
|
||||
final transactions = [
|
||||
{"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹133.98", "type": "Cr", "time": "21-02-2024 13:09:30"},
|
||||
{"desc": "Mobile recharge", "amount": "-₹299.00", "type": "Dr", "time": "21-02-2024 13:09:30"},
|
||||
{"desc": "NEFT received from Jaya Saha", "amount": "+₹987.80", "type": "Cr", "time": "21-02-2024 13:09:30"},
|
||||
{"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
|
||||
{"desc": "Transfer From ICICI Bank subsidy", "amount": "-₹100.00", "type": "Dr", "time": "21-02-2024 13:09:30"},
|
||||
{"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
|
||||
{"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
|
||||
{
|
||||
"desc": "Transfer From ICICI Bank subsidy",
|
||||
"amount": "+₹133.98",
|
||||
"type": "Cr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
{
|
||||
"desc": "Mobile recharge",
|
||||
"amount": "-₹299.00",
|
||||
"type": "Dr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
{
|
||||
"desc": "NEFT received from Jaya Saha",
|
||||
"amount": "+₹987.80",
|
||||
"type": "Cr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
{
|
||||
"desc": "Transfer From ICICI Bank subsidy",
|
||||
"amount": "+₹100.00",
|
||||
"type": "Cr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
{
|
||||
"desc": "Transfer From ICICI Bank subsidy",
|
||||
"amount": "-₹100.00",
|
||||
"type": "Dr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
{
|
||||
"desc": "Transfer From ICICI Bank subsidy",
|
||||
"amount": "+₹100.00",
|
||||
"type": "Cr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
{
|
||||
"desc": "Transfer From ICICI Bank subsidy",
|
||||
"amount": "+₹100.00",
|
||||
"type": "Cr",
|
||||
"time": "21-02-2024 13:09:30"
|
||||
},
|
||||
];
|
||||
|
||||
void _selectDate({required bool isFromDate}) async {
|
||||
final DateTime initial = isFromDate ? fromDate ?? DateTime.now() : toDate ?? fromDate ?? DateTime.now();
|
||||
Future<void> _selectFromDate(BuildContext context) async {
|
||||
final DateTime now = DateTime.now();
|
||||
|
||||
final DateTime? picked = await showDatePicker(
|
||||
context: context,
|
||||
initialDate: initial,
|
||||
firstDate: DateTime(2023),
|
||||
lastDate: DateTime(2030),
|
||||
initialDate: fromDate ?? now,
|
||||
firstDate: DateTime(2020), // or your app's start limit
|
||||
lastDate: now, // No future date
|
||||
);
|
||||
|
||||
if (picked != null) {
|
||||
setState(() {
|
||||
if (isFromDate) {
|
||||
fromDate = picked;
|
||||
if (toDate != null && toDate!.isBefore(fromDate!)) {
|
||||
toDate = null; // reset invalid toDate
|
||||
}
|
||||
} else {
|
||||
if (fromDate != null && picked.isBefore(fromDate!)) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
|
||||
content: Text("To Date cannot be before From Date"),
|
||||
));
|
||||
} else {
|
||||
toDate = picked;
|
||||
}
|
||||
}
|
||||
fromDate = picked;
|
||||
toDate = null; // reset toDate when fromDate changes
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _selectToDate(BuildContext context) async {
|
||||
if (fromDate == null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
|
||||
content: Text('Please select From Date first'),
|
||||
));
|
||||
return;
|
||||
}
|
||||
|
||||
final DateTime now = DateTime.now();
|
||||
|
||||
final DateTime lastAllowedDate = fromDate!.add(const Duration(days: 31));
|
||||
final DateTime maxToDate = lastAllowedDate.isBefore(now) ? lastAllowedDate : now;
|
||||
|
||||
final DateTime? picked = await showDatePicker(
|
||||
context: context,
|
||||
initialDate: toDate ?? fromDate!,
|
||||
firstDate: fromDate!, // 🔒 can't be before fromDate
|
||||
lastDate: maxToDate, // 🔒 not more than 1 month or future
|
||||
);
|
||||
|
||||
if (picked != null) {
|
||||
setState(() {
|
||||
toDate = picked;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -68,40 +118,76 @@ class _AccountStatementScreen extends State<AccountStatementScreen>{
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: IconButton(icon: const Icon(Symbols.arrow_back_ios_new),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Symbols.arrow_back_ios_new),
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
},),
|
||||
title: const Text('Account Statement', style: TextStyle(color: Colors.black,
|
||||
fontWeight: FontWeight.w500),),
|
||||
},
|
||||
),
|
||||
title: const Text(
|
||||
'Account Statement',
|
||||
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
|
||||
backgroundImage: AssetImage('assets/images/avatar.jpg'),
|
||||
// Replace with your image
|
||||
radius: 20,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('Filters', style: TextStyle(fontSize: 17),),
|
||||
const SizedBox(height: 15,),
|
||||
const Text(
|
||||
'Filters',
|
||||
style: TextStyle(fontSize: 17),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: _buildFromDateSelector()),
|
||||
Expanded(child: GestureDetector(
|
||||
onTap: () => _selectFromDate(context),
|
||||
child: buildDateBox("From Date", fromDate),
|
||||
),),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: _buildToDateSelector()),
|
||||
Expanded(child: GestureDetector(
|
||||
onTap: () => _selectToDate(context),
|
||||
child: buildDateBox("To Date", toDate),
|
||||
),),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
_buildFilterBox(""),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildFilterBox(""),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 8,
|
||||
),
|
||||
SizedBox(
|
||||
width: 75,
|
||||
child: ElevatedButton(
|
||||
onPressed: () {},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
),
|
||||
child: const Text(
|
||||
'Go',
|
||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
|
||||
)),
|
||||
)
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 35),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
@@ -115,54 +201,26 @@ class _AccountStatementScreen extends State<AccountStatementScreen>{
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFromDateSelector() {
|
||||
return GestureDetector(
|
||||
onTap: () => _selectDate(isFromDate: true),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.grey),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
fromDate != null ? _formatDate(fromDate!) : "From Date",
|
||||
style: const TextStyle(fontSize: 16),
|
||||
),
|
||||
),
|
||||
const Icon(Icons.arrow_drop_down),
|
||||
],
|
||||
),
|
||||
Widget buildDateBox(String label, DateTime? date) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.grey),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildToDateSelector() {
|
||||
return GestureDetector(
|
||||
onTap: () => _selectDate(isFromDate: false),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.grey),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
toDate != null ? _formatDate(toDate!) : "To Date",
|
||||
style: const TextStyle(fontSize: 16),
|
||||
),
|
||||
),
|
||||
const Icon(Icons.arrow_drop_down),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
date != null ? _formatDate(date) : label,
|
||||
style: TextStyle(fontSize: 16,
|
||||
color: date != null ? Colors.black: Colors.grey),
|
||||
),
|
||||
const Icon(Icons.arrow_drop_down),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -206,7 +264,9 @@ class _AccountStatementScreen extends State<AccountStatementScreen>{
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Expanded(child: Text(txn['desc']!, style: const TextStyle(fontSize: 16))),
|
||||
Expanded(
|
||||
child:
|
||||
Text(txn['desc']!, style: const TextStyle(fontSize: 16))),
|
||||
Text(
|
||||
"${txn['amount']} ${txn['type']}",
|
||||
style: TextStyle(color: amountColor, fontWeight: FontWeight.bold),
|
||||
@@ -217,4 +277,4 @@ class _AccountStatementScreen extends State<AccountStatementScreen>{
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user