progress on home page

This commit is contained in:
2025-06-11 23:43:18 +02:00
parent 9d04b69b4a
commit d50623d24e
4 changed files with 263 additions and 276 deletions

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();
);
_slideAnimation = Tween<double>(begin: -1.0, end: 0.0).animate( _alignAnimation = Tween<AlignmentGeometry>(
CurvedAnimation(parent: _animationController, curve: Curves.easeOutCubic), begin: Alignment.centerLeft,
); end: Alignment.center,
_animationController.forward(); ).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),
),
),
);
}
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),
),
),
);
}
// 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,127 +98,212 @@ 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: 30,
fontSize: 24, fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, ),
),
), ),
), ),
const SizedBox(height: 24), const SizedBox(height: 20),
SlideTransition( Row(
position: Tween<Offset>( mainAxisAlignment: MainAxisAlignment.spaceAround,
begin: const Offset(0, 0), children: [
end: const Offset(0, 1), SlideTransition(
).animate(_slideAnimation), position: _animations[0],
child: _buildBalanceCard(context), 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: 24), const SizedBox(height: 30),
const Text( Row(
'Quick Actions', mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: TextStyle( children: [
fontSize: 18, const Text(
fontWeight: FontWeight.bold, 'Recent Activity',
), style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
GestureDetector(
onTap: () {
context.go('/history');
},
child: const Text(
'View All',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.normal,
),
),
),
],
), ),
const SizedBox(height: 16), const SizedBox(height: 20),
_buildQuickActions(context), Skeletonizer(
const SizedBox(height: 24), enabled: _loading,
const Text( child: ListView(
'Recent Transactions', shrinkWrap: true,
style: TextStyle( physics: const NeverScrollableScrollPhysics(),
fontSize: 18, children: [
fontWeight: FontWeight.bold, SlideTransition(
), position: _alignListAnimations[0],
), child: ListTile(
const SizedBox(height: 16), leading: Container(
_buildRecentTransactions(), padding: const EdgeInsets.all(8),
], decoration: BoxDecoration(
), color: Theme.of(
), context,
), ).colorScheme.primary.withValues(alpha: 0.1),
], shape: BoxShape.circle,
), ),
), child: Icon(
); Icons.electric_bolt,
} color: Theme.of(context).colorScheme.primary,
),
Widget _buildBalanceCard(BuildContext context) { ),
return Card( title: Text(
child: Container( 'Electricity Bill',
padding: const EdgeInsets.all(16), style: TextStyle(fontWeight: FontWeight.bold),
decoration: BoxDecoration( ),
color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.2), subtitle: Text(
borderRadius: BorderRadius.circular(16), 'Paid USD 50.00',
), style: TextStyle(fontWeight: FontWeight.normal),
child: Column( ),
crossAxisAlignment: CrossAxisAlignment.start, trailing: Text(
children: [ '-USD 50.00',
Row( style: TextStyle(
mainAxisAlignment: MainAxisAlignment.spaceBetween, color: Colors.red,
children: [ fontWeight: FontWeight.bold,
Column( ),
crossAxisAlignment: CrossAxisAlignment.start, ),
children: [ ),
const Text( ),
'Available Balance', SlideTransition(
style: TextStyle(color: Colors.black87, fontSize: 14), position: _alignListAnimations[1],
), child: ListTile(
const SizedBox(height: 4), leading: Container(
const Text( padding: const EdgeInsets.all(8),
'\$0.00', decoration: BoxDecoration(
style: TextStyle( color: Theme.of(
color: Colors.black, context,
fontSize: 24, ).colorScheme.primary.withValues(alpha: 0.1),
fontWeight: FontWeight.bold, 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,
),
),
),
),
],
), ),
), ),
], ],
), ),
_buildActionButton(
context,
'Add',
Icons.add_circle_outline,
() {},
),
],
),
],
),
),
);
}
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,
), ),
), ),
], ],
@@ -182,157 +311,4 @@ class _HomeScreenState extends State<HomeScreen>
), ),
); );
} }
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(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.tertiary,
),
),
],
),
);
}
Widget _buildRecentTransactions() {
return ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: 3,
itemBuilder: (context, index) {
return SlideTransition(
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(
leading: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.tertiary.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(
index == 0
? Icons.phone_android
: index == 1
? Icons.wifi
: Icons.receipt_long,
color: Theme.of(context).colorScheme.tertiary,
),
),
title: Text(
index == 0
? 'Mobile Bill'
: index == 1
? 'Internet Bill'
: 'Electricity Bill',
),
subtitle: Text(
index == 0
? 'Yesterday'
: index == 1
? '2 days ago'
: '3 days ago',
style: const TextStyle(fontSize: 12),
),
trailing: Text(
index == 0
? '-\$50.00'
: index == 1
? '-\$75.00'
: '-\$120.00',
style: TextStyle(
color: Theme.of(context).colorScheme.error,
fontWeight: FontWeight.bold,
),
),
),
);
},
);
}
} }

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,

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

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: