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 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: