How to get Animated Text in Flutter
Published November 20, 2021Flutter is Google's portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase, and Flutter is also known for its animations so, In today's tutorial, we will see how you can get animated text in Flutter.
Let's start
Step 1: Create a new Flutter Application.
Step 2: Add this to your package's pubspec.yaml
file:
|
Step 3: AnimatedTextKit
is a Stateful Widget that produces text animations, Once Installed we will get access to various animations. Just use AnimatedTextKit instead of the Text widget where you want animated text.
for example:
|
you will get many different properties that will help you control the animations as such
pause
– the time of the pause between animation textsdisplayFullTextOnTap
– tapping the animation will rush it to completionisRepeatingAnimation
– controls whether the animation repeatsrepeatForever
– controls whether the animation repeats forevertotalRepeatCount
– number of times the animation should repeat
There are also custom callbacks such as
- onTap
- onFinished
with this, you can use many animations such as RotateAnimatedText, ScaleAnimatedText, WavyAnimatedText, TypewriterAnimatedText, ColorizeAnimatedText etc
simple example:
Container( height: 100, child: AnimatedTextKit( totalRepeatCount: 10, repeatForever: true, isRepeatingAnimation: true, animatedTexts: [ ScaleAnimatedText( 'this will Scale', textStyle: textStyle, scalingFactor: 20.0, ) ])), |
Complete Source Code for Create Animated Text in Flutter
import 'package:animated_text_kit/animated_text_kit.dart'; import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Demo(), ); } }
class Demo extends StatefulWidget { @override _DemoState createState() => _DemoState(); }
class _DemoState extends State<Demo> { TextStyle textStyle = const TextStyle( fontSize: 30.0, color: Colors.white, fontWeight: FontWeight.w900);
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 100, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'This', style: textStyle, ), const SizedBox( height: 5.0, ), AnimatedTextKit(repeatForever: true, animatedTexts: [ RotateAnimatedText( 'is Awesome', textStyle: textStyle, ), ]), ], ), ), Container( height: 100, child: AnimatedTextKit( totalRepeatCount: 10, repeatForever: true, isRepeatingAnimation: true, animatedTexts: [ ScaleAnimatedText( 'this will Scale', textStyle: textStyle, scalingFactor: 20.0, ) ])), Container( child: AnimatedTextKit( repeatForever: true, isRepeatingAnimation: true, animatedTexts: [ WavyAnimatedText('This is really Long String', textStyle: textStyle), TypewriterAnimatedText('And you are watching Video', textStyle: textStyle) ]), ), const SizedBox( height: 20, ), AnimatedTextKit( repeatForever: true, isRepeatingAnimation: true, animatedTexts: [ ColorizeAnimatedText('Subscribe to Channel', textStyle: textStyle, colors: [ Colors.red, Colors.yellow, Colors.lightBlue, Colors.pinkAccent, ]), ]) ], ), )), ); } }
|
Output:
![]() |
![]() |
Conclusion: In this way, we have learned how you can use AnimatedTextKit to create animated text in Flutter.
Article Contributed By :
|
|
|
|
1049 Views |