Step Two: AnimatedWidget

Back on track, time to make those bars dance.

1. SetUp Animation boiler plate in BarLoadingState

The following is very similar to the ColorTween example.This has no functionality right now.

  1. class _BarLoadingScreenState extends State<BarLoadingScreen>
  2.     with TickerProviderStateMixin {
  3.   AnimationController _controller;
  4.   Tween<double> tween;
  6.   @override
  7.   initState() {
  8.     super.initState();
  9.     _controller = new AnimationController(
  10.       duration: const Duration(milliseconds: 3000),
  11.       vsync: this,
  12.     );
  13.     tween = new Tween<double>(begin: 0.0, end: 1.00);
  14.     // Just play the animation forever.
  15.     _controller.repeat();
  16.   }
  18.   @override
  19.   dispose() {
  20.     _controller?.dispose();
  21.     super.dispose();
  22.   }
  23.   @override
  24.     Widget build(BuildContext context) {
  25.       return new Container(
  26.         child: new Center(
  27.           child: new Row(
  28.             mainAxisAlignment: MainAxisAlignment.center,
  29.             children: <Widget>[
  30.               new Bar(),
  31.               new Bar(),
  32.               new Bar(),
  33.               new Bar(),
  34.             ],
  35.           ),
  36.         ),
  37.       );
  38.     }
  39.   }

2. Add Intervals to the Animation

The main challenge of this animation is that it requires 8 separatesteps to the overall animation, controlled by one AnimationController, distributed over only 4 widgets.

There are 8 steps in this animation because each of the four bars makes a180degree pivot twice, and by the end of the animation they've all turned afull turn.

Luckily, Flutter also provides a way to make animations that only occur duringcertain times of a Tween. It's called an Interval.

