animated_background.dart 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import 'package:flutter/material.dart';
  2. import 'dart:math' as math;
  3. import '../../utils/colors.dart';
  4. class AnimatedBackground extends StatefulWidget {
  5. final Widget child;
  6. final bool isZenMode;
  7. const AnimatedBackground({
  8. super.key,
  9. required this.child,
  10. this.isZenMode = false,
  11. });
  12. @override
  13. State<AnimatedBackground> createState() => _AnimatedBackgroundState();
  14. }
  15. class _AnimatedBackgroundState extends State<AnimatedBackground>
  16. with TickerProviderStateMixin {
  17. late AnimationController _controller1;
  18. late AnimationController _controller2;
  19. late AnimationController _controller3;
  20. @override
  21. void initState() {
  22. super.initState();
  23. // Create multiple animation controllers for layered effects
  24. _controller1 = AnimationController(
  25. duration: const Duration(seconds: 8),
  26. vsync: this,
  27. )..repeat();
  28. _controller2 = AnimationController(
  29. duration: const Duration(seconds: 12),
  30. vsync: this,
  31. )..repeat();
  32. _controller3 = AnimationController(
  33. duration: const Duration(seconds: 15),
  34. vsync: this,
  35. )..repeat();
  36. }
  37. @override
  38. void dispose() {
  39. _controller1.dispose();
  40. _controller2.dispose();
  41. _controller3.dispose();
  42. super.dispose();
  43. }
  44. @override
  45. Widget build(BuildContext context) {
  46. return Stack(
  47. children: [
  48. // Base background
  49. Container(
  50. decoration: const BoxDecoration(
  51. gradient: LinearGradient(
  52. begin: Alignment.topLeft,
  53. end: Alignment.bottomRight,
  54. colors: [
  55. ZenColors.appBackground,
  56. Color(0xFF0A0A0A),
  57. ],
  58. ),
  59. ),
  60. ),
  61. // Animated gradient layers
  62. ...List.generate(3, (index) => _buildAnimatedLayer(index)),
  63. // Content overlay
  64. widget.child,
  65. ],
  66. );
  67. }
  68. Widget _buildAnimatedLayer(int layerIndex) {
  69. AnimationController controller;
  70. List<Color> colors;
  71. switch (layerIndex) {
  72. case 0:
  73. controller = _controller1;
  74. colors = widget.isZenMode
  75. ? [ZenColors.navyBlue.withValues(alpha: 0.3), Colors.transparent]
  76. : [ZenColors.uiElements.withValues(alpha: 0.2), Colors.transparent];
  77. break;
  78. case 1:
  79. controller = _controller2;
  80. colors = [ZenColors.red.withValues(alpha: 0.1), Colors.transparent];
  81. break;
  82. default:
  83. controller = _controller3;
  84. colors = [ZenColors.buttonBackground.withValues(alpha: 0.05), Colors.transparent];
  85. }
  86. return AnimatedBuilder(
  87. animation: controller,
  88. builder: (context, child) {
  89. return Transform.rotate(
  90. angle: controller.value * 2 * math.pi,
  91. child: Container(
  92. decoration: BoxDecoration(
  93. gradient: RadialGradient(
  94. center: Alignment(
  95. math.sin(controller.value * 2 * math.pi) * 0.5,
  96. math.cos(controller.value * 2 * math.pi) * 0.5,
  97. ),
  98. radius: 1.5 + math.sin(controller.value * math.pi) * 0.5,
  99. colors: colors,
  100. ),
  101. ),
  102. ),
  103. );
  104. },
  105. );
  106. }
  107. }