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

Screen design of Dashboard & customer Info

Browse Source
This commit is contained in:
Trina Bakshi
2025-04-28 17:57:32 +05:30
parent fa6690165d
commit 3108093686
16 changed files with 585 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
lib/features/dashboard/screens/dashboard_screen.dart
View File

@@ -1,11 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../auth/controllers/auth_cubit.dart';
import '../../auth/controllers/auth_state.dart';
import '../widgets/account_card.dart';
import '../widgets/transaction_list_item.dart';
import '../../accounts/models/account.dart';
import '../../transactions/models/transaction.dart';
import 'package:kmobile/features/auth/screens/customer_info_screen.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
class DashboardScreen extends StatefulWidget {
const DashboardScreen({super.key});
@@ -15,333 +10,139 @@ class DashboardScreen extends StatefulWidget {
}
class _DashboardScreenState extends State<DashboardScreen> {
// Mock data for demonstration
final List<Account> _accounts = [
Account(
id: '1',
accountNumber: '**** 4589',
accountType: 'Savings',
balance: 12450.75,
currency: 'USD',
),
Account(
id: '2',
accountNumber: '**** 7823',
accountType: 'Checking',
balance: 3840.50,
currency: 'USD',
),
];
final List<Transaction> _recentTransactions = [
Transaction(
id: 't1',
description: 'Coffee Shop',
amount: -4.50,
date: DateTime.now().subtract(const Duration(hours: 3)),
category: 'Food & Drink',
),
Transaction(
id: 't2',
description: 'Salary Deposit',
amount: 2500.00,
date: DateTime.now().subtract(const Duration(days: 2)),
category: 'Income',
),
Transaction(
id: 't3',
description: 'Electric Bill',
amount: -85.75,
date: DateTime.now().subtract(const Duration(days: 3)),
category: 'Utilities',
),
Transaction(
id: 't4',
description: 'Amazon Purchase',
amount: -32.50,
date: DateTime.now().subtract(const Duration(days: 5)),
category: 'Shopping',
),
// Mock data for transactions
final List<Map<String, String>> transactions = [
{'name': 'Raj Kumar', 'amount': '₹1,000', 'date': '09 March, 2025 16:04', 'type': 'in'},
{'name': 'Sunita Joshi', 'amount': '₹1,45,000', 'date': '07 March, 2025 16:04', 'type': 'out'},
{'name': 'Manoj Singh', 'amount': '₹2,400', 'date': '07 March, 2025 16:04', 'type': 'in'},
{'name': 'Raj Kumar', 'amount': '₹11,500', 'date': '09 March, 2025 16:04', 'type': 'in'},
{'name': 'Manoj Singh', 'amount': '₹1,000', 'date': '', 'type': 'in'},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Dashboard'),
automaticallyImplyLeading: false,
title: const Text('kMobile', style: TextStyle(color: Colors.blueAccent,
fontWeight: FontWeight.w500),),
actions: [
IconButton(
icon: const Icon(Icons.notifications_outlined),
onPressed: () {
// Navigate to notifications
},
),
IconButton(
icon: const Icon(Icons.logout),
onPressed: () {
_showLogoutConfirmation(context);
},
// IconButton(
// icon: const Icon(Icons.notifications_outlined),
// onPressed: () {
// // Navigate to notifications
// },
// ),
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: (){
Navigator.push(context, MaterialPageRoute(
builder: (context) => const CustomerInfoScreen()));
},
child: const CircleAvatar(
backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
radius: 20,
),
),
),
],
),
body: RefreshIndicator(
onRefresh: () async {
// Implement refresh logic to fetch updated data
await Future.delayed(const Duration(seconds: 1));
},
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Greeting section
BlocBuilder<AuthCubit, AuthState>(
builder: (context, state) {
if (state is Authenticated) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hello, ${state.user.username}',
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 4),
Text(
'Welcome back to your banking app',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[600],
),
),
],
);
}
return Container();
},
body: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 16),
// Account Info Card
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.blue[700],
borderRadius: BorderRadius.circular(16),
),
const SizedBox(height: 24),
// Account cards section
const Text(
'Your Accounts',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
SizedBox(
height: 180,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _accounts.length + 1, // +1 for the "Add Account" card
itemBuilder: (context, index) {
if (index < _accounts.length) {
return Padding(
padding: const EdgeInsets.only(right: 16.0),
child: AccountCard(account: _accounts[index]),
);
} else {
// "Add Account" card
return Container(
width: 300,
margin: const EdgeInsets.only(right: 16.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey[300]!),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.add_circle_outline,
size: 40,
color: Theme.of(context).primaryColor,
),
const SizedBox(height: 8),
Text(
'Add New Account',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
},
),
),
const SizedBox(height: 32),
// Quick Actions section
const Text(
'Quick Actions',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildQuickActionButton(
icon: Icons.swap_horiz,
label: 'Transfer',
onTap: () {
// Navigate to transfer screen
},
Row(
children: [
Text("Account Number: ", style:
TextStyle(color: Colors.white, fontSize: 12)),
Text("03000156789462302", style:
TextStyle(color: Colors.white, fontSize: 14)),
Padding(
padding: EdgeInsets.only(left: 5.0),
child: Icon(Symbols.keyboard_arrow_down, color: Colors.white),
),
],
),
_buildQuickActionButton(
icon: Icons.payment,
label: 'Pay Bills',
onTap: () {
// Navigate to bill payment screen
},
),
_buildQuickActionButton(
icon: Icons.qr_code_scanner,
label: 'Scan & Pay',
onTap: () {
// Navigate to QR code scanner
},
),
_buildQuickActionButton(
icon: Icons.more_horiz,
label: 'More',
onTap: () {
// Show more options
},
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("₹ *****", style: TextStyle(color: Colors.white,
fontSize: 24, fontWeight: FontWeight.w700)),
Icon(Symbols.visibility_lock, color: Colors.white),
],
),
SizedBox(height: 20),
],
),
const SizedBox(height: 32),
// Recent Transactions section
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Recent Transactions',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
TextButton(
onPressed: () {
// Navigate to all transactions
},
child: const Text('See All'),
),
],
),
const SizedBox(height: 8),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _recentTransactions.length,
itemBuilder: (context, index) {
return TransactionListItem(
transaction: _recentTransactions[index],
);
},
),
],
),
),
const SizedBox(height: 18),
const Text('Quick Links', style: TextStyle(fontSize: 15),),
const SizedBox(height: 16),
// Quick Links
GridView.count(
crossAxisCount: 4,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
children: [
_buildQuickLink(Symbols.id_card, "Customer \n Info"),
_buildQuickLink(Symbols.currency_rupee, "Quick \n Pay"),
_buildQuickLink(Symbols.send_money, "Fund \n Transfer"),
_buildQuickLink(Symbols.server_person, "Account \n Info"),
_buildQuickLink(Symbols.receipt_long, "Account \n History"),
_buildQuickLink(Symbols.checkbook, "Handle \n Cheque"),
_buildQuickLink(Icons.group, "Manage \n Beneficiary"),
_buildQuickLink(Symbols.support_agent, "Contact \n Us"),
],
),
const SizedBox(height: 10),
// Recent Transactions
const Align(
alignment: Alignment.centerLeft,
child: Text("Recent Transactions", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
...transactions.map((tx) => ListTile(
leading: Icon(tx['type'] == 'in' ? Symbols.call_received : Symbols.call_made, color: tx['type'] == 'in' ? Colors.green : Colors.red),
title: Text(tx['name']!),
subtitle: Text(tx['date']!),
trailing: Text(tx['amount']!),
)),
],
),
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.dashboard),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet),
label: 'Accounts',
),
BottomNavigationBarItem(
icon: Icon(Icons.show_chart),
label: 'Insights',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
onTap: (index) {
// Handle navigation
},
),
);
}
Widget _buildQuickActionButton({
required IconData icon,
required String label,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Column(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor.withAlpha((0.1 * 255).toInt()),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: Theme.of(context).primaryColor,
size: 28,
),
),
const SizedBox(height: 8),
Text(
label,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
void _showLogoutConfirmation(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Logout'),
content: const Text('Are you sure you want to logout?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('CANCEL'),
),
TextButton(
onPressed: () {
Navigator.pop(context);
context.read<AuthCubit>().logout();
},
child: const Text('LOGOUT'),
),
],
),
Widget _buildQuickLink(IconData icon, String label) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 30, color: Colors.blue[700]),
const SizedBox(height: 4),
Text(label, textAlign: TextAlign.center, style: const TextStyle(fontSize: 12)),
],
);
}
}