Tween animations in Flutter

Introduction

Tween animations help you smoothly change a value over time. This makes your app feel alive and fun.

To smoothly change a color from red to blue when a button is pressed.

To move a box from left to right across the screen.

To fade text in or out gently.

To grow or shrink a shape smoothly.

To animate a number counting up or down.

Syntax

Flutter

Tween<Type>(begin: startValue, end: endValue)

Tween means 'in-between'. It creates values between start and end.

You use it with an AnimationController to control the timing.

Examples

This tween animates a double value from 0.0 to 1.0.

Flutter

Tween<double>(begin: 0.0, end: 1.0)

This tween animates a color from red to blue.

Flutter

Tween<Color?>(begin: Colors.red, end: Colors.blue)

This tween moves something horizontally by 100 pixels.

Flutter

Tween<Offset>(begin: Offset(0, 0), end: Offset(100, 0))

Sample App

This app shows a square that smoothly changes color from red to blue and back. It uses a ColorTween with an AnimationController that repeats forever.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class TweenAnimationExample extends StatefulWidget {
  const TweenAnimationExample({super.key});

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

class _TweenAnimationExampleState extends State<TweenAnimationExample> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);

    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tween Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Container(
              width: 100,
              height: 100,
              color: _colorAnimation.value,
            );
          },
        ),
      ),
    );
  }
}

Important Notes

Always dispose your AnimationController to free resources.

You can tween many types: numbers, colors, positions, and more.

Use AnimatedBuilder to rebuild widgets when the animation changes.

Summary

Tweens create smooth changes between two values.

Use them with an AnimationController to control timing.

They make your app feel smooth and alive.