How to scale an animation in flutter? Let’s try to understand it first. When an animation has a lower bound and upper bound we can scale it.
The animation reduces or increases in size according to a common scale.
In short the scale animation starts small, but gets bigger. Meanwhile, at the end, it disappears.
With reference to animation in flutter, we need to remember a few things.
The 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.
As a result, what do we see?
An animation also gives a Flutter Application a unique look. It might change with time.
The scale animation in flutter is no exception.
However, we need to be careful.
Why?
Because when we design an animation, it should render smoothly on screen.
Otherwise, 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 apps.
Why?
Because animation in Flutter involves transitions and interactive elements.
In our previous sections, we have seen how the animated text kit package does the heavy lifting.
For example, we have used typing animation in flutter before.Certainly, when we animate a text in flutter, we can do it in several ways.
With the help of the animated text kit package, we have added the fade transition effect, or, we can rotate the text.
How to scale the animation in flutter
Now we’ll try to scale the animation in flutter with an example of some texts.
Let’s see some examples first so that we can get an idea.
Next we will discuss the code.
Most importantly, we can use either implicit or explicit animation to get the same effect.
But to do that we have to reinvent the wheel. On the contrary, the animated text kit package makes the scale animation much easier.
Let’s see the code.
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';
class ScaleAnimatedTextPage extends StatefulWidget {
const ScaleAnimatedTextPage({Key? key}) : super(key: key);
@override
State<ScaleAnimatedTextPage> createState() => _ScaleAnimatedTextPageState();
}
class _ScaleAnimatedTextPageState extends State<ScaleAnimatedTextPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(
width: 50.0,
height: 100.0,
),
DefaultTextStyle(
style: GoogleFonts.laila(
color: Colors.redAccent,
fontSize: 100.0,
fontWeight: FontWeight.bold,
),
child: AnimatedTextKit(
/// scale animated text - a new branch
///
animatedTexts: [
ScaleAnimatedText('Flutter'),
ScaleAnimatedText(
'Single',
textStyle: GoogleFonts.neuton(
color: Colors.yellow,
fontSize: 100.0,
fontWeight: FontWeight.bold,
),
),
ScaleAnimatedText(
'Codebase',
textStyle: GoogleFonts.alice(
color: Colors.green,
fontSize: 100.0,
fontWeight: FontWeight.bold,
),
),
],
onTap: () {},
isRepeatingAnimation: true,
totalRepeatCount: 10,
),
),
],
),
],
),
);
}
}In the above code we need the AnimatedTextKit class first.
Next, the “animatedTexts” property expects a list of “ScaleAnimatedText” classes.
As we see, the “ScaleAnimatedText” class constructor passes two arguments.
One is the string data type that we want to display. And the other is TextStyle widget where we can add some custom style.
If you want to test the code in your machine please clone the respective branch of the GitHub repository.
Leave a Reply