What is Tween Animation Flutter

The term “Tween” in Animation is a short form of the term “in-between”.

When the generated images go between the key-frames this process is known as the “Tween” in Animation.

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

The artist who assists the main artist, is known as the “in-betweener”.

To understand the Tween Animation in Flutter we need to realize one key concept.

The Animation takes place between several frames.

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

It is a linear interpolation between a beginning and the ending value.

What is tween Flutter?

Tween is useful when we try to animate across a range. That is to say, we start from a beginning point and end the animation at somewhere.

Imagine a Text Button that was not on the screen. However, slowly it appears and takes a final shape.

For example, the Flutter Tween Animation starts like the following.

We can see that the Text Button appears from point 0.

Meanwhile, let us take a look at the code snippet. We have used the TweenAnimationBuilder Widget.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: TweenAnimationExample(),
        ),
      ),
    );
  }
}
/// chnaging the name
class TweenAnimationExample extends StatefulWidget {
  const TweenAnimationExample({Key? key}) : super(key: key);

  @override
  State<TweenAnimationExample> createState() => _TweenAnimationExampleState();
}

class _TweenAnimationExampleState extends State<TweenAnimationExample> {
  double endValue = 24.0;

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0, end: endValue),
      duration: const Duration(seconds: 1),
      builder: (BuildContext context, double size, Widget? child) {
        return TextButton(
          onPressed: () {
            setState(() {
              endValue = endValue == 24.0 ? 72.0 : 24.0;
            });
          },
          child: Text(
            'Tap Me',
            style: TextStyle(
              fontSize: size,
            ),
          ),
        );
      },
    );
  }
}

In the above code, the the TweenAnimationBuilder has a “tween” parameter to which we provide a tween instance.

The Tween instance has been passed to the TweenAnimationBuilder.

tween: Tween<double>(begin: 0, end: endValue),

We can notice two key points here. The TweenAnimationBuilder uses the “Type” double. And the Tween class also takes the “Type” double.

The Tween Constructor passes two double values. The “begin” and the “end”.

Subsequently, the “begin” is 0. And we have already defined the “end” value.

double endValue = 24.0;

That actually refers to the “size” of the Widget that we want to use an Animated object.

We could have also called the Tween object’s animate method. In addition, we could have passed the Animation object that we want to modify.

When the animation is completed, the Text Button looks like the follwoing.

Now we can tap it and make it bigger. As we have defined that inside the “setState()” method.

 onPressed: () {
            setState(() {
              endValue = endValue == 24.0 ? 72.0 : 24.0;
            });
          },

As a result, we get the final picture.

What is the Tween Animation Builder in Flutter?

Finally, let us try to understand how the Tween Animation Builder works.

Firstly, it is a Widget builder. Secondly, it animates a property of another Widget to the “end” value. In our example, the Tween Animation Builder animates one Text Button Widget. As the target value changes, the Text Button gets bigger.

The “Type” of the provided Tween plays an important role. In our code, we have used the Tween<double>.

There are other “Types” as well. For instance, we could have used the Color, or the Rect.

The Tween defines the target, or the end value. In our code, the Text Button animates from the Tween.begin to Tween.end.

Moreover, we have also customized the animation by providing the duration.

duration: const Duration(seconds: 1),

As the name suggests, the TweenAnimationBuilder builds the Text Button Widget based on the current animation value.

After that the builder is called throughout the animation.

As we said earlier, every key-frame is important. The Widget builds every animation value until the Tween.end is reached.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter