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

feat: update header home

Browse Source
This commit is contained in:
efrilm 2025-08-15 23:59:07 +07:00
parent ad2681dfde
commit ebfdb7274c
1 changed files with 379 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,9 +4,78 @@ import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart'; import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart'; import '../../../components/spacer/spacer.dart';
class HomeHeader extends StatelessWidget { class HomeHeader extends StatefulWidget {
const HomeHeader({super.key}); const HomeHeader({super.key});
@override
State<HomeHeader> createState() => _HomeHeaderState();
}
class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
late AnimationController _backgroundAnimationController;
late AnimationController _pulseAnimationController;
late AnimationController _rotationAnimationController;
late Animation<double> _circleAnimation;
late Animation<double> _pulseAnimation;
late Animation<double> _rotationAnimation;
@override
void initState() {
super.initState();
// Background animation controller for floating circles
_backgroundAnimationController = AnimationController(
duration: const Duration(seconds: 15),
vsync: this,
)..repeat(reverse: true); // Add reverse for smooth back-and-forth
// Pulse animation for subtle breathing effect
_pulseAnimationController = AnimationController(
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,
)..repeat();
_circleAnimation =
Tween<double>(
begin: 0.0,
end: 20.0, // Reduced movement range
).animate(
CurvedAnimation(
parent: _backgroundAnimationController,
curve: Curves.easeInOutSine, // Smoother curve
),
);
_pulseAnimation = Tween<double>(begin: 0.08, end: 0.12).animate(
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
void dispose() {
_backgroundAnimationController.dispose();
_pulseAnimationController.dispose();
_rotationAnimationController.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
@ -32,31 +101,148 @@ class HomeHeader extends StatelessWidget {
), ),
child: Stack( child: Stack(
children: [ children: [
// Decorative circles // Animated decorative circles
Positioned( AnimatedBuilder(
top: -50, animation: Listenable.merge([
right: -50, _backgroundAnimationController,
child: Container( _pulseAnimationController,
width: 150, ]),
height: 150, builder: (context, child) {
decoration: BoxDecoration( return Stack(
shape: BoxShape.circle, children: [
color: AppColor.white.withOpacity(0.1), // 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
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,
),
),
);
},
),
),
],
);
},
), ),
Positioned(
top: 80, // Rotating subtle gradient overlay
right: -20, AnimatedBuilder(
child: Container( animation: _rotationAnimationController,
width: 80, builder: (context, child) {
height: 80, return Transform.rotate(
decoration: BoxDecoration( angle: _rotationAnimation.value,
shape: BoxShape.circle, child: Container(
color: AppColor.white.withOpacity(0.05), 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)),
], ],
), ),
@ -84,115 +270,189 @@ class HomeHeader extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
// Top bar // Top bar with subtle animation
Row( TweenAnimationBuilder<double>(
mainAxisAlignment: MainAxisAlignment.spaceBetween, tween: Tween(begin: 0.0, end: 1.0),
children: [ duration: const Duration(milliseconds: 800),
Expanded( builder: (context, value, child) {
child: Column( return Transform.translate(
crossAxisAlignment: CrossAxisAlignment.start, offset: Offset(0, 20 * (1 - value)),
children: [ child: Opacity(
Text( opacity: value,
'AppSkel POS Owner', child: Row(
style: AppStyle.lg.copyWith( mainAxisAlignment: MainAxisAlignment.spaceBetween,
color: AppColor.white.withOpacity(0.9), children: [
fontWeight: FontWeight.w600, Expanded(
letterSpacing: 0.3, child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'AppSkel POS Owner',
style: AppStyle.lg.copyWith(
color: AppColor.white.withOpacity(0.9),
fontWeight: FontWeight.w600,
letterSpacing: 0.3,
),
),
const SpaceHeight(2),
Text(
'Manager',
style: AppStyle.sm.copyWith(
color: AppColor.textLight,
fontSize: 11,
fontWeight: FontWeight.w400,
),
),
],
),
), ),
), // Animated notification icon
const SpaceHeight(2), AnimatedBuilder(
Text( animation: _pulseAnimationController,
'Manager', builder: (context, child) {
style: AppStyle.sm.copyWith( return Transform.scale(
color: AppColor.textLight, scale: 1.0 + (_pulseAnimation.value * 0.1),
fontSize: 11, child: Container(
fontWeight: FontWeight.w400, 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,
),
),
);
},
), ),
), ],
],
),
),
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,
), ),
), ),
child: const Icon( );
Icons.notifications_none_rounded, },
color: AppColor.white,
size: 20,
),
),
],
), ),
const SpaceHeight(24), const SpaceHeight(24),
// Greeting Section // Greeting Section with staggered animation
Text( TweenAnimationBuilder<double>(
'${greeting(context)},', tween: Tween(begin: 0.0, end: 1.0),
style: AppStyle.lg.copyWith( duration: const Duration(milliseconds: 1000),
color: AppColor.white, builder: (context, value, child) {
fontWeight: FontWeight.w500, return Transform.translate(
), offset: Offset(0, 30 * (1 - value)),
), child: Opacity(
const SpaceHeight(2), opacity: value,
Text( child: Column(
'Vira Vania! 👋', crossAxisAlignment: CrossAxisAlignment.start,
style: AppStyle.h4.copyWith( children: [
color: AppColor.white, Text(
fontWeight: FontWeight.w800, '${greeting(context)},',
letterSpacing: -0.5, style: AppStyle.lg.copyWith(
), color: AppColor.white,
), fontWeight: FontWeight.w500,
const SpaceHeight(8), ),
Text( ),
context.lang.home_header_desc, const SpaceHeight(2),
style: AppStyle.md.copyWith( Text(
color: AppColor.white.withOpacity(0.85), 'Vira Vania! 👋',
fontWeight: FontWeight.w400, style: AppStyle.h4.copyWith(
height: 1.3, color: AppColor.white,
), fontWeight: FontWeight.w800,
maxLines: 2, letterSpacing: -0.5,
overflow: TextOverflow.ellipsis, ),
),
const SpaceHeight(8),
Text(
context.lang.home_header_desc,
style: AppStyle.md.copyWith(
color: AppColor.white.withOpacity(0.85),
fontWeight: FontWeight.w400,
height: 1.3,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
);
},
), ),
const SpaceHeight(16), const SpaceHeight(16),
// Today's highlight // Today's highlight with delayed animation
Container( TweenAnimationBuilder<double>(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), tween: Tween(begin: 0.0, end: 1.0),
decoration: BoxDecoration( duration: const Duration(milliseconds: 1200),
color: AppColor.white.withOpacity(0.2), builder: (context, value, child) {
borderRadius: BorderRadius.circular(16), return Transform.translate(
border: Border.all( offset: Offset(0, 20 * (1 - value)),
color: AppColor.white.withOpacity(0.3), child: Opacity(
width: 1, opacity: value,
), child: AnimatedBuilder(
), animation: _pulseAnimationController,
child: Row( builder: (context, child) {
mainAxisSize: MainAxisSize.min, return Container(
children: [ padding: const EdgeInsets.symmetric(
Icon( horizontal: 12,
Icons.trending_up_rounded, vertical: 6,
color: AppColor.white, ),
size: 14, decoration: BoxDecoration(
), color: AppColor.white.withOpacity(
const SizedBox(width: 6), 0.2 + (_pulseAnimation.value * 0.05),
Text( ),
'${context.lang.sales_today} +25%', borderRadius: BorderRadius.circular(16),
style: AppStyle.sm.copyWith( border: Border.all(
color: AppColor.white, color: AppColor.white.withOpacity(0.3),
fontWeight: FontWeight.w600, width: 1,
),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.1),
blurRadius: 4 + (_pulseAnimation.value * 2),
offset: const Offset(0, 2),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.trending_up_rounded,
color: AppColor.white,
size: 14,
),
const SizedBox(width: 6),
Text(
'${context.lang.sales_today} +25%',
style: AppStyle.sm.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
],
),
);
},
), ),
), ),
], );
), },
), ),
], ],
), ),