[Widget], [Text] and [Icon] animations

[ReinBentdal]

Text

• FontSize
• letterSpacing
• wordSpacing
• textShadow
• textColor

Icon

• iconSize
• iconColor

We can now animate all current widgets such as .alignment() like this:

widget
  .alignment(Alignment.center, duration: Duration(milliseconds: 200));

When the alignment changes with a state update, the widget will animate between the two states implicitly.

This works well for all method which adds a new widget to the widget tree. But for methods spesific to [Text] and [Icon] this would`nt work. For example:

Icon(Icons.icon)
  .iconColor(Colors.blue, duration: Duration(milliseconds: 200))
  .iconSize(24, duration: Duration(milliseconds: 400))

You cant animate the color and the size with different duration since its the same widget.
Therefor there needs to be a different solution if we want animations for those widgets aswell. For example:

Icon()
  .animateIcon(duration: Duration(milliseconds: 200))

or if we want to animate all widgets with the same duration there could be a method which would apply to all widgets AFTER the method (if possible)

widget
  .animate(duration: Duration(milliseconds: 200))
  .alignment(Alignment.center) // will animate
  .width(100, duration: Duration(milliseconds: 100)) // override animation duration

or

Styled.animated<Text>(widget: Text('some text'))
  .textColor(Colors.blue)
  // widgets added here will ble implicitly animated