Intro and Overview

on Friday, 24th of July, 2020

In this example, you're going to build a simple animation that looks like this:

custom animation gif

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?

  • AnimatedWidget
  • Tweens
  • AnimationController
  • Transform widget

This 'app' will have 4 classes:

  1. PegProgressIndicator extends StatefulWidget
  2. _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 AnimationController
  • Its Basically the entire brains of the animation
  1. Peg extends StatelessWidget
  • The widget for display.
  1. 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 Transform widgets, which is a built in widget that rotates or offsets a widget. We'll be using it to animate the peg.


Join thousands of Flutter developers.

Sign up for infrequent updates about Flutter and Dart.

You can get all this content and more in one place. Check out my new book Flutter in Action