apksel-dev/apskel-owner-flutter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: header home page

Browse Source
This commit is contained in:
efrilm 2025-08-16 00:45:05 +07:00
parent d73cd1a574
commit 6019036cd7
1 changed files with 383 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

746
lib/presentation/pages/home/widgets/header.dart
View File

@ -1,6 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'dart:math' as math;
import '../../../../common/extension/extension.dart'; import '../../../../common/extension/extension.dart';
import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart'; import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart'; import '../../../components/spacer/spacer.dart';
@ -12,244 +14,248 @@ class HomeHeader extends StatefulWidget {
} }
class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin { class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
late AnimationController _backgroundAnimationController; late AnimationController _animationController;
late AnimationController _pulseAnimationController; late AnimationController _particleController;
late AnimationController _rotationAnimationController; late AnimationController _waveController;
late AnimationController _breathController;
late Animation<double> _circleAnimation; late Animation<double> _fadeInAnimation;
late Animation<double> _pulseAnimation; late Animation<Offset> _slideAnimation;
late Animation<double> _rotationAnimation; late Animation<double> _scaleAnimation;
late Animation<double> _particleAnimation;
late Animation<double> _waveAnimation;
late Animation<double> _breathAnimation;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
// Background animation controller for floating circles // Main content animations
_backgroundAnimationController = AnimationController( _animationController = AnimationController(
duration: const Duration(seconds: 15), duration: const Duration(milliseconds: 1200),
vsync: this, vsync: this,
)..repeat(reverse: true); // Add reverse for smooth back-and-forth );
// Pulse animation for subtle breathing effect _particleController = AnimationController(
_pulseAnimationController = AnimationController( duration: const Duration(seconds: 8),
duration: const Duration(seconds: 6),
vsync: this,
)..repeat(reverse: true);
// Rotation animation for decorative elements (keep this smooth)
_rotationAnimationController = AnimationController(
duration: const Duration(seconds: 45),
vsync: this, vsync: this,
)..repeat(); )..repeat();
_circleAnimation = _waveController = AnimationController(
Tween<double>( duration: const Duration(seconds: 6),
begin: 0.0, vsync: this,
end: 20.0, // Reduced movement range )..repeat();
).animate(
_breathController = AnimationController(
duration: const Duration(seconds: 4),
vsync: this,
)..repeat(reverse: true);
// Content animations
_fadeInAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.6, curve: Curves.easeOut),
),
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.5), end: Offset.zero).animate(
CurvedAnimation( CurvedAnimation(
parent: _backgroundAnimationController, parent: _animationController,
curve: Curves.easeInOutSine, // Smoother curve curve: const Interval(0.2, 0.8, curve: Curves.easeOutCubic),
), ),
); );
_pulseAnimation = Tween<double>(begin: 0.08, end: 0.12).animate( _scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation( CurvedAnimation(
parent: _pulseAnimationController, parent: _animationController,
curve: Curves.easeInOutSine, // Smoother breathing effect curve: const Interval(0.0, 0.7, curve: Curves.elasticOut),
), ),
); );
_rotationAnimation = Tween<double>(begin: 0.0, end: 2 * 3.14159).animate( _particleAnimation = Tween<double>(
CurvedAnimation( begin: 0.0,
parent: _rotationAnimationController, end: 2 * math.pi,
curve: Curves.linear, ).animate(_particleController);
),
_waveAnimation = Tween<double>(
begin: 0.0,
end: 2 * math.pi,
).animate(_waveController);
_breathAnimation = Tween<double>(begin: 0.8, end: 1.2).animate(
CurvedAnimation(parent: _breathController, curve: Curves.easeInOut),
); );
_animationController.forward();
} }
@override @override
void dispose() { void dispose() {
_backgroundAnimationController.dispose(); _animationController.dispose();
_pulseAnimationController.dispose(); _particleController.dispose();
_rotationAnimationController.dispose(); _waveController.dispose();
_breathController.dispose();
super.dispose(); super.dispose();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return AnimatedBuilder(
height: 280, animation: Listenable.merge([
decoration: BoxDecoration( _particleController,
gradient: LinearGradient( _waveController,
colors: [ _breathController,
AppColor.primary, ]),
AppColor.primaryLight, builder: (context, child) {
AppColor.primaryLight.withOpacity(0.8), return Container(
], height: 280,
begin: Alignment.topLeft, decoration: BoxDecoration(
end: Alignment.bottomRight, gradient: LinearGradient(
stops: const [0.0, 0.7, 1.0], colors: [
), AppColor.primary,
boxShadow: [ AppColor.primaryLight,
BoxShadow( AppColor.primaryLight.withOpacity(0.8),
color: AppColor.primary.withOpacity(0.3), ],
blurRadius: 20, begin: Alignment.topLeft,
offset: const Offset(0, 10), end: Alignment.bottomRight,
stops: const [0.0, 0.7, 1.0],
),
boxShadow: [
BoxShadow(
color: AppColor.primary.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
), ),
], child: Stack(
), children: [
child: Stack( // Enhanced animated background
children: [ _buildAnimatedBackground(),
// Animated decorative circles
AnimatedBuilder(
animation: Listenable.merge([
_backgroundAnimationController,
_pulseAnimationController,
]),
builder: (context, child) {
return Stack(
children: [
// Large floating circle
Positioned(
top: -50 + _circleAnimation.value,
right: -50 + (_circleAnimation.value * 0.5),
child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(
_pulseAnimation.value,
),
),
);
},
),
),
// Medium floating circle // Main content
Positioned( SafeArea(child: _buildContent(context)),
top: 80 - (_circleAnimation.value * 0.3), ],
right: -20 + (_circleAnimation.value * 0.8),
child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(
_pulseAnimation.value * 0.5,
),
),
);
},
),
),
// Small floating circle
Positioned(
top: 150 + (_circleAnimation.value * 0.4),
right: 30 - (_circleAnimation.value * 0.2),
child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(
_pulseAnimation.value * 0.7,
),
),
);
},
),
),
// Left side decorative circles
Positioned(
top: 60 + (_circleAnimation.value * 0.6),
left: -30,
child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(
_pulseAnimation.value * 0.3,
),
),
);
},
),
),
Positioned(
bottom: 20 - (_circleAnimation.value * 0.5),
left: -20 + (_circleAnimation.value * 0.3),
child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(
_pulseAnimation.value * 0.4,
),
),
);
},
),
),
],
);
},
), ),
);
// Rotating subtle gradient overlay },
AnimatedBuilder(
animation: _rotationAnimationController,
builder: (context, child) {
return Transform.rotate(
angle: _rotationAnimation.value,
child: Container(
decoration: BoxDecoration(
gradient: RadialGradient(
center: const Alignment(0.8, -0.8),
radius: 1.5,
colors: [
AppColor.white.withOpacity(0.05),
Colors.transparent,
AppColor.primary.withOpacity(0.1),
],
stops: const [0.0, 0.6, 1.0],
),
),
),
);
},
),
// Content
SafeArea(child: _buildContent(context)),
],
),
); );
} }
Padding _buildContent(BuildContext context) { Widget _buildAnimatedBackground() {
return Stack(
children: [
// Floating particles with orbital motion
...List.generate(12, (index) {
final double radius = 60 + (index * 15);
final double angle = _particleAnimation.value + (index * 0.5);
final double centerX = MediaQuery.of(context).size.width * 0.8;
final double centerY = 100;
return Positioned(
left: centerX + math.cos(angle) * radius - 4,
top: centerY + math.sin(angle) * (radius * 0.5) - 4,
child: Transform.scale(
scale: _breathAnimation.value * 0.4,
child: Container(
width: 2 + (index % 3),
height: 2 + (index % 3),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.7),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.3),
blurRadius: 6,
spreadRadius: 1,
),
],
),
),
),
);
}),
// Wave patterns
Positioned.fill(
child: CustomPaint(
painter: WavePainter(
animation: _waveAnimation.value,
color: AppColor.white.withOpacity(0.08),
),
),
),
// Sparkle effects
...List.generate(8, (index) {
return Positioned(
left: (index * 60.0) % MediaQuery.of(context).size.width,
top: 30 + (index * 25.0),
child: Transform.rotate(
angle: _particleAnimation.value * 2 + index,
child: Transform.scale(
scale: math.sin(_particleAnimation.value + index) * 0.3 + 0.8,
child: Icon(
Icons.auto_awesome,
size: 8 + (index % 3) * 3,
color: AppColor.white.withOpacity(0.5),
),
),
),
);
}),
// Gradient overlay for depth
Container(
decoration: BoxDecoration(
gradient: RadialGradient(
center: const Alignment(0.8, -0.3),
radius: 1.5,
colors: [
Colors.transparent,
AppColor.primary.withOpacity(0.1),
Colors.transparent,
],
),
),
),
// Additional left side particles
...List.generate(6, (index) {
final double radius = 40 + (index * 10);
final double angle = _particleAnimation.value * 0.5 + (index * 1.2);
final double centerX = MediaQuery.of(context).size.width * 0.1;
final double centerY = 120;
return Positioned(
left: centerX + math.cos(angle) * radius - 2,
top: centerY + math.sin(angle) * (radius * 0.7) - 2,
child: Transform.scale(
scale: _breathAnimation.value * 0.3 + 0.5,
child: Container(
width: 2 + (index % 2),
height: 2 + (index % 2),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.4),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.2),
blurRadius: 4,
),
],
),
),
),
);
}),
],
);
}
Widget _buildContent(BuildContext context) {
String greeting(BuildContext context) { String greeting(BuildContext context) {
final hour = DateTime.now().hour; final hour = DateTime.now().hour;
@ -270,189 +276,203 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
// Top bar with subtle animation // Top bar with enhanced animation
TweenAnimationBuilder<double>( SlideTransition(
tween: Tween(begin: 0.0, end: 1.0), position: _slideAnimation,
duration: const Duration(milliseconds: 800), child: FadeTransition(
builder: (context, value, child) { opacity: _fadeInAnimation,
return Transform.translate( child: Transform.scale(
offset: Offset(0, 20 * (1 - value)), scale: _scaleAnimation.value,
child: Opacity( child: Row(
opacity: value, mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Row( children: [
mainAxisAlignment: MainAxisAlignment.spaceBetween, Expanded(
children: [ child: Column(
Expanded( crossAxisAlignment: CrossAxisAlignment.start,
child: Column( children: [
crossAxisAlignment: CrossAxisAlignment.start, Text(
children: [ 'AppSkel POS Owner',
Text( style: AppStyle.lg.copyWith(
'AppSkel POS Owner', color: AppColor.white.withOpacity(0.9),
style: AppStyle.lg.copyWith( fontWeight: FontWeight.w600,
color: AppColor.white.withOpacity(0.9), letterSpacing: 0.3,
fontWeight: FontWeight.w600, shadows: [
letterSpacing: 0.3, Shadow(
), color: Colors.black.withOpacity(0.2),
), offset: const Offset(0, 1),
const SpaceHeight(2), blurRadius: 2,
Text(
'Manager',
style: AppStyle.sm.copyWith(
color: AppColor.textLight,
fontSize: 11,
fontWeight: FontWeight.w400,
),
),
],
),
),
// Animated notification icon
AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Transform.scale(
scale: 1.0 + (_pulseAnimation.value * 0.1),
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: AppColor.white.withOpacity(0.3),
width: 1,
), ),
boxShadow: [ ],
BoxShadow(
color: AppColor.white.withOpacity(0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: const Icon(
Icons.notifications_none_rounded,
color: AppColor.white,
size: 20,
),
), ),
); ),
}, const SpaceHeight(2),
Text(
'Manager',
style: AppStyle.sm.copyWith(
color: AppColor.white.withOpacity(0.7),
fontSize: 11,
fontWeight: FontWeight.w400,
),
),
],
), ),
], ),
), // Enhanced notification icon with breathing animation
AnimatedBuilder(
animation: _breathController,
builder: (context, child) {
return Transform.scale(
scale: _breathAnimation.value * 0.1 + 1.0,
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.25),
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: AppColor.white.withOpacity(0.3),
width: 1,
),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.2),
blurRadius: 8 + (_breathAnimation.value * 2),
offset: const Offset(0, 2),
),
],
),
child: const Icon(
Icons.notifications_none_rounded,
color: AppColor.white,
size: 20,
),
),
);
},
),
],
), ),
); ),
}, ),
), ),
const SpaceHeight(24), const SpaceHeight(24),
// Greeting Section with staggered animation // Greeting Section with enhanced animations
TweenAnimationBuilder<double>( SlideTransition(
tween: Tween(begin: 0.0, end: 1.0), position: _slideAnimation,
duration: const Duration(milliseconds: 1000), child: FadeTransition(
builder: (context, value, child) { opacity: _fadeInAnimation,
return Transform.translate( child: Transform.scale(
offset: Offset(0, 30 * (1 - value)), scale: _scaleAnimation.value,
child: Opacity( child: Column(
opacity: value, crossAxisAlignment: CrossAxisAlignment.start,
child: Column( children: [
crossAxisAlignment: CrossAxisAlignment.start, Text(
children: [ '${greeting(context)},',
Text( style: AppStyle.lg.copyWith(
'${greeting(context)},', color: AppColor.white,
style: AppStyle.lg.copyWith( fontWeight: FontWeight.w500,
color: AppColor.white, shadows: [
fontWeight: FontWeight.w500, Shadow(
), color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 1),
blurRadius: 2,
),
],
), ),
const SpaceHeight(2), ),
Text( const SpaceHeight(2),
'Vira Vania! 👋', Text(
style: AppStyle.h4.copyWith( 'Vira Vania! 👋',
color: AppColor.white, style: AppStyle.h4.copyWith(
fontWeight: FontWeight.w800, color: AppColor.white,
letterSpacing: -0.5, fontWeight: FontWeight.w800,
), letterSpacing: -0.5,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 2),
blurRadius: 4,
),
],
), ),
const SpaceHeight(8), ),
Text( const SpaceHeight(8),
context.lang.home_header_desc, Text(
style: AppStyle.md.copyWith( context.lang.home_header_desc,
color: AppColor.white.withOpacity(0.85), style: AppStyle.md.copyWith(
fontWeight: FontWeight.w400, color: AppColor.white.withOpacity(0.85),
height: 1.3, fontWeight: FontWeight.w400,
), height: 1.3,
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
], maxLines: 2,
), overflow: TextOverflow.ellipsis,
),
],
), ),
); ),
}, ),
), ),
const SpaceHeight(16), const SpaceHeight(16),
// Today's highlight with delayed animation // Today's highlight with enhanced breathing animation
TweenAnimationBuilder<double>( FadeTransition(
tween: Tween(begin: 0.0, end: 1.0), opacity: _fadeInAnimation,
duration: const Duration(milliseconds: 1200), child: SlideTransition(
builder: (context, value, child) { position: _slideAnimation,
return Transform.translate( child: AnimatedBuilder(
offset: Offset(0, 20 * (1 - value)), animation: _breathController,
child: Opacity( builder: (context, child) {
opacity: value, return Transform.scale(
child: AnimatedBuilder( scale: _breathAnimation.value * 0.05 + 1.0,
animation: _pulseAnimationController, child: Container(
builder: (context, child) { padding: const EdgeInsets.symmetric(
return Container( horizontal: 12,
padding: const EdgeInsets.symmetric( vertical: 6,
horizontal: 12, ),
vertical: 6, decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.25),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppColor.white.withOpacity(0.3),
width: 1,
), ),
decoration: BoxDecoration( boxShadow: [
color: AppColor.white.withOpacity( BoxShadow(
0.2 + (_pulseAnimation.value * 0.05), color: AppColor.white.withOpacity(0.1),
blurRadius: 6 + (_breathAnimation.value * 2),
offset: const Offset(0, 2),
), ),
borderRadius: BorderRadius.circular(16), ],
border: Border.all( ),
color: AppColor.white.withOpacity(0.3), child: Row(
width: 1, mainAxisSize: MainAxisSize.min,
), children: [
boxShadow: [ Transform.scale(
BoxShadow( scale: _breathAnimation.value * 0.1 + 1.0,
color: AppColor.white.withOpacity(0.1), child: Icon(
blurRadius: 4 + (_pulseAnimation.value * 2),
offset: const Offset(0, 2),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.trending_up_rounded, Icons.trending_up_rounded,
color: AppColor.white, color: AppColor.white,
size: 14, size: 14,
), ),
const SizedBox(width: 6), ),
Text( const SizedBox(width: 6),
'${context.lang.sales_today} +25%', Text(
style: AppStyle.sm.copyWith( '${context.lang.sales_today} +25%',
color: AppColor.white, style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600, color: AppColor.white,
), fontWeight: FontWeight.w600,
letterSpacing: 0.3,
), ),
], ),
), ],
); ),
}, ),
), );
), },
); ),
}, ),
), ),
], ],
), ),