Flutter 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
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 :
|
|
|
|
|
661 Views |
|