chapter six

6 Pushing Pixels: Flutter Animations and using the Canvas

 

In this chapter:

  • Using the AnimatedWidget
  • Using the canvas and CustomPaint class
  • The Paint class
  • AnimationControllers, Tweens, and Tickers
  • TweenSequence class
  • SlideTransition and other convenience widgets

Once again, I’m going to start by gushing about Flutter. The built-in widgets you’ve used so far has shown how easy it is to build an interface with Flutter. But, as I’ve said too many times, one of the best things about Flutter is how much control it gives you if you want it. And that’s what we’re going to talk about in this chapter. Using custom animations and the canvas, we’re going to tell Flutter exactly what we want it to paint. In particular, I’ll focus on two things:

6.1  Introducing Flutter Animations

6.1.1  Tweens

6.1.2  Animation Curves

6.1.3  Ticker providers

6.1.4  AnimationController

6.1.5  AnimatedWidget

6.1.6  Implementing the AnimationController and Tween for the background

6.2  CustomPainter and the Canvas

6.2.1  Define the CustomPainter and Paint object

6.2.2  CustomPainter paint method

6.3  Animations Again: Staggered animations, TweenSequence, and built in animations

6.3.1  Creating a custom animation state class

6.3.2  Built in animation widgets: SlideTransition

6.3.3  TweenSequence

6.4  Reusable color transition custom widgets

6.5  Summary