Simple Ripple Animation for Flutter

A lightweight, high-performance, and fully customizable Flutter package for creating smooth circular ripple waves, pulsing avatar glows, radar beacon effects, and call-ringing animations.

---

🌐 Live Interactive Playground

Explore the Live Demo to test ripples, customize parameters, and generate Flutter code in real time.

---

✨ Features

• 🌊 Smooth Concentric Ripple Waves: Configurable wave count, minimum radius, maximum radius, and custom duration.
• 🎨 Fully Customizable Aesthetics: Set any ripple color, alpha fade, delay, or repeat mode.
• ⚡ High Performance (60 / 120 FPS): Built with Flutter's native CustomPainter and AnimationController for zero lag and silky smooth frame rates.
• 🪶 Zero External Dependencies: Pure Flutter implementation that stays lightweight and fast to compile.
• 📱 Multiplatform & WASM Ready: Seamlessly runs on Android, iOS, Web (JS & WebAssembly), macOS, Windows, and Linux.
• 🧩 Plug-and-Play: Wrap around any Flutter widget (CircleAvatar, IconButton, Container, Icon, Text, etc.).
• 🧪 100% Test Coverage: Backed by a comprehensive automated test suite.

---

📸 Preview & Screenshots

Mobile (iOS & Android)

macOS & Web Desktop

---

🚀 Getting Started

1. Installation

Run this command in your Flutter project terminal:

flutter pub add simple_ripple_animation

Or add simple_ripple_animation directly to your pubspec.yaml:

dependencies:
  simple_ripple_animation: ^0.1.1

Then fetch the dependencies:

flutter pub get

2. Import

Import the package in your Dart code:

import 'package:simple_ripple_animation/simple_ripple_animation.dart';

---

💡 Usage Examples

Example 1: Basic Ripple Animation

Wrap any widget with RippleAnimation to add an immediate ripple wave effect:

import 'package:flutter/material.dart';
import 'package:simple_ripple_animation/simple_ripple_animation.dart';

class BasicRippleExample extends StatelessWidget {
  const BasicRippleExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RippleAnimation(
          color: Colors.blue,
          delay: const Duration(milliseconds: 100),
          repeat: true,
          minRadius: 50,
          ripplesCount: 4,
          duration: const Duration(milliseconds: 2000),
          child: const CircleAvatar(
            minRadius: 50,
            maxRadius: 50,
            child: Icon(Icons.person, size: 40),
          ),
        ),
      ),
    );
  }
}

---

Example 2: Pulsing Avatar with Glowing Waves

Create an eye-catching online status or profile avatar with smooth fading pulses:

RippleAnimation(
  color: Colors.deepOrange,
  delay: const Duration(milliseconds: 300),
  repeat: true,
  minRadius: 75,
  maxRadius: 140,
  ripplesCount: 6,
  duration: const Duration(milliseconds: 1800),
  child: const CircleAvatar(
    minRadius: 75,
    maxRadius: 75,
    backgroundImage: NetworkImage('https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=300&q=80'),
  ),
)

---

Example 3: Incoming Phone Call / Voice Assistant Mic Button

Simulate an active voice assistant listener or an incoming call screen:

RippleAnimation(
  color: Colors.green,
  delay: const Duration(milliseconds: 100),
  repeat: true,
  minRadius: 45,
  maxRadius: 110,
  ripplesCount: 4,
  duration: const Duration(milliseconds: 1400),
  child: Container(
    width: 90,
    height: 90,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.green,
    ),
    child: const Icon(Icons.phone_in_talk, color: Colors.white, size: 36),
  ),
)

---

Example 4: Radar / Beacon Ping

Create a radar or location ping effect by customizing wave count and radius:

RippleAnimation(
  color: Colors.cyan,
  delay: const Duration(milliseconds: 250),
  repeat: true,
  minRadius: 30,
  maxRadius: 150,
  ripplesCount: 5,
  duration: const Duration(milliseconds: 2500),
  child: Container(
    width: 60,
    height: 60,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.cyan.withValues(alpha: 0.2),
      border: Border.all(color: Colors.cyan, width: 2),
    ),
    child: const Icon(Icons.radar, color: Colors.cyan, size: 30),
  ),
)

---

⚙️ Properties & Parameters Reference

Parameter	Type	Default	Description
child	Widget	required	The center widget around which ripple waves radiate (e.g. CircleAvatar, Icon, Container).
color	Color	Colors.black	The base color of the ripple waves. Opacity automatically fades gracefully outward.
minRadius	double	60.0	The starting/inner radius of the ripple animation wave.
maxRadius	double	120.0	The outer maximum radius that the ripple expands to before disappearing.
ripplesCount	int	5	The number of simultaneous concentric waves visible in the animation.
duration	Duration	Duration(milliseconds: 2300)	The duration of one complete wave cycle.
delay	Duration	Duration.zero	Delay duration before starting the ripple animation.
repeat	bool	false	When true, loops the animation continuously (pulsing effect). When false, plays once.

---

🎯 Use Cases

• 👤 User Profiles & Avatars: Highlight online presence, VIP members, or active voice participants.
• 📞 Calling Screens: Calling, ringing, or receiving indicators for audio/video apps.
• 🎙️ Voice Assistants & Audio Recorders: Animate while listening, recording, or processing voice input.
• 📍 Maps & Geolocation: Pulsing GPS position, radar beacon, or selected point of interest.
• 🔔 Alerts & Attention Grabbers: Unread messages, notification bells, and live beacon updates.

---

🛠️ Platforms Supported

Android	iOS	Web (WASM & JS)	macOS	Windows	Linux
✅	✅	✅	✅	✅	✅

---

🤝 Contributing

Contributions, issues, and feature requests are always welcome!

1. Fork the Project on GitHub
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

---

👨‍💻 Maintainers

• Jemis Goti - Creator & Maintainer
• Furkan Arslan - Contributor

Made with ❤️ for the Flutter community. If this package helped you, don't forget to give it a ⭐ on GitHub and a 👍 on pub.dev!