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

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

As Flutter team recommends , we should use TweenAnimationBuilder for the above use cases…
Performance optimization….
As per official documentation…
- If your builder function contains a subtree that does not depend on the animation, it’s efficient to build that subtree once.
- 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,

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