feat: custom appbar

2025-08-16 00:39:09 +07:00
parent d334bb8f17
commit d73cd1a574
16 changed files with 207 additions and 1062 deletions
@@ -0,0 +1,189 @@
+import 'package:flutter/material.dart';
+import 'dart:math' as math;
+
+import '../../../../common/theme/theme.dart';
+import '../../../common/painter/wave_painter.dart';
+
+class CustomAppBar extends StatefulWidget {
+  final String title;
+  final bool isBack;
+  const CustomAppBar({super.key, required this.title, this.isBack = true});
+
+  @override
+  State<CustomAppBar> createState() => _CustomAppBarState();
+}
+
+class _CustomAppBarState extends State<CustomAppBar>
+    with TickerProviderStateMixin {
+  late AnimationController _particleController;
+  late AnimationController _waveController;
+  late AnimationController _breathController;
+
+  late Animation<double> _particleAnimation;
+  late Animation<double> _waveAnimation;
+  late Animation<double> _breathAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _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);
+
+    _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),
+    );
+  }
+
+  @override
+  void dispose() {
+    _particleController.dispose();
+    _waveController.dispose();
+    _breathController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FlexibleSpaceBar(
+      titlePadding: EdgeInsets.only(left: widget.isBack ? 50 : 20, bottom: 16),
+      title: Text(
+        widget.title,
+        style: AppStyle.xl.copyWith(
+          color: AppColor.textWhite,
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+      background: Container(
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            colors: AppColor.primaryGradient,
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+          ),
+        ),
+        child: AnimatedBuilder(
+          animation: Listenable.merge([
+            _particleController,
+            _waveController,
+            _breathController,
+          ]),
+          builder: (context, child) {
+            return Stack(
+              children: [
+                // Animated background elements
+                _buildAnimatedBackground(context),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAnimatedBackground(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+
+    return Stack(
+      children: [
+        // Floating particles with orbital motion
+        ...List.generate(8, (index) {
+          final double radius = 40 + (index * 15);
+          final double angle = _particleAnimation.value + (index * 0.8);
+          final double centerX = size.width * 0.7;
+          final double centerY = 60;
+
+          return Positioned(
+            left: centerX + math.cos(angle) * radius - 3,
+            top: centerY + math.sin(angle) * (radius * 0.5) - 3,
+            child: Transform.scale(
+              scale: _breathAnimation.value * 0.5,
+              child: Container(
+                width: 4 + (index % 3),
+                height: 4 + (index % 3),
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: AppColor.textWhite.withOpacity(0.6),
+                  boxShadow: [
+                    BoxShadow(
+                      color: AppColor.textWhite.withOpacity(0.3),
+                      blurRadius: 6,
+                      spreadRadius: 1,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          );
+        }),
+
+        // Wave patterns
+        Positioned.fill(
+          child: CustomPaint(
+            painter: WavePainter(
+              animation: _waveAnimation.value,
+              color: AppColor.textWhite.withOpacity(0.1),
+            ),
+          ),
+        ),
+
+        // Sparkle effects
+        ...List.generate(4, (index) {
+          return Positioned(
+            left: (index * 90.0) % size.width,
+            top: 20 + (index * 25.0),
+            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: 10 + (index % 3) * 3,
+                  color: AppColor.textWhite.withOpacity(0.4),
+                ),
+              ),
+            ),
+          );
+        }),
+
+        // Gradient overlay for depth
+        Container(
+          decoration: BoxDecoration(
+            gradient: RadialGradient(
+              center: const Alignment(0.3, -0.2),
+              radius: 1.2,
+              colors: [
+                Colors.transparent,
+                AppColor.primaryGradient.first.withOpacity(0.1),
+                Colors.transparent,
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}