-
-
Notifications
You must be signed in to change notification settings - Fork 103
Animations
Styled_widget has built-in animations for your widget, which means you don't have to deal with controllers
and such in most cases. Your entry point for animations with styled_widget is the animation
method provided for all widgets.
YourWidget()
...
.animation(Duration duration, Curve curve)
All ancestors of this method will inherit the animation. To enable the animation for an ancestor, all you have to do is enable it within its method, given it supports it.
YourWidget()
.padding(
all: onTapState ? 10 : 20,
animate: true,
)
.animate(
duration: Duration(milliseconds: 300),
curve: Curves.easeOut,
)
It is important that the animation
method is placed after the widget you want to animate. If not you will get an assertion since there is no widget to inherit the animation from.
An animated widget will inherit the animation from the closest ancestor, which means you can have multiple animations for different widgets.
YourWidget()
.padding(all: onTapState ? 10 : 20, animate: true)
.animate(
duration: Duration(milliseconds: 300),
curve: Curves.easeOut,
)
.backgroundColor(onTapState ? Colors.white : Colors.black)
.animate(
duration: Duration(milliseconds: 1000),
curve: Curves.linear,
)
The padding
and backgroundColor
will have different animations.
To animate the Text
widget with styled_widget
you need to use the Styled.text()
constructor which has the parameter animate
. Style added to the Text
widget will not animate.
Styled.text('some text', animate: true)
.bold()
.fontSize(onTapState ? 18 : 24);
Styled.icon(Icons.some_icon, animate: true)
.iconColor(onTapState ? Colors.blue : Colors.red);