Intro and Overview
on Friday, 24th of July, 2020
In this example, you're going to build a simple animation that looks like this:
While this looks like one fluid animation, this is actually 8 animation definitions. Each of the four pegs is animated twice.
What'll you learn?
- Transform widget
This 'app' will have 4 classes:
PegProgressIndicator extends StatefulWidget
_PegProgressIndicatorState extends State<PegProgressIndicator> with TickerProviderStateMixin
- This is basically the highest widget in the tree that we care about for this example.
- It will eventually hold the
- Its Basically the entire brains of the animation
Peg extends StatelessWidget
- The widget for display.
PegAnimation extends AnimatedWidget
- This is the wrapper for the bar of pegs. It's responsible for applying animations to the individual pegs.
- It gives the tweens and animations to
Transformwidgets, which is a built in widget that rotates or offsets a widget. We'll be using it to animate the peg.