Contents
Flutter Animated Text – Simple Text Animations
This article is about using the Flutter Animated Text Kit plugin that can be used to create the Text Animations in Flutter. It is not required to create complex animations, however, can be easily done through a simple Flutter Animated Text plugin.
This plugin is done by this developer. Do not forget to check him out and start his repo!
Animated Text Kit – Basics of the Plugin
To start this Animated Text Kit Plugin, make sure to begin by importing this dependency in your pubspec.yaml file.
animated_text_kit: ^1.3.1
Next would be to import this following file in your main.dart file
import 'package:animated_text_kit/animated_text_kit.dart';Time to get the hands dirty! There are lot of different animations that can be done. The classes that give these animations are.
Rotate
To perform the text rotation, make use of the RotateAnimatedTextKit. Sample code is present as part of the App in the next section.
RotateAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: ["AWESOME", "OPTIMISTIC", "DIFFERENT"],
textStyle: TextStyle(fontSize: 40.0, fontFamily: "Horizon"),
textAlign: TextAlign.start,
alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)Fade
Possible through the FadeAnimatedTextKit. Sample code is present as part of the App example in the next section.
FadeAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"do IT!",
"do it RIGHT!!",
"do it RIGHT NOW!!!"
],
textStyle: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.start,
alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)Scale
Possible through the ScaleAnimatedTextKit class.
ScaleAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"Think",
"Build",
"Ship"
],
textStyle: TextStyle(
fontSize: 70.0,
fontFamily: "Canterbury"
),
textAlign: TextAlign.start,
alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)Typer
This is possible through the TyperAnimatedTextKit class.
TyperAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"It is not enough to do your best,",
"you must know what to do,",
"and then do your best",
"- W.Edwards Deming",
],
textStyle: TextStyle(
fontSize: 30.0,
fontFamily: "Bobbers"
),
textAlign: TextAlign.start,
alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)TypeWriter
To create the TypeWriter effect which is possible through the TypewriterAnimatedTextKit class.
TypewriterAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"Discipline is the best tool",
"Design first, then code",
"Do not patch bugs out, rewrite them",
"Do not test bugs out, design them out",
],
textStyle: TextStyle(
fontSize: 30.0,
fontFamily: "Agne"
),
textAlign: TextAlign.start,
alignment: AlignmentDirectional.topStart // or Alignment.topLeft
Animated TextKit – Available attributes
In this section we will see all the available attributes that are part of this plugin.
- text – Holds a list of string to actually animate as part of the individual effect.
- alignment – Takes in a AlignmentDirectional class and can hold either topStart, topLeft etc
- textStyle – Text Style is used to style the Text of the Widget that appears on the screen.
- onTap – Callback to provide with a action whenever these texts are tapped.
Animated Text Kit – Sample App
This section contains the example app to create all the AnimatedTextKit classes/widgets. Its important to understand that, these are direct class calls and are really simple to use.
Do not forget to check the final section for better understanding of how these AnimatedTextKit works.
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:animated_text_kit/animated_text_kit.dart'; void main() => runApp(AnimatedTextApp()); class AnimatedTextApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'APP', home: AnimatedTextWidget(), ); } } class AnimatedTextWidget extends StatefulWidget { AnimatedTextWidget({Key key}) : super(key: key); @override _AnimatedTextWidgetState createState() => _AnimatedTextWidgetState(); } class _AnimatedTextWidgetState extends State { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Scaffold ( appBar: AppBar(title: Text("Animated Text"),), backgroundColor: Colors.blue[400], body: Container( child: Column( children: [ Row( children: [ Spacer(), Text("Learn", style: TextStyle(fontSize:30.0),), Spacer(), RotateAnimatedTextKit( text: ["Android", "Flutter", "IOS"], textStyle: TextStyle(fontSize: 30.0, fontStyle: FontStyle.italic, color: Colors.yellow), ), Spacer(flex: 2,) ], ), Spacer(), FadeAnimatedTextKit( text: ["Web", "Web is", "Web is King"], textStyle: TextStyle(fontSize:30.0, fontStyle:FontStyle.normal, color:Colors.yellow) ), Spacer(), ScaleAnimatedTextKit( text: ["God", "Speed"], textStyle: TextStyle(fontSize:30.0, fontStyle:FontStyle.normal, color:Colors.yellow) ), Spacer(), TyperAnimatedTextKit( text: ["Betty bought some butter"], textStyle: TextStyle(fontSize:30.0, fontStyle:FontStyle.normal, color:Colors.yellow) ), Spacer(), TypewriterAnimatedTextKit( text: ["But the butter was so bitter"], textStyle: TextStyle(fontSize:30.0, fontStyle:FontStyle.normal, color:Colors.yellow) ), Spacer() ], ), ) ); } }
Animated TextKit – Conclusion
Animated TextKit is a super useful plugin to perform Flutter specific animations. Like mentioned at the start of this article, do not forget to check the developer out and start the repo!
“Learn and Be Curious”