Animation in Flutter : Tiny Flutter Apps

Do you want to implement a variety of animations? Flutter makes it easy to implement. However, animation in flutter looks the simplest when we use the animated text kit package.

Let us try to understand what animation is first.

Right?

And after that, we will briefly take a look at how we can place different types of animations together.

Firstly, there are different types of animations we can adopt.

Which one is right for you?

If you’re a beginner, certainly the implicit animation will suit you best.

However, do you have some experience?

Then, explicit animation will make you happy.

Why?

Because you would experiment a lot with it.

Let’s take one example like a fade transition.

Can we fade the transition effect in Flutter in many ways? The answer is, yes, we can.

However, they are not similar in nature.

Why so?

It is because a few of them is Implicit Animation. And others are Explicit Animation.

To sum up, the Implicit Animation is much faster as Flutter ships them in.

On the contrary, we need to use the FadeTransition Widget with the help of other Animation Widgets. That is why we call it Explicit Animation.

Basically, the FadeTransition widget animates the Opacity of the Child Widget.

Let us take a quick look at how it works.

The Parent Red Container has the Fade Transition Widget inside.

And for that reason, the FadeTransition widget fades the Opacity of the Child Container which is Yellow.

Animation in Flutter Mixture

However, we can create the same effect in a different way.

How?

Let’s use the animated text kit package.

In addition, we can use several use cases in one place.

A first look will explain what we are going to accomplish.

First thing first. 

We need to add the dependencies.

dependencies:
  flutter:
    sdk: flutter

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

Secondly, we will import the package.

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

As we have decided to use the Google fonts package, we have also imported the package.

We have seen the previous animated text kit samples before.

To name a few they are color fill animation, flutter text effects, scale animation, cursor in animation, flutter sparkle animation, or typing animation in flutter.

Let’s use some of the above animations in one place.

As we have seen before, the package has made the animation in flutter mixture rather simple. 

Therefore let’s see the full code.

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

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

  @override
  State<AnimationMixturePage> createState() => _AnimationMixturePageState();
}

class _AnimationMixturePageState extends State<AnimationMixturePage> {
  @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,
                ),
                DefaultTextStyle(
                  style: GoogleFonts.aclonica(
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.yellow,
                  ),
                  child: AnimatedTextKit(
                    /// adding wavy animation
                    ///
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const AnimatedTextExampleApp(),
                        ),
                      );
                    },
                    animatedTexts: [
                      WavyAnimatedText(
                        'Beginning',
                        textStyle: GoogleFonts.cairo(
                          color: Colors.red,
                          fontSize: 70.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      FadeAnimatedText(
                        'Flutter',
                        textStyle: GoogleFonts.adamina(
                          fontSize: 80.0,
                          color: Colors.lightBlue,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      ScaleAnimatedText(
                        'with',
                        textStyle: GoogleFonts.mandali(
                          color: Colors.amber[600],
                          fontSize: 50.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      RotateAnimatedText(
                        'Dart',
                        textStyle: GoogleFonts.cairo(
                          color: Colors.green,
                          fontSize: 80.0,
                          fontWeight: FontWeight.bold,
                        ),
                        rotateOut: false,
                        duration: const Duration(milliseconds: 400),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

The above code explains itself. 

We’ve used four different types of animations. And we have also used the Google fonts package to add some styling.

Certainly, the animated text kit package has helped us to reduce the boilerplate.

If we had written the entire code using implicit or explicit animations it would be a tedious task.

Do you want to run every sample in your local machine?Please visit this GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter