Fade Animation Flutter : Tiny Flutter Apps series

How can we use fade animation in flutter? Please don’t mix it up with the fade transition widget where a widget fades in and out. We will use the animated text kit to make a text fade in and fades out.

We have been trying to build tiny flutter apps where we’ve been learning one trick everyday. However, you can use that trick to make one part of any complex app look interesting.

If you take an interest in learning fade transition, we have discussed that before in our animation category.

Don’t forget to check it out.

As usual, we will take a look at the screenshots first, to see how the fade animation in flutter works.

After that, we will discuss the code.

We can achieve this fade animation effect in flutter quite easily.

Firstly, all we need to do is add the dependency to the “pubspec.yaml” file.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  animated_text_kit: ^4.2.1
  google_fonts: ^2.3.2

As a result, we can import the animated text library and after that we can use the library anywhere in our flutter app.

We have seen before how we can rotate the animation. However, we have not used the “onTap” property that expects a VoidcallBack function.

Let’s supply the function and use the Navigator.push() method to reach the destination where we will use the fade animation effect.

DefaultTextStyle(
                style: GoogleFonts.laila(
                  color: Colors.redAccent,
                  fontSize: 60.0,
                  fontWeight: FontWeight.bold,
                ),
                child: AnimatedTextKit(
                  animatedTexts: [
                    RotateAnimatedText('CODING'),
                    RotateAnimatedText('DARTING'),
                    RotateAnimatedText(
                      'FLUTTERING',
                      textStyle: GoogleFonts.aladin(
                        color: Colors.amber,
                        fontSize: 60.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const FadeAnimatedTextExample(),
                      ),
                    );
                  },
                  isRepeatingAnimation: true,
                  totalRepeatCount: 10,
                ),
              ),

What is fade animation in Flutter?

The fade animation in flutter doesn’t work like the rotate animation in flutter.

Certainly the animated text kit package manages two types of animation, but in a different way.

In the above code we have seen how we can use the rotate animation and navigate to the fade animation page.

Therefore, to understand the difference, we need to check the whole code first.

After that, we’ll discuss the code. 

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';

class FadeAnimatedTextExample extends StatefulWidget {
  const FadeAnimatedTextExample({Key? key}) : super(key: key);

  @override
  State<FadeAnimatedTextExample> createState() =>
      _FadeAnimatedTextExampleState();
}

class _FadeAnimatedTextExampleState extends State<FadeAnimatedTextExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const SizedBox(
                  width: 20.0,
                  height: 100.0,
                ),
                Text(
                  'Fade: ',
                  style: GoogleFonts.adamina(
                    fontSize: 20.0,
                    color: Colors.lightBlue,
                  ),
                ),
                const SizedBox(
                  width: 20.0,
                  height: 100.0,
                ),
                AnimatedTextKit(
                  animatedTexts: [
                    FadeAnimatedText(
                      'NOW!',
                      textStyle: GoogleFonts.aclonica(
                        color: Colors.green,
                        fontSize: 60.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    FadeAnimatedText(
                      'AT ONCE!!',
                      textStyle: GoogleFonts.cairo(
                        color: Colors.red,
                        fontSize: 70.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    FadeAnimatedText(
                      'OR NEVER!!!',
                      textStyle: GoogleFonts.mandali(
                        color: Colors.yellow,
                        fontSize: 80.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                  onTap: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

What do we see?

Firstly, we see that the AnimatedTextKit class passes one parameter “animatedTexts”. Secondly, this property expects a list of FadeAnimatedText classes. 

Now we can choose our own style with the Google fonts package.

In short, it’s simpler than we thought.

Do you want to run the whole code on your own machine? Well, just clone this GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter