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

feat: update profile home

Browse Source
This commit is contained in:
efrilm 2025-08-16 00:12:30 +07:00
parent 9b398cabb6
commit d334bb8f17
2 changed files with 363 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
lib/common/painter/wave_painter.dart Normal file
View File

@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
import 'dart:math' as math;
class WavePainter extends CustomPainter {
final double animation;
final Color color;
WavePainter({required this.animation, required this.color});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..strokeWidth = 1.5
..style = PaintingStyle.stroke;
final path = Path();
// Create simplified wave patterns (reduced from 3 to 2 waves)
for (int i = 0; i < 2; i++) {
path.reset();
final double waveHeight = 15 + (i * 8);
final double frequency = 0.015 + (i * 0.008);
final double phase = animation + (i * math.pi / 2);
path.moveTo(0, size.height * 0.4 + (i * 40));
for (double x = 0; x <= size.width; x += 8) {
final y =
size.height * 0.4 +
(i * 40) +
math.sin((x * frequency) + phase) * waveHeight;
path.lineTo(x, y);
}
canvas.drawPath(path, paint..color = color.withOpacity(0.2 - (i * 0.05)));
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

509
lib/presentation/pages/profile/widgets/header.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'dart:math' as math;
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';
@ -11,20 +13,45 @@ class ProfileHeader extends StatefulWidget {
} }
class _ProfileHeaderState extends State<ProfileHeader> class _ProfileHeaderState extends State<ProfileHeader>
with SingleTickerProviderStateMixin { with TickerProviderStateMixin {
late AnimationController _animationController; late AnimationController _animationController;
late AnimationController _particleController;
late AnimationController _waveController;
late AnimationController _breathController;
late Animation<double> _fadeInAnimation; late Animation<double> _fadeInAnimation;
late Animation<Offset> _slideAnimation; late Animation<Offset> _slideAnimation;
late Animation<double> _scaleAnimation; 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();
// Main content animations
_animationController = AnimationController( _animationController = AnimationController(
duration: const Duration(milliseconds: 1200), duration: const Duration(milliseconds: 1200),
vsync: this, vsync: this,
); );
_particleController = AnimationController(
duration: const Duration(seconds: 8),
vsync: this,
)..repeat();
_waveController = AnimationController(
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( _fadeInAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation( CurvedAnimation(
parent: _animationController, parent: _animationController,
@ -47,82 +74,179 @@ class _ProfileHeaderState extends State<ProfileHeader>
), ),
); );
_particleAnimation = Tween<double>(
begin: 0.0,
end: 2 * math.pi,
).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(); _animationController.forward();
} }
@override @override
void dispose() { void dispose() {
_animationController.dispose(); _animationController.dispose();
_particleController.dispose();
_waveController.dispose();
_breathController.dispose();
super.dispose(); super.dispose();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return AnimatedBuilder(
width: double.infinity, animation: Listenable.merge([
decoration: BoxDecoration( _particleController,
gradient: LinearGradient( _waveController,
colors: [ _breathController,
...AppColor.primaryGradient, ]),
AppColor.primaryGradient.last.withOpacity(0.8), builder: (context, child) {
], return Container(
begin: Alignment.topLeft, width: double.infinity,
end: Alignment.bottomRight, decoration: BoxDecoration(
), gradient: LinearGradient(
boxShadow: [ colors: [
BoxShadow( ...AppColor.primaryGradient,
color: AppColor.primaryGradient.first.withOpacity(0.3), AppColor.primaryGradient.last.withOpacity(0.8),
blurRadius: 20, ],
offset: const Offset(0, 10), begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
boxShadow: [
BoxShadow(
color: AppColor.primaryGradient.first.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
), ),
], child: Stack(
), alignment: Alignment.center,
child: Stack( children: [
alignment: Alignment.center, // Simplified animated background
children: [ _buildAnimatedBackground(),
// Background decoration with floating circles
...List.generate( // Main content
6, _buildMainContent(),
(index) => Positioned( ],
top: (index * 30.0) + 20, ),
right: (index * 40.0) - 50, );
child: AnimatedBuilder( },
animation: _animationController, );
builder: (context, child) { }
return Transform.rotate(
angle: _animationController.value * 2 * 3.14159 * 0.5, Widget _buildAnimatedBackground() {
child: Container( return Stack(
width: 20 + (index * 5.0), children: [
height: 20 + (index * 5.0), // Floating particles with orbital motion
decoration: BoxDecoration( ...List.generate(12, (index) {
shape: BoxShape.circle, final double radius = 80 + (index * 20);
color: AppColor.textWhite.withOpacity(0.1), final double angle = _particleAnimation.value + (index * 0.5);
), final double centerX = MediaQuery.of(context).size.width * 0.5;
final double centerY = 150;
return Positioned(
left: centerX + math.cos(angle) * radius - 6,
top: centerY + math.sin(angle) * (radius * 0.6) - 6,
child: Transform.scale(
scale: _breathAnimation.value * 0.5,
child: Container(
width: 3 + (index % 4),
height: 3 + (index % 4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.6),
boxShadow: [
BoxShadow(
color: AppColor.textWhite.withOpacity(0.3),
blurRadius: 8,
spreadRadius: 1,
), ),
); ],
}, ),
), ),
), ),
);
}),
// Wave patterns
Positioned.fill(
child: CustomPaint(
painter: WavePainter(
animation: _waveAnimation.value,
color: AppColor.textWhite.withOpacity(0.1),
),
), ),
),
// Main content // Sparkle effects
Column( ...List.generate(6, (index) {
crossAxisAlignment: CrossAxisAlignment.center, return Positioned(
mainAxisAlignment: MainAxisAlignment.center, left: (index * 80.0) % MediaQuery.of(context).size.width,
children: [ top: 50 + (index * 30.0),
const SpaceHeight(30), child: Transform.rotate(
angle: _particleAnimation.value * 2 + index,
child: Transform.scale(
scale: math.sin(_particleAnimation.value + index) * 0.5 + 1,
child: Icon(
Icons.auto_awesome,
size: 12 + (index % 3) * 4,
color: AppColor.textWhite.withOpacity(0.4),
),
),
),
);
}),
// Profile Picture with enhanced design // Gradient overlay for depth
AnimatedBuilder( Container(
animation: _scaleAnimation, decoration: BoxDecoration(
builder: (context, child) { gradient: RadialGradient(
return Transform.scale( center: const Alignment(0, -0.3),
scale: _scaleAnimation.value, radius: 1.2,
child: Stack( colors: [
alignment: Alignment.center, Colors.transparent,
children: [ AppColor.primaryGradient.first.withOpacity(0.1),
// Outer glow effect Colors.transparent,
Container( ],
),
),
),
],
);
}
Widget _buildMainContent() {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SpaceHeight(30),
// Profile Picture with simplified design
AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: Stack(
alignment: Alignment.center,
children: [
// Outer glow effect with breathing animation
AnimatedBuilder(
animation: _breathAnimation,
builder: (context, child) {
return Transform.scale(
scale: _breathAnimation.value * 0.1 + 1,
child: Container(
width: 120, width: 120,
height: 120, height: 120,
decoration: BoxDecoration( decoration: BoxDecoration(
@ -136,49 +260,54 @@ class _ProfileHeaderState extends State<ProfileHeader>
], ],
), ),
), ),
// Profile picture container );
Container( },
width: 110, ),
height: 110, // Profile picture container
decoration: BoxDecoration( Container(
shape: BoxShape.circle, width: 110,
border: Border.all( height: 110,
color: AppColor.textWhite, decoration: BoxDecoration(
width: 4, shape: BoxShape.circle,
), border: Border.all(color: AppColor.textWhite, width: 4),
gradient: LinearGradient( gradient: LinearGradient(
colors: [ colors: [
AppColor.primaryLight, AppColor.primaryLight,
AppColor.primaryLight.withOpacity(0.8), AppColor.primaryLight.withOpacity(0.8),
], ],
begin: Alignment.topLeft, begin: Alignment.topLeft,
end: Alignment.bottomRight, end: Alignment.bottomRight,
), ),
), ),
child: ClipOval( child: ClipOval(
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
colors: [ colors: [
AppColor.primaryLight, AppColor.primaryLight,
AppColor.primaryLight.withOpacity(0.7), AppColor.primaryLight.withOpacity(0.7),
], ],
begin: Alignment.topCenter, begin: Alignment.topCenter,
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
),
),
child: const Icon(
Icons.person,
size: 55,
color: AppColor.textWhite,
),
),
), ),
), ),
// Online status indicator child: const Icon(
Positioned( Icons.person,
bottom: 5, size: 55,
right: 5, color: AppColor.textWhite,
),
),
),
),
// Online status indicator with subtle pulse
Positioned(
bottom: 5,
right: 5,
child: AnimatedBuilder(
animation: _breathController,
builder: (context, child) {
return Transform.scale(
scale: _breathAnimation.value * 0.2 + 1,
child: Container( child: Container(
width: 24, width: 24,
height: 24, height: 24,
@ -189,107 +318,111 @@ class _ProfileHeaderState extends State<ProfileHeader>
color: AppColor.textWhite, color: AppColor.textWhite,
width: 3, width: 3,
), ),
boxShadow: [
BoxShadow(
color: Colors.green.withOpacity(0.6),
blurRadius: 8,
spreadRadius: 2,
),
],
), ),
), ),
), );
], },
), ),
); ),
}, ],
), ),
);
},
),
const SpaceHeight(20), const SpaceHeight(20),
// Name with animation // Name with animation
SlideTransition( SlideTransition(
position: _slideAnimation, position: _slideAnimation,
child: FadeTransition( child: FadeTransition(
opacity: _fadeInAnimation, opacity: _fadeInAnimation,
child: Column( child: Column(
children: [ children: [
Text( Text(
'John Doe', 'John Doe',
style: AppStyle.h5.copyWith( style: AppStyle.h5.copyWith(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: AppColor.textWhite, color: AppColor.textWhite,
shadows: [ shadows: [
Shadow( Shadow(
color: Colors.black.withOpacity(0.3), color: Colors.black.withOpacity(0.3),
offset: const Offset(0, 2), offset: const Offset(0, 2),
blurRadius: 4, blurRadius: 4,
),
],
),
),
const SpaceHeight(4),
Container(
height: 2,
width: 60,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.7),
borderRadius: BorderRadius.circular(1),
),
), ),
], ],
), ),
), ),
), const SpaceHeight(4),
Container(
const SpaceHeight(12), height: 2,
width: 60,
// Enhanced Role Badge decoration: BoxDecoration(
FadeTransition( color: AppColor.textWhite.withOpacity(0.7),
opacity: _fadeInAnimation, borderRadius: BorderRadius.circular(1),
child: SlideTransition(
position: _slideAnimation,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.25),
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: AppColor.textWhite.withOpacity(0.3),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.business_center,
size: 16,
color: AppColor.textWhite.withOpacity(0.9),
),
const SpaceHeight(6),
Text(
'Business Owner',
style: AppStyle.md.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
],
),
), ),
), ),
), ],
),
const SpaceHeight(30),
],
), ),
], ),
),
const SpaceHeight(12),
// Enhanced Role Badge
FadeTransition(
opacity: _fadeInAnimation,
child: SlideTransition(
position: _slideAnimation,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.25),
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: AppColor.textWhite.withOpacity(0.3),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.business_center,
size: 16,
color: AppColor.textWhite.withOpacity(0.9),
),
const SpaceHeight(6),
Text(
'Business Owner',
style: AppStyle.md.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
],
),
),
),
),
const SpaceHeight(30),
],
); );
} }
} }