In this guide, we are going to learn the concept of a tween animation in Flutter, how to create it, and we will look at examples of a tween animation. First of all, we should know what is Hero animation in a flutter.

Animations are one of the essential parts of making the UI of a mobile application feel natural and smooth to the user. Smooth transitions and interactive elements generally make an app pleasant to use. Similarly, On the other hand, badly made animations can make the app look clumsy or worse, & break the application altogether. For this reason, learning the fundamentals of animations in any framework is an essential step towards delivering a superior user experience.

Tweening stands for inbetweening. It generally required to define the start and endpoint of animation. This means the animation begins with the start value, then goes through a series of intermediate values, and finally reached the end value. Along with that, it also provides the timeline and curve, that define the time and speed of the given transition and also provides a calculation of how to transition from the start and endpoint.

Every Flutter animation needs at least two elements to be created:

  • A Tween to get generate values for the animation
  • An AnimationController as parent

Here, an AnimationController gives the progression of the animation from 0 to 1 whereas the Animation gives the actual tween value expected by the widget. Animation controllers need to be disposed of off once the navigation is complete. The AnimationController also gives us control over how the animation behaves. For example, we can repeat an animation using a controller. repeat().To understand the tween animation in Flutter, look at the image below:

We have a box with a red background initially and we need to animate it to change the color to green. Sometimes, an abrupt color change looks terrible to the user. The change has to be smooth. However, it is impossible for us to show all colors that lie between. In such cases, we create a ColorTween, which gives us all the values in between (between -> tween)  red and green so that we can display them. Simply put, a Tween gives us intermediate values between two values like colors, integers, alignments, and almost anything. 

Also read: How To Implement Rotation Transition In Flutter

Creating a Tween Animation

Let’s take a basic example of how to use a tween animation in our application.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TextScreen(),
    );
  }
}

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

  @override
  State<TextScreen> createState() => _TextScreenState();
}

class _TextScreenState extends State<TextScreen>
    with SingleTickerProviderStateMixin {
 
  late Animation<double> animation;
  late AnimationController controller;
  late Animation colorAnimation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 3), vsync: this);
    animation = Tween<double>(begin: 200, end: 300).animate(controller);
    colorAnimation =
        ColorTween(begin: Colors.red, end: Colors.green).animate(controller);
    animation.addListener(() {
      setState(() {});
    });
    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('tween Animation'),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Column(
        children: [
         
 Container(
            padding: const EdgeInsets.all(16),
            height: animation.value,
            width: animation.value,
            child: Center(
                child: Image.network(
                    "https://scontent.fktm8-1.fna.fbcdn.net/v/t39.30808-6/262951063_4473265099459320_7674897967916414703_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=reWiQX3MrJYAX8D9BI_&tn=8cvU-xCDYc34zfNx&_nc_ht=scontent.fktm8-1.fna&oh=00_AT-jym4u-RDEKdmSU_5s1i2tYW9IOW74V7IGTX5KxM4kxg&oe=61D7E1BC")),
          ),
          Container(
            margin: const EdgeInsets.all(10),
            height: animation.value,
            width: animation.value,
            color: colorAnimation.value,
          ),
        ],
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below.

Thank you for reading the guide on Tween Animation in Flutter.

Read more: Lottie Animation in Flutter.