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

The built-in widgets you’ve seen so far are all about building a structural interface with Flutter. In this chapter, we’ll explore a couple new widgets to create custom animations, as well as look at the the canvas widget. These widgets are used to tell Flutter exactly what we want it to paint on the screen. In particular, we’ll look at two things:

  1. Animations. In the weather app, almost every display widget on the screen will animate in some way. All the text will change color, all the background objects will change color and move around the screen, and the icons will change shape and color. The most interesting note here is that the app will still be buttery smooth, despite changing entirely with almost every interaction from a user.
    The bulk of the logic needed to build these animations is in the forecast_page, and a couple methods are in the forecast_controller. We’ll cover most of that in the next section. That section is going to be about animating the Sun class, from start to finish.
  2. The canvas. I’m going to make that cloud shape in the background from scratch, using the Canvas. The canvas is a widget that allows you to tell Flutter what to draw, pixel by pixel. It requires math, and it’s fun.

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  The shapes used to make up the clouds

6.2.2  Define the CustomPainter and Paint object

6.2.3  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