Search packages, repositories and app categories

Package detailsv0.1.1

ripple_effect

An easy way to start a ripple effect from any widget to the entire screen on your flutter app.

30-day downloads
12
Likes
34
Pub points
40

Install package

flutter pub add ripple_effect

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The ripple_effect package provides a simple way to trigger a ripple animation from any widget across the entire screen in Flutter applications. It enhances user interaction by visually responding to taps or gestures with expanding concentric circles, mimicking the natural ripple effect seen in water. Ideal for buttons, icons, or touch targets, it adds subtle feedback without requiring complex custom animations. The package is lightweight and integrates seamlessly into existing UIs. It supports both Android and iOS platforms, ensuring consistent behavior across devices.

Use cases

  • Adding visual feedback to buttons
  • Enhancing touch interactions
  • Creating engaging app onboarding screens
  • Improving gesture responsiveness
  • Designing interactive UI elements
  • Animating tap points in games

Key features

  • Simple integration with any widget
  • Full-screen ripple propagation
  • Customizable ripple color and size
  • Smooth animation with performance optimization
  • Cross-platform compatibility
  • Minimal boilerplate code

Suitable for

  • Developers seeking quick visual feedback
  • UI designers enhancing user experience
  • Apps with high touch interaction
  • Games or interactive prototypes
  • Projects prioritizing smooth animations

Considerations

  • May impact performance on low-end devices
  • Ripple effects may not be suitable for accessibility-focused apps
  • Limited customization options beyond color and size
  • Not ideal for complex layered animations
  • Requires careful placement to avoid visual clutter
  • Best used sparingly to maintain UX clarity

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Pub Package GitHub Actions

ripple_effect

A easy way to achieve a ripple effect on you flutter app.

Usage

First you need to wrap your page/Scaffold with the RipplePage widget, the ripple efect will growth until this widget. Then wrap with the RippleEffect where the animation should begin. When the animation should begin, call the RippleEffect.start method passing you callback method(often navigate to other page).

The RipplePage and RippleEffect widgets need their GlobalKeys respectively to work.

Example

class Stateless extends StatelessWidget {
  final pageKey = RipplePage.createGlobalKey();
  final effectKey = RippleEffect.createGlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return RipplePage(
      child: Scaffold(
        body: Center(),
        floatingActionButton: RippleEffect(
          pageKey: pageKey,
          effectKey: effectKey,
          color: Colors.blue,
          child: FloatingActionButton(
            backgroundColor: Colors.blue,
            onPressed: () =>
                 RippleEffect.start(effectKey, () => toNextPage(context)),
            child: Icon(Icons.arrow_back),
          ),
        )
      ),
    );
  }
}

Categories

Dependencies

Dependency list 1 items

Source repository

Projects using this package

No data available yet.