Flutter - TypeWriter Text Effect
Last Updated :
24 Apr, 2025
In this Flutter article, let's learn how to create Animated TypeWritting Effect on a flutter Text Widget. The typewriter effect is a kind of animation where the text appears to be typed out letter by letter. This is often used in games, movies, videos, or in certain apps where you want the user’s attention to focus on some text.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Inside Scaffold Widget
- Create an Appbar
- Add a Text Widget and give text style to it and align it to the center-left
- Add FloatingActionButton to it
Dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(
primarySwatch: Colors.green
),
home: const TypeWritterText(),
);
}
}
class TypeWritterText extends StatefulWidget {
const TypeWritterText({ Key? key }) : super(key: key);
@override
State<TypeWritterText> createState() => _TypeWritterTextState();
}
class _TypeWritterTextState extends State<TypeWritterText> {
@override
Widget build(BuildContext context) {
return Scaffold(
// create an Appbar
appBar: AppBar(
title: Text("GeekforGeeks"),
centerTitle: true,
),
// Add Text widget, giving it align
// property and text style
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: double.infinity,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Type Writer Text effect',
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),
),
),
),
),
// floating action button
floatingActionButton: FloatingActionButton(
onPressed: (){
},
child: const Icon(Icons.play_arrow),
),
);
}
}
Output:
Â
Step 3: Initialize 2 variables of type int and set the default value 0
Dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(
primarySwatch: Colors.green
),
home: const TypeWritterText(),
);
}
}
class TypeWritterText extends StatefulWidget {
const TypeWritterText({ Key? key }) : super(key: key);
@override
State<TypeWritterText> createState() => _TypeWritterTextState();
}
class _TypeWritterTextState extends State<TypeWritterText> {
// initializing 2 variables and
// setting it's value to 0
int _currentIndex = 0;
int _currentCharIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks"),
centerTitle: true,
),
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: double.infinity,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Type Writer Text effect',
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
},
child: const Icon(Icons.play_arrow),
),
);
}
}
Step 4: Create a list of String
Dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(primarySwatch: Colors.green),
home: const TypeWritterText(),
);
}
}
class TypeWritterText extends StatefulWidget {
const TypeWritterText({Key? key}) : super(key: key);
@override
State<TypeWritterText> createState() => _TypeWritterTextState();
}
class _TypeWritterTextState extends State<TypeWritterText> {
// initializing 2 variables
int _currentIndex = 0;
int _currentCharIndex = 0;
// creating List of String
final List<String> _strings = [
"Welcome to GeeksforGeeks",
"Get Programming Solution Here",
"And more...",
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks"),
centerTitle: true,
),
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: double.infinity,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Type Writer Text effect',
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.play_arrow),
),
);
}
}
Step 5: Create a function _typeWrittingAnimation()
Create Future delay to iterate through the function continuously by 50 milliseconds
Dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(primarySwatch: Colors.green),
home: const TypeWritterText(),
);
}
}
class TypeWritterText extends StatefulWidget {
const TypeWritterText({Key? key}) : super(key: key);
@override
State<TypeWritterText> createState() => _TypeWritterTextState();
}
class _TypeWritterTextState extends State<TypeWritterText> {
// initializing 2 variables
int _currentIndex = 0;
int _currentCharIndex = 0;
// creating List
final List<String> _strings = [
"Welcome to GeeksforGeeks",
"Get Programming Solution Here",
"And more...",
];
// creating a function and future delay for iteration
void _typeWrittingAnimation(){
if(_currentCharIndex < _strings[_currentIndex].length){
_currentCharIndex++;
}else{
_currentIndex = (_currentIndex+1)% _strings.length;
_currentCharIndex = 0;
}
setState(() {
});
Future.delayed(const Duration(milliseconds: 50),(){
_typeWrittingAnimation();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks"),
centerTitle: true,
),
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: double.infinity,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Type Writer Text effect',
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.play_arrow),
),
);
}
}
Step 6: Calling the functionÂ
Whenever the floating action button is pressed the _typeWrittingAnimation() function will be called and the text will be typed out letter by letter.
Dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(primarySwatch: Colors.green),
home: const TypeWritterText(),
);
}
}
class TypeWritterText extends StatefulWidget {
const TypeWritterText({Key? key}) : super(key: key);
@override
State<TypeWritterText> createState() => _TypeWritterTextState();
}
class _TypeWritterTextState extends State<TypeWritterText> {
// initializing 2 variables
int _currentIndex = 0;
int _currentCharIndex = 0;
// creating List
final List<String> _strings = [
"Welcome to GeeksforGeeks",
"Get Programming Solution Here",
"And more...",
];
// creating a function and future delay for iteration
void _typeWrittingAnimation(){
if(_currentCharIndex < _strings[_currentIndex].length){
_currentCharIndex++;
}else{
_currentIndex = (_currentIndex+1)% _strings.length;
_currentCharIndex = 0;
}
setState(() {
});
Future.delayed(const Duration(milliseconds: 50),(){
_typeWrittingAnimation();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks"),
centerTitle: true,
),
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: double.infinity,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Type Writer Text effect',
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
),
),
),
// whenever the floating action button is
// pressed the _typeWrittingAnimation()
// function will be called
floatingActionButton: FloatingActionButton(
onPressed: _typeWrittingAnimation,
child: const Icon(Icons.play_arrow),
),
);
}
}
Step 7: Using string in the Text widget with the help of substring
Dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(primarySwatch: Colors.green),
home: const TypeWritterText(),
);
}
}
class TypeWritterText extends StatefulWidget {
const TypeWritterText({Key? key}) : super(key: key);
@override
State<TypeWritterText> createState() => _TypeWritterTextState();
}
class _TypeWritterTextState extends State<TypeWritterText> {
// initializing 2 variables
int _currentIndex = 0;
int _currentCharIndex = 0;
// creating List
final List<String> _strings = [
"Welcome to GeeksforGeeks",
"Get Programming Solution Here",
"And more...",
];
// creating a function and future delay for iteration
void _typeWrittingAnimation() {
if (_currentCharIndex < _strings[_currentIndex].length) {
_currentCharIndex++;
} else {
_currentIndex = (_currentIndex + 1) % _strings.length;
_currentCharIndex = 0;
}
setState(() {});
Future.delayed(const Duration(milliseconds: 50), () {
_typeWrittingAnimation();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeekforGeeks"),
centerTitle: true,
),
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: double.infinity,
child: Align(
alignment: Alignment.centerLeft,
// Using string in the Text widget
// with the help of substring
child: Text(
_strings[_currentIndex].substring(0, _currentCharIndex),
style: TextStyle(
fontSize: 24,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
),
),
),
// whenever the floating action button is
// pressed the _typeWrittingAnimation()
// function will be called
floatingActionButton: FloatingActionButton(
onPressed: _typeWrittingAnimation,
child: const Icon(Icons.play_arrow),
),
);
}
}
Output:
Explanation:
- The main point here is the _typeWrittingAnimation() function.
- The function sets the state to increment the _currentCharIndex variable by 1 and calls itself after a delay of 50 milliseconds.
- When _currentCharIndex reaches the end of the string, the code resets it to 0 and sets the _currentIndex to the next string in the list.
- The text displayed in the Container is now just a portion of the full string, from the beginning up to the current character using Substring Method.
- This creates the appearance of the text being typed out letter by letter.
Similar Reads
Flutter - Ripple Effect
In Flutter, the InkWell widget is used to perform ripple animation when tapped. This effect is common for all the app components that follow the material design guideline. A ripple animation in its simplest term can be understood as a black (default) bar at the bottom of an app that displays some da
2 min read
Flutter - Inner Shadow Effect
If you want to give the inner shadow effect in your flutter application you can use the Box shadow property of the Box Decoration. A sample image is given below to get an idea about what we are going to do in this article. Â How to use? You can use the Box shadow property of the container to make the
3 min read
Flutter - Text Shadow with Example
Text Shadow is the shadow of a text that makes the text beautiful. We can make text bold, Italic, and headings but also we can give text shadow to make it beautiful. This going to be pretty simple, Follow the following simple steps to make a shadow of the text. We need to write a simple text that ha
4 min read
Flutter - Add Gradient Effect to ListTile
In Flutter, a gradient effect is a visual effect that smoothly transitions between two or more colours, creating a gradual blend or progression of colours. To add a gradient background to a ListTile in Flutter, you can wrap the ListTile with a Container or another widget that supports gradients, suc
3 min read
Flutter - RichText Widget
The RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of TextSpan objects, each of which has its own associated style that is used for that subtree. Depending on the layout constraints the text might break across multiple lines o
3 min read
Flutter - Animation Text Fade Transition
A fade text effect typically refers to a visual effect in which text gradually appears or disappears by changing its opacity over time, creating a smooth transition between visible and invisible states. In this article we are going to create a Text then we are going to add a Fading effect on it over
4 min read
Flutter - Create 3D Text
Flutter, developed by Google, has gained immense popularity among developers due to its flexibility and ease of use. With Flutter, we can create stunning user interfaces, including 3D elements. This tutorial will explore how to create 3D text in Flutter step by step using the text_3d library. A samp
5 min read
Flutter - Auto size text
An adaptive UI is an integral part of any application. As applications nowadays have to function on a wide range of devices ranging from tablets, PCs, and mobile with varying screen sizes. This is where the application needs to adjust itself according to the size of the screen irrespective of the si
3 min read
Flutter - Implement Animated TextSwitcher
TextSwitcher is specifically designed for switching between different text with animations. It's commonly used to create smooth text transitions. There is no direct widget of TextWsitcher in Flutter but we can Implement this by using AnimatedSwitcher.This widget allows us to smoothly transition betw
4 min read
Flutter - Detecting Long Press Effect
Detecting long press effects in Flutter involves the use of the GestureDetector or InkWell widget to detect the Long Press. it's common to implement long-press detection to provide users with additional functionalities or visual feedback. The long-press event is triggered when a user holds down a pa
4 min read