Wave Animation in Flutter : Tiny Flutter Apps

We can create wave animation in flutter using the animated text kit package. As a result, the text appears on the screen as a wave. 

Although now wave animation in flutter seems so easy, yet in the past it was not so. 

In earlier days of Animation, the main artist drew the key-frames. After that, another artist created the frame-by-frame Animation.

The artist who assists the main artist, is known as the “in-betweener”. From this concept came the term tween animation in flutter. 

In this section we are not going to learn tween animation. Because we have a separate section for that, and you may check how the Tween Animation in Flutter takes place.

In short, the Animation takes place between several frames.

Therefore we need the beginning point, and the end point.

Certainly the wave animation in flutter is no exception.

Firstly, let us see how this wave animation in flutter works. After that we will discuss the code.

Although the animated text kit package has made things so easy that a beginner can use it.

Wave Animation Flutter

If we wanted to create the same wave animation in flutter from the scratch, it would take time.

Why?

Because all the Implicit Animations inherit from the ImplicitlyAnimatedWidget. 

The ImplicitlyAnimatedWidget and its subclasses automatically manage their own internal AnimationController.

Therefore we don’t have to provide external Animation.

But the animated text kit package has made things super-easy. 

To use wave animation in flutter, we need to add the dependency first 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

We have added two packages. For instance, the Google fonts package will help us to style the text.

Animation and style go side by side.

Isn’t it?

Why do we want wave animation in flutter?

Because we want to add some extra styling to the flutter app.

Right?

For the same reason, we want to make text look beautiful.

Let’s take a look at the full code.

import 'dart:ui';

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

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

  @override
  State<WavyAnimatedTextPage> createState() => _WavyAnimatedTextPageState();
}

class _WavyAnimatedTextPageState extends State<WavyAnimatedTextPage> {
  @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
                    ///
                    animatedTexts: [
                      WavyAnimatedText(
                        'Flutter',
                        textStyle: GoogleFonts.cairo(
                          color: Colors.green,
                          fontSize: 80.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      WavyAnimatedText(
                        'Is Beautiful',
                        textStyle: GoogleFonts.mandali(
                          color: Colors.amber[600],
                          fontSize: 50.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      WavyAnimatedText(
                        'Isn\'t it?',
                        textStyle: const TextStyle(
                          fontSize: 60.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.redAccent,
                        ),
                      ),
                    ],
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const ScaleAnimatedTextPage(),
                        ),
                      );
                    },
                    pause: const Duration(milliseconds: 100),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

The code explains itself.

Let’s see how it works.

The “WavyAnimatedText” class constructor passes many parameters as we have expected.

We have to pass a text to the class. But we can also add styling to the text by Google font package.

We have seen the previous animated text kit samples before.

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

The wave animation in flutter is another addition.

Do you want to test the code in your local machine? Please clone the GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter