vusakhoza/velocity-pay-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress on home page

Browse Source
This commit is contained in:
Vus Khoza
2025-06-11 23:43:18 +02:00
parent 9d04b69b4a
commit d50623d24e
4 changed files with 263 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
lib/screens/home_screen.dart
View File

@@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'dart:async';
class HomeScreen extends StatefulWidget { class HomeScreen extends StatefulWidget {
const HomeScreen({super.key}); const HomeScreen({super.key});
@@ -10,30 +12,72 @@ class HomeScreen extends StatefulWidget {
class _HomeScreenState extends State<HomeScreen> class _HomeScreenState extends State<HomeScreen>
with SingleTickerProviderStateMixin { with SingleTickerProviderStateMixin {
late AnimationController _animationController; late AnimationController _controller;
late Animation<double> _slideAnimation; late final Animation<AlignmentGeometry> _alignAnimation;
final List<Animation<Offset>> _animations = [];
final List<Animation<Offset>> _alignListAnimations = [];
late bool _enabled = true;
late bool _loading = true;
Timer? _loadingTimer;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_animationController = AnimationController( _controller = AnimationController(
duration: const Duration(milliseconds: 600),
vsync: this, vsync: this,
duration: const Duration(milliseconds: 250), )..forward();
_alignAnimation = Tween<AlignmentGeometry>(
begin: Alignment.centerLeft,
end: Alignment.center,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
List tranListIndices = [0, 1];
for (int i = 0; i < tranListIndices.length; i++) {
_alignListAnimations.add(
Tween<Offset>(begin: Offset(0, -0.25), end: Offset.zero).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0.075 * i, 1.0, curve: Curves.easeOut),
),
),
); );
_slideAnimation = Tween<double>(begin: -1.0, end: 0.0).animate( }
CurvedAnimation(parent: _animationController, curve: Curves.easeOutCubic),
List buttonIndices = [0, 1, 2];
for (int i = 0; i < buttonIndices.length; i++) {
_animations.add(
Tween<Offset>(begin: Offset(-0.15, 0), end: Offset.zero).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0.075 * i, 1.0, curve: Curves.easeOut),
),
),
); );
_animationController.forward(); }
// Simulate a delay to mimic loading state
_loadingTimer = Timer(const Duration(seconds: 1), () {
if (mounted) {
setState(() {
_loading = false;
});
}
});
} }
@override @override
void dispose() { void dispose() {
_animationController.dispose(); _loadingTimer?.cancel();
_controller.dispose();
super.dispose(); super.dispose();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final VoidCallback? onPressed = _enabled ? () {} : null;
return Scaffold( return Scaffold(
body: SafeArea( body: SafeArea(
child: CustomScrollView( child: CustomScrollView(
@@ -54,285 +98,217 @@ class _HomeScreenState extends State<HomeScreen>
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text( AlignTransition(
'Welcome back,', alignment: _alignAnimation,
style: TextStyle(fontSize: 16, color: Colors.grey), child: Skeletonizer(
), enabled: _loading,
const SizedBox(height: 4), child: Text(
const Text( "USD 4.02",
'John Doe',
style: TextStyle( style: TextStyle(
fontSize: 24, fontSize: 30,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
const SizedBox(height: 24),
SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0),
end: const Offset(0, 1),
).animate(_slideAnimation),
child: _buildBalanceCard(context),
),
const SizedBox(height: 24),
const Text(
'Quick Actions',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
), ),
), ),
const SizedBox(height: 16), const SizedBox(height: 20),
_buildQuickActions(context), Row(
const SizedBox(height: 24), mainAxisAlignment: MainAxisAlignment.spaceAround,
const Text(
'Recent Transactions',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
_buildRecentTransactions(),
],
),
),
),
],
),
),
);
}
Widget _buildBalanceCard(BuildContext context) {
return Card(
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
SlideTransition(
position: _animations[0],
child: FilledButton(
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(
Theme.of(
context,
).colorScheme.primary.withValues(alpha: 0.9),
),
padding: WidgetStateProperty.all(
const EdgeInsets.symmetric(
vertical: 17.5,
horizontal: 30,
),
),
),
onPressed: onPressed,
child: Row(
children: [
Icon(Icons.electric_bolt, color: Colors.white),
const SizedBox(width: 8),
const Text(
'Electricity',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
SlideTransition(
position: _animations[1],
child: OutlinedButton(
style: ButtonStyle(
side: WidgetStateProperty.all(
BorderSide(
color: Theme.of(context).colorScheme.primary,
),
),
foregroundColor: WidgetStateProperty.all(
Theme.of(context).colorScheme.primary,
),
padding: WidgetStateProperty.all(
const EdgeInsets.symmetric(
vertical: 17.5,
horizontal: 30,
),
),
),
onPressed: onPressed,
child: Row(
children: [
Icon(Icons.phone_android),
const SizedBox(width: 8),
const Text(
'Airtime',
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
SlideTransition(
position: _animations[2],
child: OutlinedButton(
style: ButtonStyle(
side: WidgetStateProperty.all(
BorderSide(
color: Theme.of(context).colorScheme.primary,
),
),
padding: WidgetStateProperty.all(
const EdgeInsets.symmetric(
vertical: 17.5,
horizontal: 30,
),
),
),
onPressed: onPressed,
child: Icon(Icons.add),
),
),
],
),
const SizedBox(height: 30),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text( const Text(
'Available Balance', 'Recent Activity',
style: TextStyle(color: Colors.black87, fontSize: 14),
),
const SizedBox(height: 4),
const Text(
'\$0.00',
style: TextStyle( style: TextStyle(
color: Colors.black, fontSize: 18,
fontSize: 24,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
], GestureDetector(
), onTap: () {
_buildActionButton( context.go('/history');
context, },
'Add', child: const Text(
Icons.add_circle_outline, 'View All',
() {},
),
],
),
],
),
),
);
}
Widget _buildActionButton(
BuildContext context,
String label,
IconData icon,
VoidCallback onTap,
) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Colors.black87.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Icon(icon, color: Colors.white, size: 18),
const SizedBox(width: 4),
Text(
label,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
],
),
),
);
}
Widget _buildQuickActions(BuildContext context) {
return GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childAspectRatio: 2,
children: [
_buildAnimatedQuickActionItem(
context,
'Electricity',
Icons.electric_bolt_outlined,
() {},
0,
),
_buildAnimatedQuickActionItem(
context,
'Airtime',
Icons.phone_android_outlined,
() {},
1,
),
],
);
}
Widget _buildAnimatedQuickActionItem(
BuildContext context,
String label,
IconData icon,
VoidCallback onTap,
int index,
) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: const Offset(0, 0),
).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(0.4 + (index * 0.1), 0.8 + (index * 0.1)),
),
),
child: _buildQuickActionItem(context, label, icon, onTap),
);
}
Widget _buildQuickActionItem(
BuildContext context,
String label,
IconData icon,
VoidCallback onTap,
) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
icon,
color: Theme.of(context).colorScheme.secondary,
size: 28,
),
),
const SizedBox(height: 8),
Text(
label,
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 18,
fontWeight: FontWeight.w500, fontWeight: FontWeight.normal,
color: Theme.of(context).colorScheme.tertiary, ),
), ),
), ),
], ],
), ),
); const SizedBox(height: 20),
} Skeletonizer(
enabled: _loading,
Widget _buildRecentTransactions() { child: ListView(
return ListView.builder(
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
itemCount: 3, children: [
itemBuilder: (context, index) { SlideTransition(
return SlideTransition( position: _alignListAnimations[0],
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(
0.5 + (index * 0.1),
0.7 + (index * 0.1),
curve: Curves.easeOutCubic,
),
),
),
child: ListTile( child: ListTile(
leading: Container( leading: Container(
padding: const EdgeInsets.all(8), padding: const EdgeInsets.all(8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context).colorScheme.tertiary.withOpacity(0.1), color: Theme.of(
borderRadius: BorderRadius.circular(8), context,
).colorScheme.primary.withValues(alpha: 0.1),
shape: BoxShape.circle,
), ),
child: Icon( child: Icon(
index == 0 Icons.electric_bolt,
? Icons.phone_android color: Theme.of(context).colorScheme.primary,
: index == 1
? Icons.wifi
: Icons.receipt_long,
color: Theme.of(context).colorScheme.tertiary,
), ),
), ),
title: Text( title: Text(
index == 0 'Electricity Bill',
? 'Mobile Bill' style: TextStyle(fontWeight: FontWeight.bold),
: index == 1
? 'Internet Bill'
: 'Electricity Bill',
), ),
subtitle: Text( subtitle: Text(
index == 0 'Paid USD 50.00',
? 'Yesterday' style: TextStyle(fontWeight: FontWeight.normal),
: index == 1
? '2 days ago'
: '3 days ago',
style: const TextStyle(fontSize: 12),
), ),
trailing: Text( trailing: Text(
index == 0 '-USD 50.00',
? '-\$50.00'
: index == 1
? '-\$75.00'
: '-\$120.00',
style: TextStyle( style: TextStyle(
color: Theme.of(context).colorScheme.error, color: Colors.red,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
), ),
); ),
}, SlideTransition(
position: _alignListAnimations[1],
child: ListTile(
leading: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Theme.of(
context,
).colorScheme.primary.withValues(alpha: 0.1),
shape: BoxShape.circle,
),
child: Icon(
Icons.phone_android,
color: Theme.of(context).colorScheme.primary,
),
),
title: Text(
'Airtime Purchase',
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text(
'Purchased USD 10.00',
style: TextStyle(fontWeight: FontWeight.normal),
),
trailing: Text(
'-USD 10.00',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
],
),
),
),
],
),
),
); );
} }
} }

2
lib/theme/app_theme.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class AppTheme { class AppTheme {
static const _primaryColor = Color(0xFFD4AF37); // Gold static const _primaryColor = Color(0xFFD4AF37); // Gold
@@ -9,6 +10,7 @@ class AppTheme {
static const _errorColor = Color(0xFFB3261E); static const _errorColor = Color(0xFFB3261E);
static final ThemeData lightTheme = ThemeData( static final ThemeData lightTheme = ThemeData(
textTheme: GoogleFonts.assistantTextTheme(),
useMaterial3: true, useMaterial3: true,
colorScheme: ColorScheme.light( colorScheme: ColorScheme.light(
primary: _primaryColor, primary: _primaryColor,

8
pubspec.lock
View File

@@ -392,6 +392,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.4.1" version: "2.4.1"
skeletonizer:
dependency: "direct main"
description:
name: skeletonizer
sha256: "0dcacc51c144af4edaf37672072156f49e47036becbc394d7c51850c5c1e884b"
url: "https://pub.dev"
source: hosted
version: "1.4.3"
sky_engine: sky_engine:
dependency: transitive dependency: transitive
description: flutter description: flutter

1
pubspec.yaml
View File

@@ -41,6 +41,7 @@ dependencies:
flutter_svg: ^2.0.9 flutter_svg: ^2.0.9
google_fonts: ^6.1.0 google_fonts: ^6.1.0
uuid: ^4.3.3 uuid: ^4.3.3
skeletonizer: ^1.4.3
dev_dependencies: dev_dependencies:
flutter_test: flutter_test: