World is a canvas…

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

Begin…

This article lays focus on the following widgets

  • Tween Animation Builder
  • ColorFiltered
  • ToggleButton
Flutter and TweenAnimationBuilder….
Flutter and TweenAnimationBuilder….

TweenAnimationBuilder…

In simple words, now you can create your own Custom Implicit Animations with Tween Animation Builder

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

What is Tween Animation Builder…?

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<double>, 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….

Flutter and TweenAnimationBuilder….
Flutter and 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 Tween Animation Builder.
  • builder : widget to build ..(In this case, only the colorFiltered Widget)

ColorFiltered Widget…

Applies a ColorFilter to its child,

ColorFiltered widget….
ColorFiltered widget….

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.

Flutter and TweenAnimationBuilder
ToggleButton…

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 toggle button
  • isSelected : list of boolean (Should be equal to the children’s widgets)
  • onPressed : Change the selection state of the items inside togglebutton

Valuable comments