Flutter - Animation Text Fade Transition
Last Updated :
28 Apr, 2025
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 time. Here we are going to take the help AnimatedOpacity widget to animate the opacity of the text widget. A sample Video is given below to get an idea about what we are going to do in this article.
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: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Define the app's theme, including the primary color
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false, // Disable the debug banner
home: FadeTextExample(),
);
}
}
Step 5: Creating FadeTextExample Class
Inside the FadeTextExample class, there are two main variables:
- opacity: It is used to control the opacity of the text, which is set to 1.0 in starting.
- text :It holds the text content, which is initially set to 'GeeksforGeeks'.
It also contains an method named as toggleOpacity, this function is used to toggle the opacity and text variables when the "Toggle Fade" button is pressed. If opacity is 1.0, it sets opacity to 0.0 and changes the text to 'Geeks Premier League 2023'. If opacity is 0.0, it sets opacity to 1.0 and changes the text back to 'GeeksforGeeks'.
Dart
class FadeTextExample extends StatefulWidget {
@override
_FadeTextExampleState createState() => _FadeTextExampleState();
}
class _FadeTextExampleState extends State<FadeTextExample> {
double opacity = 1.0;
String text = 'GeeksforGeeks';
// Method to toggle the opacity and text variables
// when the "Toggle Fade" button is pressed.
void toggleOpacity() {
setState(() {
opacity = opacity == 1.0 ? 0.0 : 1.0;
text = opacity == 1.0 ? 'GeeksforGeeks' : 'Geeks Premier League 2023';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fade Text Effect'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: opacity,
duration: Duration(seconds: 1), // Animation duration
child: Text(
text,
style: TextStyle(
fontSize: 28,
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: toggleOpacity,
child: Text('Toggle Fade'),
),
],
),
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Define the app's theme,
// including the primary color
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false, // Disable the debug banner
home: FadeTextExample(),
);
}
}
class FadeTextExample extends StatefulWidget {
@override
_FadeTextExampleState createState() => _FadeTextExampleState();
}
class _FadeTextExampleState extends State<FadeTextExample> {
double opacity = 1.0;
String text = 'GeeksforGeeks';
// Method to toggle the opacity and text variables
// when the "Toggle Fade" button is pressed.
void toggleOpacity() {
setState(() {
opacity = opacity == 1.0 ? 0.0 : 1.0;
text = opacity == 1.0 ? 'GeeksforGeeks' : 'Geeks Premier League 2023';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fade Text Effect'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: opacity,
duration: Duration(seconds: 1), // Animation duration
child: Text(
text,
style: TextStyle(
fontSize: 28,
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: toggleOpacity,
child: Text('Toggle Fade'),
),
],
),
),
);
}
}
Output:
Similar Reads
Flutter - Page Transition Animation In Flutter, we can easily animate or handle the page transitions by using the page_transition package. The page_transition package is a valuable addition to the Flutter package, offering a variety of transition effects that can elevate the app's UI. In this article, we are going to explore how to in
6 min read
Flutter - Animation in Route Transition Routes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition
3 min read
Flutter - Animate Image Rotation In Flutter, Image.assets() or Image.network() Widget is used to display images from locally or from a URL. Images can be locally stored in the program or fetched from a network and can be displayed using the Image Widget. Animations can be applied to Images via many techniques. Hence, in this articl
4 min read
Flutter - Animated Navigation By default, Flutter has no animation when navigating from one Screen to another Screen. But in this tutorial, we are going to learn how to animate the Screen Transition. Project Setup Before directly applying to your existing project, practice the code in some example projects. For this tutorial, we
4 min read
Flutter - Working with Animations Whenever building an app animation plays a vital role in designing the experience of the user. People tend to like an app that has a smooth flow and a slick design. The Flutter Package provides a variety of methods to create and use animation in our app. We will be discussing the inbuilt Flutter wid
9 min read
Flutter - Rotate Transition In Flutter, the page_transition package is used to create beautiful page transitions. It provides a wide range of effects that can be used from moving from one route to another. It is very convenient to use. In this article, we will explore the same by building a simple application.Steps to Implemen
3 min read
Flutter - Movie Tween Animation Basically in Movie Tween Animation, we define different scenes, each with its own set of tweens and then Animate them. In Flutter we can achieve this type of animation easily by using the simple_animations package. In this article, we are going to implement the movie tween animation with the help of
6 min read
Flutter - Add to Cart Animation In Building an E-commerce app, the "Add to Cart" animation is an essential part of it to attract users' attention. In this article, we will explore how to integrate the add_to_cart_animation package into the Flutter application, Here we are going to implement From installing the package to implement
6 min read
Rive animations in Flutter Rive is a very useful animation tool that can create beautiful animations and we can add these in our Application. In flutter, we can add animations by writing so many lines of code but this is not a good practice for a developer. Instead of writing lines of code to create animation, we can create o
2 min read
Flutter - Hinge Animation Animations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil
4 min read