Flutter and TweenAnimationBuilder

Flutter and TweenAnimationBuilder

What if I want to create my own animation…?Hmm…

All in one Flutter resource: https://flatteredwithflutter.com/tweenanimationbuilder-in-flutter/

Begin…

This article lays focus on the following widgets

• TweenAnimationBuilder
• ColorFiltered
• ToggleButton

TweenAnimationBuilder…

In simple words, now you can create your own Custom Implicit Animations with TweenAnimationBuilder…

Note : To use TweenAnimationBuilder, you need to have the latest stable Flutter channel (1.12.13+hotfix-5)

What is TweenAnimationBuilder…?

A widget builder that animates the property of a Widget to a target value…

TweenAnimationBuilder(
  duration: // YOUR DURATION,
  tween: // YOUR TWEEN,
  builder: (_, angle, __) {
   return child;
  },
)

• tween : tween type (e.g. ColorTween, RectTween, Tween, etc.)
• duration : Duration for which the animation needs to run
• builder : what needs to be build during the animation

Using example…

TweenAnimationBuilder(
    duration: const Duration(seconds: 5),
    tween: Tween<double>(begin: 0, end: 2 * math.pi),
    builder: (_, double angle, __) {
     return Transform.rotate(
      angle: angle,
      child: earth,
     );
    },
),

Here, we have the following properties:

• duration : 5 seconds
• tween : A tween of double, when the widget first builds, it animates from Tween.begin to Tween.end.
• builder : widget to build ..(In our case Transform, which takes the value from Tween<double>)

When to use TweenAnimationBuilder….

As Flutter team recommends , we should use TweenAnimationBuilder for the above use cases…

Performance optimization….

As per official documentation…

1. If your builder function contains a subtree that does not depend on the animation, it’s efficient to build that subtree once.
2. pass the pre-built subtree as the child parameter

Use case,

final Image sun = Image.asset('assets/images/sun.jpeg');

static final colorTween = ColorTween(begin: Colors.blue, end: Colors.orange);

///////

TweenAnimationBuilder(
  child: sun,
  duration: const Duration(seconds: 5),
  tween: colorTween,
  builder: (_, Color color, Widget child) {
    return ColorFiltered(
        colorFilter: ColorFilter.mode(color, BlendMode.modulate),
    child: child,
    );
  },
)

///////

Here, we have the following properties:

• duration : 5 seconds
• tween : A tween of color, this time a static Tween defined outside of the TweenAnimationBuilder.
• builder : widget to build ..(In this case, only the colorFiltered Widget)

ColorFiltered Widget…

Applies a ColorFilter to its child,

Use case :

ColorFiltered(
 colorFilter: ColorFilter.mode(Colors.orange, BlendMode.modulate),
 child: // YOUR CHILD,
)

Here, we have the following properties:

• colorFilter : which color you want to show, along with the BlendMode
• child : what is the child on which you want to apply this filter…

Toggle Button…

A horizontal set of toggle buttons.

List of children are laid out in a row. State of each button is controlled by isSelected.

The length of isSelected has to match the length of the children list.

final isSelected = <bool>[false, false, false];

////

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

Here, we have the following properties:

• children: no. of widgets in the toggle button
• isSelected: list of boolean (Should be equal to the children’s widgets)
• onPressed: Change the selection state of the items inside toggle button

Articles related to Flutter: