Tween Animations in Flutter

30 March, 2023

Contributors

ShowwcaseHQ

@showwcasehq

Tween animations in Flutter involve transitioning between a starting and an ending value over a given period of time. They are created using the Tween class, which allows you to specify the starting and ending values and the duration of the animation.

Here's an example of a simple tween animation that animates the opacity of a widget from 0 to 1 over a duration of 1 second:

import 'package:flutter/animation.dart';

AnimationController controller;
Animation<double> animation;

@override
void initState() {
  super.initState();
  controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
  animation = Tween<double>(begin: 0, end: 1).animate(controller);
  controller.forward();
}

@override
Widget build(BuildContext context) {
  return AnimatedOpacity(
    duration: Duration(seconds: 1),
    curve: Curves.easeIn,
    opacity: animation.value,
    child: Text('Hello World'),
  );
}

In this example, the AnimationController is used to control the animation, and the Tween is used to define the range of values that the opacity will transition through over the course of the animation. The AnimatedOpacity widget is then used to display the animation, with the opacity property set to the value of the animation object.

For more information on tween animations in Flutter, you can check out the following resources:

Flutter documentation on tween animations: https://flutter.dev/docs/development/ui/animations/tween-animations
Flutter Animation Examples sample app: https://github.com/flutter/samples/tree/master/animation_examples

Tween Animations in Flutter

More Articles