Flutter - Typing Text animation - dart

Question

For each of my text widgets, I actually want the text to type in instead of displaying it right away. Is there a simpler approach than using a variable and adding to it inside of setState() ?
Thanks

Answer 1

This might be a good use case for an AnimatedBuilder. That will allow you to more easily control the duration of the typing animation and only rebuild your widget when the length changes. Here's an example of how to do that.
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primaryColor: const Color.fromARGB(255, 0, 199, 0),
accentColor: const Color.fromARGB(255, 222, 233, 226),
brightness: Brightness.dark,
canvasColor: Colors.black,
),
home: new MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
#override
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
Animation<int> _characterCount;
int _stringIndex;
static const List<String> _kStrings = const <String>[
'Call trans opt: received. 2-19-98 13:24:18 REC:Log>',
'Trace program running.',
'[312]555-0690',
];
String get _currentString => _kStrings[_stringIndex % _kStrings.length];
#override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
TextStyle textStyle = theme.textTheme.title.copyWith(
fontFamily: 'Courier New',
color: theme.primaryColor,
);
return new Scaffold(
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.navigate_next),
onPressed: () async {
AnimationController controller = new AnimationController(
duration: const Duration(milliseconds: 4000),
vsync: this,
);
setState(() {
_stringIndex = _stringIndex == null ? 0 : _stringIndex + 1;
_characterCount = new StepTween(begin: 0, end: _currentString.length)
.animate(new CurvedAnimation(parent: controller, curve: Curves.easeIn));
});
await controller.forward();
controller.dispose();
},
),
body: new Container(
margin: new EdgeInsets.symmetric(vertical: 50.0, horizontal: 10.0),
child: _characterCount == null ? null : new AnimatedBuilder(
animation: _characterCount,
builder: (BuildContext context, Widget child) {
String text = _currentString.substring(0, _characterCount.value);
return new Text(text, style: textStyle);
},
),
),
);
}
}
If you plan to use this animated text widget a lot, you could refactor it into a separate class using AnimatedWidget.

Answer 2

you can use this Plugin
animated_text_kit:
Examples : https://github.com/aagarwal1012/Animated-Text-Kit
A piece of Code :
SizedBox(
width: 250.0,
child: 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
),
);

Answer 3

A very easiest way with custom duration, use this plugin animated_text_kit: ^4.2.1
import 'package:animated_text_kit/animated_text_kit.dart';
and the code you have to use is
SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 30.0,
fontFamily: 'popin',
),
child: AnimatedTextKit(isRepeatingAnimation: true, animatedTexts: [
TyperAnimatedText('When you talk, you are only repeating',
speed: Duration(milliseconds: 100)),
TyperAnimatedText('something you know.But if you listen,',
speed: Duration(milliseconds: 100)),
]),
),
),