Animation in Flutter is an integral part of “User Interface”. In other words, Animation in Flutter helps us to design an application that looks great.
Animation also gives a Flutter Application a unique look that changes with time.
However, we need to be careful. Especially when we design an animation. If the animation does not render smoothly on screen, it looks bad. In fact, badly designed Animation can break a Flutter application.
Most importantly, if we cannot use animation properly it also affects the performance of flutter app.
Why?
Because animation in Flutter involves transitions and interactive elements.
Therefore, we need to understand how we can use those components properly.
In this section, we will try to understand the fundamentals of the Animation in Flutter.
Theoretically the Animation is an Abstract Class. Other classes or objects, like Tween or Animation Controller implements the Animation.
In this section we will see how we can implement Animation in real world.
To begin with let us see what we can achieve with Animation in Flutter. After that we will take a look at the code snippets.
As we look at the above image, we can understand that the Widget has just started to change its state. As a result, there is an Animation around the Twitter symbol.
Subsequently, it will get bigger as time elapses.
When the Animation reaches the end point, it starts shrinking again.
After completing the journey, the Animation again reduces its size slowly.
We can always control the color, speed and other features of Animation with the help of Tween and Animated Controller.
How do you animate on Flutter?
Let us answer it straight. Flutter constructs an application with the help of Widget. And, that is why, it says that in Flutter everything is Widget.
There is an exception. But, in a very few cases.
Most importantly, every component in Flutter is either Stateless or Stateful widget.
However, we need multiple Widgets in the Widget tree to build one Flutter Application. Moreover, when we change the state of a Widget, the Widget rebuilds itself. Consequently the change is rendered on the Screen, or Page.
In Animation the same thing happens. The Color changes and the Widget is rebuilding. And we can rebuild by calling a Function called setState().
Let us take a look at the code snippet, which builds the Animation.
After that, we will discuss how it works.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Animated Button Demo',
),
),
body: Center(
child: AnnimatedButton(
onTap: () {},
icon: const Icon(
MdiIcons.twitter,
size: 30.0,
color: Colors.redAccent,
),
),
),
);
}
}
class AnnimatedButton extends StatefulWidget {
const AnnimatedButton({
Key? key,
required this.onTap,
required this.icon,
}) : super(key: key);
final GestureTapCallback onTap;
final Icon icon;
@override
_AnnimatedButtonState createState() => _AnnimatedButtonState();
}
class _AnnimatedButtonState extends State<AnnimatedButton>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation _animation;
@override
void initState() {
_animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
_animation = Tween(begin: 0.0, end: 12.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOut),
);
_animationController.repeat(reverse: true);
super.initState();
}
@override
Widget build(BuildContext context) {
final TextStyle headline4 = Theme.of(context).textTheme.headline4!;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Animated Button Example',
style: GoogleFonts.allura(
color: Colors.white,
textStyle: headline4,
),
),
InkWell(
borderRadius: BorderRadius.circular(400),
onTap: widget.onTap,
child: AnimatedBuilder(
animation: _animation,
builder: (context, _) {
return Ink(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
for (int i = 1; i <= 8; i++)
BoxShadow(
color: Colors.black38
.withOpacity(_animationController.value / 2),
spreadRadius: _animation.value * i,
)
],
),
child: widget.icon,
);
},
),
),
],
);
}
}The above code clearly shows that we have defined two objects in particular.
The Tween and the Animation Controller.
The Tween object is used to create the “Animation sub-classes” that converts one Animation to another Animation.
The word “Tween” has been taken from the word “Between”. It means, an Animation will start and end its journey. But something may happen in between.
The above images show the same concept that we are talking about.
As a result the Tween object first implements the Animation abstract class and after that it cooks up many things in between.
The Tween object uses many features. The Color, the Alignment and many more.
How do you control the Animation in Flutter?
To control the Animation in flutter, we need the Animation Controller.
With the help of Animation Controller we can control the Animation.
However, the Animation Controller works at tandem with the Tween. So that the controller can return a new value from the Tween.
_animation = Tween(begin: 0.0, end: 12.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeOut),
);
...The above code shows us how the Tween object uses its “parent” parameter to use the Animation Controller.
Consequently, the Animation Controller drives the Animation.
Therefore we have learned one key concept of the Animation in Flutter. Every Animation needs two Objects. The Tween and the Animation Controller as its “Parent”.
After that the Animation Controller takes the charge and progresses the Animation.
For full code, please visit the respective GitHub repository.
Leave a Reply