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

484
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,72 +14,101 @@ 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),
vsync: this,
)..repeat();
_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(
parent: _animationController,
curve: const Interval(0.2, 0.8, curve: Curves.easeOutCubic),
),
);
_scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.7, curve: Curves.elasticOut),
),
);
_particleAnimation = Tween<double>(
begin: 0.0, begin: 0.0,
end: 20.0, // Reduced movement range end: 2 * math.pi,
).animate( ).animate(_particleController);
CurvedAnimation(
parent: _backgroundAnimationController, _waveAnimation = Tween<double>(
curve: Curves.easeInOutSine, // Smoother curve 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),
); );
_pulseAnimation = Tween<double>(begin: 0.08, end: 0.12).animate( _animationController.forward();
CurvedAnimation(
parent: _pulseAnimationController,
curve: Curves.easeInOutSine, // Smoother breathing effect
),
);
_rotationAnimation = Tween<double>(begin: 0.0, end: 2 * 3.14159).animate(
CurvedAnimation(
parent: _rotationAnimationController,
curve: Curves.linear,
),
);
} }
@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 AnimatedBuilder(
animation: Listenable.merge([
_particleController,
_waveController,
_breathController,
]),
builder: (context, child) {
return Container( return Container(
height: 280, height: 280,
decoration: BoxDecoration( decoration: BoxDecoration(
@ -101,155 +132,130 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
), ),
child: Stack( child: Stack(
children: [ children: [
// Animated decorative circles // Enhanced animated background
AnimatedBuilder( _buildAnimatedBackground(),
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(
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)), 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,15 +276,13 @@ 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(
opacity: value,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
@ -292,13 +296,20 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
color: AppColor.white.withOpacity(0.9), color: AppColor.white.withOpacity(0.9),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
letterSpacing: 0.3, letterSpacing: 0.3,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 1),
blurRadius: 2,
),
],
), ),
), ),
const SpaceHeight(2), const SpaceHeight(2),
Text( Text(
'Manager', 'Manager',
style: AppStyle.sm.copyWith( style: AppStyle.sm.copyWith(
color: AppColor.textLight, color: AppColor.white.withOpacity(0.7),
fontSize: 11, fontSize: 11,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
), ),
@ -306,16 +317,16 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
], ],
), ),
), ),
// Animated notification icon // Enhanced notification icon with breathing animation
AnimatedBuilder( AnimatedBuilder(
animation: _pulseAnimationController, animation: _breathController,
builder: (context, child) { builder: (context, child) {
return Transform.scale( return Transform.scale(
scale: 1.0 + (_pulseAnimation.value * 0.1), scale: _breathAnimation.value * 0.1 + 1.0,
child: Container( child: Container(
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2), color: AppColor.white.withOpacity(0.25),
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(14),
border: Border.all( border: Border.all(
color: AppColor.white.withOpacity(0.3), color: AppColor.white.withOpacity(0.3),
@ -323,8 +334,8 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
), ),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: AppColor.white.withOpacity(0.1), color: AppColor.white.withOpacity(0.2),
blurRadius: 8, blurRadius: 8 + (_breathAnimation.value * 2),
offset: const Offset(0, 2), offset: const Offset(0, 2),
), ),
], ],
@ -341,21 +352,18 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
], ],
), ),
), ),
); ),
},
), ),
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(
opacity: value,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -364,6 +372,13 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
style: AppStyle.lg.copyWith( style: AppStyle.lg.copyWith(
color: AppColor.white, color: AppColor.white,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 1),
blurRadius: 2,
),
],
), ),
), ),
const SpaceHeight(2), const SpaceHeight(2),
@ -373,6 +388,13 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
color: AppColor.white, color: AppColor.white,
fontWeight: FontWeight.w800, fontWeight: FontWeight.w800,
letterSpacing: -0.5, letterSpacing: -0.5,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.2),
offset: const Offset(0, 2),
blurRadius: 4,
),
],
), ),
), ),
const SpaceHeight(8), const SpaceHeight(8),
@ -389,33 +411,28 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
], ],
), ),
), ),
); ),
},
), ),
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(
offset: Offset(0, 20 * (1 - value)),
child: Opacity(
opacity: value,
child: AnimatedBuilder( child: AnimatedBuilder(
animation: _pulseAnimationController, animation: _breathController,
builder: (context, child) { builder: (context, child) {
return Container( return Transform.scale(
scale: _breathAnimation.value * 0.05 + 1.0,
child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 12, horizontal: 12,
vertical: 6, vertical: 6,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.white.withOpacity( color: AppColor.white.withOpacity(0.25),
0.2 + (_pulseAnimation.value * 0.05),
),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
border: Border.all( border: Border.all(
color: AppColor.white.withOpacity(0.3), color: AppColor.white.withOpacity(0.3),
@ -424,7 +441,7 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: AppColor.white.withOpacity(0.1), color: AppColor.white.withOpacity(0.1),
blurRadius: 4 + (_pulseAnimation.value * 2), blurRadius: 6 + (_breathAnimation.value * 2),
offset: const Offset(0, 2), offset: const Offset(0, 2),
), ),
], ],
@ -432,27 +449,30 @@ class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Icon( Transform.scale(
scale: _breathAnimation.value * 0.1 + 1.0,
child: Icon(
Icons.trending_up_rounded, Icons.trending_up_rounded,
color: AppColor.white, color: AppColor.white,
size: 14, size: 14,
), ),
),
const SizedBox(width: 6), const SizedBox(width: 6),
Text( Text(
'${context.lang.sales_today} +25%', '${context.lang.sales_today} +25%',
style: AppStyle.sm.copyWith( style: AppStyle.sm.copyWith(
color: AppColor.white, color: AppColor.white,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
letterSpacing: 0.3,
), ),
), ),
], ],
), ),
),
); );
}, },
), ),
), ),
);
},
), ),
], ],
), ),