🏈 Custom paint ripple animation

lib/ui/EP_15_ripple_animation/ripple_aniation.dart

@@ -0,0 +1,112 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:flutter_challenge/widget/light_app_bar.dart';
+
+class RippleAnimation extends StatefulWidget {
+  const RippleAnimation({
+    super.key,
+  });
+
+  @override
+  State<RippleAnimation> createState() => _RippleAnimationState();
+}
+
+/// For animation we need ticker mixin
+class _RippleAnimationState extends State<RippleAnimation>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  Color color = Colors.green.withOpacity(0.4);
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 2000),
+    )..repeat();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: LightAppBar(title: 'Custom ripple animation'),
+      body: Center(
+        child: CustomPaint(
+          painter: _CustomPaint(_controller, color),
+          child: SizedBox(
+            height: 300,
+            width: 300,
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(200),
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  gradient: RadialGradient(colors: [
+                    // color,
+                    // for color shade we need second color
+                    Color.lerp(color, Colors.red, 0.9)!
+                  ]),
+                ),
+                child: ScaleTransition(
+                  scale: Tween<double>(begin: 0.4, end: 1.0).animate(
+                    CurvedAnimation(
+                        parent: _controller, curve: const _CustomCurve()),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// Lets create custom curves
+
+class _CustomCurve extends Curve {
+  const _CustomCurve();
+  @override
+  double transform(double t) {
+    if (t == 0 || t == 1) {
+      return 0.9;
+    } else {
+      return sin(t * pi);
+    }
+  }
+}
+
+/// lets make a custom paint for background to animate
+
+class _CustomPaint extends CustomPainter {
+  _CustomPaint(
+    this._animation,
+    this.color,
+  ) : super(repaint: _animation);
+
+  Color color;
+  final Animation<double> _animation;
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);
+
+    for (int wave = 3; wave >= 0; wave--) {
+      circle(canvas, rect, wave + _animation.value);
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+
+  void circle(Canvas canvas, Rect rect, double value) {
+    final double opacity = (1.0 - (value / 4.0)).clamp(0.0, 1.0);
+
+    final _color = color.withOpacity(opacity);
+    final size = rect.width / 2;
+    final area = size * size;
+    final radius = sqrt(area * value / 4);
+    final Paint paint = Paint()..color = _color;
+    canvas.drawCircle(rect.center, radius, paint);
+  }
+}

lib/utils/routes.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_challenge/ui/EP_12_Sound_wave_animation/sound_wave_animation.dart';
 import 'package:flutter_challenge/ui/EP_13_color_opacity_animation/animated_scroll_appbar.dart';
 import 'package:flutter_challenge/ui/EP_13_color_opacity_animation/color_opacity_animation.dart';
+import 'package:flutter_challenge/ui/EP_15_ripple_animation/ripple_aniation.dart';
 import 'package:flutter_challenge/ui/Ep_10_chat_GPT/chat_gpt_sdk.dart';
 import 'package:flutter_challenge/ui/Ep_11_wheel_list_scroll_animation/wheel%20_scroll.dart';
 import 'package:flutter_challenge/ui/Ep_14_material_3_design/material_3_design.dart';
@@ -27,6 +28,7 @@ class Routes {
     colorOpacityAnimation: (context) => const ColorOpacityAnimation(),
     appbarAnimation: (context) => const AppBarAnimation(),
     material3: (context) => const Material3Design(),
+    rippleAnimation:(context)=>  RippleAnimation(),
   };
 
   static String animatedAlign = '/animated_align_screen';
@@ -48,4 +50,6 @@ class Routes {
   static String appbarAnimation = "/app_bar_animation";
 
   static String material3 = "/material_3";
+
+  static String rippleAnimation = "/ripple_animation";
 }

lib/utils/task_list.dart

@@ -81,10 +81,16 @@ List<DailyTask> tasks = [
     cretedAt: DateTime(2023, 05, 25),
     route: Routes.appbarAnimation,
   ),
-    DailyTask(
+  DailyTask(
     description: 'Material 3',
     title: 'Ep: 15',
     cretedAt: DateTime(2024, 01, 16),
     route: Routes.material3,
   ),
+  DailyTask(
+    description: 'Custom ripple animation',
+    title: 'Ep: 16',
+    cretedAt: DateTime(2024, 01, 30),
+    route: Routes.rippleAnimation,
+  ),
 ];