Add/show widget after some time in flutter - flutter

Question

I have a word: money. I want to show every letter from that word after 2 seconds delay: First show letter m, after 2 seconds on screen should be visible: m-o, after next two seconds: m-o-n etc. I am thinking about save every letter to array: [m-, o-,n-,e-,y] and after that using Timer add Text.
Things which I don't know how achieve: how can I split this word to this array? And How add/show Text using Timer.

Answer 1

Let's follow your approach and make it happen.
To make an array from word, use split("") and it will return a list of string.
Like this
List<String> _totalChar = "money".split("");
Result
Full Widget
If you want to play it on start, put _textAnimationSetUp() inside initState(). BTW, I'm not focusing on button state. Let me know if you face any trouble with this widget.
import 'dart:async';
import 'package:flutter/material.dart';
class AnimatedText extends StatefulWidget {
AnimatedText({Key? key}) : super(key: key);
#override
_AnimatedTextState createState() => _AnimatedTextState();
}
class _AnimatedTextState extends State<AnimatedText> {
Timer? timer;
String buttonText = "play";
///* let's make list from word
List<String> _totalChar = "money".split("");
List<String> _visibleChar = [];
int currentIndex = 0;
_textAnimationSetUp() async {
timer = Timer.periodic(Duration(seconds: 2), (timer) {
setState(() {
if (currentIndex < _totalChar.length)
_visibleChar.add(
"${currentIndex > 0 ? "-" : ""}${_totalChar[currentIndex++]}");
else
timer.cancel();
});
});
}
get _textStyle => TextStyle(
fontSize: 40,
);
#override
void dispose() {
if (timer != null && timer!.isActive) timer!.cancel();
super.dispose();
}
_play() async {
setState(() {
currentIndex = 0;
_visibleChar.clear();
buttonText = "restart";
});
if (timer != null && timer!.isActive) timer!.cancel();
_textAnimationSetUp();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
//* removing everything except letter and -
_visibleChar
.toString()
.replaceAll(" ", "")
.replaceAll(",", '')
.replaceAll("[", '')
.replaceAll("]", ""),
style: _textStyle,
),
ElevatedButton(
onPressed: () {
_play();
setState(() {});
},
child: Text(buttonText),
),
],
),
),
);
}
}

Answer 2

Install :
dependencies:
animated_text: ^1.0.2
Then :
import 'package:animated_text/animated_text.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool play = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Text'),
),
body: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 300,
child: AnimatedText(
alignment: Alignment.center,
speed: Duration(milliseconds: 1000),
controller: AnimatedTextController.loop,
displayTime: Duration(milliseconds: 1000),
wordList: ['animations.', 'are.', 'easier.', 'now.'],
textStyle: TextStyle(
color: Colors.black,
fontSize: 55,
fontWeight: FontWeight.w700),
),
),
],
),
),
);
}
}

Answer 3

You can use Future delay for every letter. Something like this:
timer() async {
await Future.delayed(Duration(milliseconds: 200));
setState(() {
letterVisible = true;
});
}