A Flutter Package Provide Ripple animation Widget That Is Easy to Set Up and Customise

Simple Ripple Animation 

This package provide ripple animation widget that can be customised to meet your needs. It's easy to set up and customize, and it looks beautiful in any color you choose.


This package support following parameter and methods.


RippleAnimationwidget provide follwoing parameter to config your ripple animation effect.

Parameter defined for RippleAnimation widget:

childWidgetThis child will be placed at center of the animation.
delayDurationThis will be delay between two ripple wave.
minRadiusintMinimum radius of the ripple wave.
colorColorColor of the animation.
ripplesCountintnumber of rippleCount in the wave.
durationDurationduration of the animation
repeatboolProvide true if you want to repeat animation

Getting started 


Add dependencies to pubspec.yaml

Get the latest version in the 'Installing' tab on pub.dev

    simple_ripple_animation: <latest-version>

Run pub get.

flutter pub get

Import package.

import 'package:simple_ripple_animation/simple_ripple_animation.dart';


Wrap Widget with RippleAnimation and assign needed parameter.

            child: CircleAvatar(
              minRadius: 75,
              maxRadius: 75,
              backgroundImage: NetworkImage(Constants.avtarUrl),
            color: Colors.deepOrange,
            delay: const Duration(milliseconds: 300),
            repeat: true,
            minRadius: 75,
            ripplesCount: 6,
            duration: const Duration(milliseconds: 6 * 300),

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add simple_ripple_animation

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

  simple_ripple_animation: ^0.0.7

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:simple_ripple_animation/simple_ripple_animation.dart';


import 'package:example/demo.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());

///Main material app of the app
class MyApp extends StatelessWidget {
  ///initialize the material app
  const MyApp({super.key});

  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: const MaterialColor(0xFF091D36, <int, Color>{
            50: Color(0xFFE1E4E7),
            100: Color(0xFFB5BBC3),
            200: Color(0xFF848E9B),
            300: Color(0xFF536172),
            400: Color(0xFF2E3F54),
            500: Color(0xff091D36),
            600: Color(0xFF081A30),
            700: Color(0xFF061529),
            800: Color(0xFF051122),
            900: Color(0xFF020A16),
        home: const MyHomePage(title: 'Ripple animation demo'),

Download details:

Author: jemisgoti

Source: https://github.com/jemisgoti/simple_ripple_animation

#flutter #android #ios

A Flutter Package Provide Ripple animation Widget That Is Easy to Set Up and Customise
2.05 GEEK