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.

Text 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);

Icon animations

Styled.icon(Icons.some_icon, animate: true)
  .iconColor(onTapState ? Colors.blue : Colors.red);