How to Use Tween in Flutter: Simple Animation Guide

In Flutter, a Tween defines how to interpolate between a beginning and ending value for animations. You use it with an AnimationController to animate properties smoothly over time.

Syntax

A Tween in Flutter requires a begin and end value to define the animation range. It is combined with an AnimationController to produce an Animation object that changes over time.

• begin: The start value of the animation.
• end: The end value of the animation.
• animate(controller): Connects the tween to an animation controller.

dart

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

Example

This example shows a simple animation that changes the opacity of a container from transparent to fully visible using a Tween and AnimationController.

dart

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Tween Animation Example')),
        body: Center(
          child: FadeTransition(
            opacity: _animation,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

Output

A blue square fades in from fully transparent to fully visible over 2 seconds.

Common Pitfalls

Common mistakes when using Tween include:

• Not disposing the AnimationController, which causes memory leaks.
• Using incompatible types for begin and end values.
• Forgetting to call controller.forward() to start the animation.
• Not using a TickerProvider (like SingleTickerProviderStateMixin) for the controller.

dart

/* Wrong: Missing dispose */
class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    duration: Duration(seconds: 1),
    vsync: this,
  );

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

/* Right: Dispose controller */
@override
void dispose() {
  controller.dispose();
  super.dispose();
}

Quick Reference

• Tween<T>: Defines interpolation between begin and end.
• animate(controller): Connects tween to an animation controller.
• AnimationController: Controls animation timing.
• vsync: Prevents offscreen animations from consuming resources.
• Dispose controller: Always dispose to free resources.

Key Takeaways

Use Tween to define start and end values for smooth animations.

Always connect Tween to an AnimationController with animate().

Dispose AnimationController to avoid memory leaks.

Use SingleTickerProviderStateMixin for vsync in stateful widgets.

Call controller.forward() to start the animation.