CODEWITHSUNDEEP
flutterdart
Sagar Acharya
Sagar Acharya

Reputation: 3767

Bubble ripple animation in Flutter

Bubble effect animation on tap:

Bubble effect animation on tap

How can I make this bubble effect animation using the Flutter app?

Upvotes: 4

Views: 3763

Answers (1)

Aakash Kumar
Aakash Kumar

Reputation: 1187

You can create the bubble effect similar to this using pimp_my_button package. This package is not on pub.dev so you need to install it via github.

You can install it as following

pimp_my_button:
git:
  url: git://github.com/Norbert515/pimp_my_button.git

After that you need to implement the button as following

PimpedButton(
    particle: DemoParticle(),
    pimpedWidgetBuilder: (context, controller) {
      return FloatingActionButton(onPressed: () {
          controller.forward(from: 0.0);
      },);
     },
),

You can test it and you can see you have this fireworks effect on you button.

Now to create a custom animation you have to create your own particle animation. I am attaching a simple bubble animation below you can tweak it to your need.


class MyParticle extends Particle {
  @override
  void paint(Canvas canvas, Size size, progress, seed) {
    int randomMirrorOffset = 6;
    CompositeParticle(children: [
      // Firework(),
      CircleMirror(
          numberOfParticles: 16,
          child: AnimatedPositionedParticle(
            begin: Offset(0.0, 20.0),
            end: Offset(0.0, 60.0),
            child: FadingCircle(radius: 3.0, color: Colors.pink),
          ),
          initialRotation: -pi / randomMirrorOffset),
      CircleMirror.builder(
          numberOfParticles: 16,
          particleBuilder: (index) {
            return IntervalParticle(
                child: AnimatedPositionedParticle(
                  begin: Offset(0.0, 30.0),
                  end: Offset(0.0, 50.0),
                  child: FadingCircle(radius: 3.0, color: Colors.pink),
                ),
                interval: Interval(
                  0.5,
                  1,
                ));
          },
          initialRotation: -pi / randomMirrorOffset ),
    ]).paint(canvas, size, progress, seed);
  }
}

Now replace the DemoParticle() with MyParticle() & you will have a bubble ripple effect.

To keep repeating the bubble animation, do following. Change

controller.forward(from: 0.0);

to

controller.repeat(period: Duration(seconds: 1));

Here you can change or skip the animation duration using period property.

Upvotes: 3

Related Questions