You're going to have to write an Interval for each of the eight steps. Here'sthe explanation of one:

  1. class _BarLoadingScreenState extends State<BarLoadingScreen>
  2.     with TickerProviderStateMixin {
  3.   AnimationController _controller;
  4.   Tween<double> tween;
  6.   @override
  7.   initState() {
  8.     super.initState();
  9.     _controller = new AnimationController(
  10.       duration: const Duration(milliseconds: 3000),
  11.       vsync: this,
  12.     );
  13.     tween = new Tween<double>(begin: 0.0, end: 1.00);
  14.     _controller.repeat().orCancel;
  15.   }
  17.   @override
  18.   dispose() {
  19.     _controller?.dispose();
  20.     super.dispose();
  21.   }
  23.   // Animations always start with tweens, but you can reuse tweens.
  24.   Animation<double> get stepOne => tween.animate(
  25.         // For intervals, you can pass in an Animation rather than
  26.         // the controller
  27.         new CurvedAnimation(
  28.           // But pass in the controller here
  29.           parent: _controller,
  30.           // The interval is basically what point of the tween
  31.           // to start at, and what point to end at
  32.           // this tween is 0 to 1,
  33.           // so step one should only animate the first 1/8 of the tween
  34.           // which is 0 to 0.125
  35.           curve: new Interval(
  36.             0.0,
  37.             0.125,
  38.             // the style curve to pass.
  39.             curve: Curves.linear,
  40.           ),
  41.         ),
  42.       );
  43. // ...

Again, you need to write an interval for each of the 8 steps. Or, you can copyand paste from the source code.

Once you've written all 8 intervals, you're going to need the widgets thatactually animate during each of these 8 steps.

3: Use Animated Widgets

Another awesome built in Flutter feature is AnimatedWidgets. These providetwo neat things:

  • You don't have to use addListener and setState on your animations totell Flutter to rebuild. AnimatedWidgets have a different technique.
  • There are some built in classes that extend AnimatedWidget and providesome common 'transformations'.This is the entire AnimatedWidget. That I built for this animation. Don't getbogged down in the common details(like margins): I highlighted the pieces thatare important to understand.
  1. class PivotBar extends AnimatedWidget {
  2.   // Animated Widgets need to be passed an animation,
  3.   // Or in this case, multiple animations.
  4.   final List<Animation<double>> animations;
  5.   // They also need the controller.
  6.   final Animation<double> controller;
  8.   // These are properties specific to this case.
  9.   final FractionalOffset alignment;
  10.   final bool isClockwise;
  11.   final double marginLeft;
  12.   final double marginRight;
  14.   PivotBar({
  15.     Key key,
  16.     this.alignment: FractionalOffset.centerRight,
  17.     @required this.controller,
  18.     @required this.animations,
  19.     @required this.isClockwise,
  20.     this.marginLeft = 15.0,
  21.     this.marginRight = 0.0,
  22.   }) : super(key: key, listenable: controller);
  24.   // The AnimatedWidget in this case is animating a relatively unused value.
  25.   // Which is the transform value on the transform widget.
  26.   // Transforms are much like CSS transform. It accepts a variety of functions
  27.   // on it's Transform property. This specific property will rotate a widget
  28.   // around a designated point.
  29.   // The most important part to understand here is that it relies
  30.   // on the value of the animation (Interval), so it's constantly being updated
  31.   // by the AnimatedWidget
  32.   Matrix4 clockwiseHalf(animation) =>
  33.       new Matrix4.rotationZ((animation.value * math.pi * 2.0) * .5);
  34.   Matrix4 counterClockwiseHalf(animation) =>
  35.       new Matrix4.rotationZ(-(animation.value * math.pi * 2.0) * .5);
  37.   @override
  38.   Widget build(BuildContext context) {
  39.     // Tell the widget which way to rotate based on its position
  40.     var transformOne;
  41.     var transformTwo;
  42.     if (isClockwise) {
  43.       transformOne = clockwiseHalf(animations[0]);
  44.       transformTwo = clockwiseHalf(animations[1]);
  45.     } else {
  46.       transformOne = counterClockwiseHalf(animations[0]);
  47.       transformTwo = counterClockwiseHalf(animations[1]);
  48.     }
  50.     // This is the real trick. Just wrap the Bar widget in two transforms, one
  51.     // for each transformation (or Interval passed in as an Animation).
  52.     return new Transform(
  53.       transform: transformOne,
  54.       alignment: alignment,
  55.       child: new Transform(
  56.         transform: transformTwo,
  57.         alignment: alignment,
  58.         child: new Bar(marginLeft: marginLeft, marginRight: marginRight),
  59.       ),
  60.     );
  61.   }
  62. }

In order to get this all working perfectly, you'll also need to update yourBar class to respect the passed in margins.

  1. class Bar extends StatelessWidget {
  2.   final double marginLeft;
  3.   final double marginRight;
  5.   const Bar({Key key, this.marginLeft, this.marginRight}) : super(key: key);
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return new Container(
  10.       width: 35.0,
  11.       height: 15.0,
  12.       margin: new EdgeInsets.only(left: marginLeft, right: marginRight),
  13.       decoration: new BoxDecoration(
  14.         color: const Color.fromRGBO(0, 0, 255, 1.0),
  15.         borderRadius: new BorderRadius.circular(10.0),
  16.         boxShadow: [
  17.           new BoxShadow(
  18.             color: Colors.black12,
  19.             blurRadius: 8.0,
  20.             spreadRadius: 1.0,
  21.             offset: new Offset(1.0, 0.0),
  22.           ),
  23.           new BoxShadow(
  24.             color: Colors.black26,
  25.             blurRadius: 6.0,
  26.             spreadRadius: 1.5,
  27.             offset: new Offset(1.0, 0.0),
  28.           ),
  29.         ],
  30.       ),
  31.     );
  32.   }
  33. }

4: Add the Animated Widget to the _BarLoadingScreenState

Now that you have 8 intervals to your animation, and an AnimatedWidget tofeed em to, the last step is just adding the PivotBar to your build method in_BarLoadingScreenState.

  1. @override
  2.   Widget build(BuildContext context) {
  3.     return new Container(
  4.       decoration: new BoxDecoration(color: animation.value),
  5.       child: new Center(
  6.         child: new Row(
  7.           mainAxisAlignment: MainAxisAlignment.center,
  8.           children: <Widget>[
  9.             // The left most bar gets the first two animations
  10.             // because it always does a full turn.
  11.           new PivotBar(
  12.             alignment: FractionalOffset.centerLeft,
  13.             controller: _controller,
  14.             animations: [
  15.               stepOne,
  16.               stepTwo,
  17.             ],
  18.             marginRight: 0.0,
  19.             marginLeft: 0.0,
  20.             isClockwise: true,
  21.           ),
  22.           // This bar gets the third, but it only turns a half turn
  23.           // Before the next bar's turn.
  24.           new PivotBar(
  25.             controller: _controller,
  26.             animations: [
  27.               stepThree,
  28.               stepEight,
  29.             ],
  30.             marginRight: 0.0,
  31.             marginLeft: 0.0,
  32.             isClockwise: false,
  33.           ),
  34.           // Two more pivot bars
  35.           ],
  36.         ),
  37.       ),
  38.     );
  39.   }

And that's it. I ommited some of the repeated code, but you can find it here inthe source code.