Flutter makes excellent animations simple. That is the fact. What is likewise the truth of the reality is that we, as developers, are frightened to push our applications to the following level by including those minor animations that make the apps excellent rather than merely beautiful. At the point when we tune in to material design one component, we easily buddy with its miles the ripple animation. The ripple animation is incredibly gainful inside the user to the interface as they could outwardly illuminate the user that a couple of activities like catch click have happened.
In this blog post, let’s check how to create a Ripple Animation In Flutter. We will show a small demo to integrate into your flutter app.
Table of Content :
Flutter :
Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time.
To begin with, you’ll need the necessary information on Flutter, Git, and GitHub. If you are new to flutter, you can get started by reading the official documentation on flutter.dev
Flutter — Beautiful native apps in record time
Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from…flutter.dev
Code Implementation:
First, create a class that will be landing page of the module, also known as RippleAnimation class.
So, let me walk you through the code to give a better understanding of what’s happening here. As you can see, the UI we’re going to achieve so accordingly, I created a class RippleAnimation that contains the code for the UI. There are two main elements, the Custom Paint and the widget button animation.
Let’s declare the core of the App, CirclPainter class.
import 'package:flutter/material.dart';
import 'dart:math' as math show sin, pi, sqrt;
import 'package:flutter/animation.dart';
class CirclePainter extends CustomPainter {
CirclePainter(
this._animation, {
@required this.color,
}) : super(repaint: _animation);
final Color color;
final Animation<double> _animation;
void circle(Canvas canvas, Rect rect, double value) {
final double opacity = (1.0 - (value / 4.0)).clamp(0.0, 1.0);
final Color _color = color.withOpacity(opacity);
final double size = rect.width / 2;
final double area = size * size;
final double radius = math.sqrt(area * value / 4);
final Paint paint = Paint()..color = _color;
canvas.drawCircle(rect.center, radius, paint);
}
@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(CirclePainter oldDelegate) => true;
}
CirclePainter extends the class CustomPainter and we need to override its paint method to draw the graphics. To draw, from the start, we need to announce something called Paint, it typifies all the properties that are expected to draw something on the screen.
final Paint paint = Paint()..color = _color;
In this Paint, we will add color, style, stroke width, etc., and you will also add a stroke cap.
final double opacity = (1.0 - (value / 4.0)).clamp(0.0, 1.0);
final Color _color = color.withOpacity(opacity);
final double size = rect.width / 2;
final double area = size * size;
final double radius = math.sqrt(area * value / 4);
In these five lines, we calculate the directions for the center of the circle and the double opacity, It is 1.0 minus with bracket value was divided by 4. Add color with opacity. We need the center of the circles exactly in the middle. double size It is half of the width.double areaIt is size was multiply by size.double radius It is the math square of the area multiply by value divided by 4.
canvas.drawCircle(rect.center, radius, paint);
Now we just draw with the drawCircle function called on the provided canvas object, where we go in the center, the radius, and the Paint object.
@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);
}
}
In the paint method, we will add the size of the Rect from the left, top, right, and bottom. Then we will add wavein the form of circle function, where we go in the canvas, the rect, and wave with animation value.
Now, let add the animations.
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 2000),
vsync: this,
)..repeat();
}
We add the animation on the Ripple Animation screen in the initState() method. Then, we have added a AnimationController which is called at each step of the animation. We will add duration 2000 milliseconds, and we will use the Animationcontroller in the Button widget function.
Widget _button() {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(widget.size),
child: DecoratedBox(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: <Color>[
widget.color,
Color.lerp(widget.color, Colors.black, .05)
],
),
),
child: ScaleTransition(
scale: Tween(begin: 0.95, end: 1.0).animate(
CurvedAnimation(
parent: _controller,
curve: const CurveWave(),
),
),
child: Icon(Icons.speaker_phone, size: 44,)
),
),
),
);
}
In this button widget, we will use RadialGradient and add color with lerp function. In this child property, we will add ScaleTransition effect for the animation.
scale: Tween(begin: 0.95, end: 1.0).animate(
CurvedAnimation(
parent: _controller,
curve: const CurveWave(),
),
),
The following code makes a tween begin with 0.95 and ends at 1.0 for the scale property. It constructs a CurvedAnimation, determining a CurveWave() curve. See Curves for other accessible pre-characterized animation Curves.
import 'package:flutter/material.dart';
import 'dart:math' as math show sin, pi;
import 'package:flutter/animation.dart';
class CurveWave extends Curve {
const PulsateCurve();
@override
double transform(double t) {
if (t == 0 || t == 1) {
return 0.01;
}
return math.sin(t * math.pi);
}
}
CurveWave() Extends the class Curveand we will “t” transform the curve with a return value.
Code file :
https://gist.github.com/ShaiqAhmedkhan/f246cf927f2658fb1a6f71703ebcc580#file-ripple_animation-dart
You will see a full code on a GitHub, and this is a small demo example to integrate with Ripple Animation, and this below video shows how Ripple Animation will work.
Conclusion:
In the article, I have explained the basic architecture of Ripple Animation you can modify this code according to your choice, and this was a small introduction of Ripple Animation from my side and its working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Ripple Animation in Flutter in your flutter projects. This is a demo example that will integrate Ripple Animation in a flutter, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Ripple Animation Demo:
flutter-devs/flutter_ripple_animation_demo
This project is a starting point for a Flutter application. A few resources to get you started if this is your first…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
