Animated Text Kit Flutter - Awesome Flutter Plugins

Contents

1 Flutter Animated Text – Simple Text Animations

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 Text Kit app — **Animated Text**

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”

0 Shares

Animated Text Kit Flutter – Awesome Flutter Plugins