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

296
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
AnimatedBuilder(
animation: Listenable.merge([
_backgroundAnimationController,
_pulseAnimationController,
]),
builder: (context, child) {
return Stack(
children: [
// Large floating circle
Positioned( Positioned(
top: -50, top: -50 + _circleAnimation.value,
right: -50, right: -50 + (_circleAnimation.value * 0.5),
child: Container( child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 150, width: 150,
height: 150, height: 150,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.1), color: AppColor.white.withOpacity(
_pulseAnimation.value,
), ),
), ),
);
},
), ),
),
// Medium floating circle
Positioned( Positioned(
top: 80, top: 80 - (_circleAnimation.value * 0.3),
right: -20, right: -20 + (_circleAnimation.value * 0.8),
child: Container( child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
width: 80, width: 80,
height: 80, height: 80,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.05), 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)),
], ],
), ),
@ -84,8 +270,16 @@ 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>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 800),
builder: (context, value, child) {
return Transform.translate(
offset: Offset(0, 20 * (1 - value)),
child: Opacity(
opacity: value,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Expanded( Expanded(
@ -112,7 +306,13 @@ class HomeHeader extends StatelessWidget {
], ],
), ),
), ),
Container( // 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), padding: const EdgeInsets.all(10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2), color: AppColor.white.withOpacity(0.2),
@ -121,6 +321,13 @@ class HomeHeader extends StatelessWidget {
color: AppColor.white.withOpacity(0.3), color: AppColor.white.withOpacity(0.3),
width: 1, width: 1,
), ),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
), ),
child: const Icon( child: const Icon(
Icons.notifications_none_rounded, Icons.notifications_none_rounded,
@ -128,12 +335,30 @@ class HomeHeader extends StatelessWidget {
size: 20, size: 20,
), ),
), ),
);
},
),
], ],
), ),
),
);
},
),
const SpaceHeight(24), const SpaceHeight(24),
// Greeting Section // Greeting Section with staggered animation
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1000),
builder: (context, value, child) {
return Transform.translate(
offset: Offset(0, 30 * (1 - value)),
child: Opacity(
opacity: value,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text( Text(
'${greeting(context)},', '${greeting(context)},',
style: AppStyle.lg.copyWith( style: AppStyle.lg.copyWith(
@ -161,19 +386,48 @@ class HomeHeader extends StatelessWidget {
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, 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),
duration: const Duration(milliseconds: 1200),
builder: (context, value, child) {
return Transform.translate(
offset: Offset(0, 20 * (1 - value)),
child: Opacity(
opacity: value,
child: AnimatedBuilder(
animation: _pulseAnimationController,
builder: (context, child) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2), color: AppColor.white.withOpacity(
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),
width: 1, width: 1,
), ),
boxShadow: [
BoxShadow(
color: AppColor.white.withOpacity(0.1),
blurRadius: 4 + (_pulseAnimation.value * 2),
offset: const Offset(0, 2),
),
],
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -193,6 +447,12 @@ class HomeHeader extends StatelessWidget {
), ),
], ],
), ),
);
},
),
),
);
},
), ),
], ],
), ),