Chapter 6. Pushing pixels: Flutter animations and using the canvas

This chapter covers

Using AnimatedWidget
Using the canvas and the CustomPaint class
The Paint class
Animation controllers, tweens, and tickers
SlideTransition, TweenSequence, 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 of new widgets to create custom animations, as well as look at 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:

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 of methods are in the forecast_controller. We’ll cover most of that in the next section, which covers animating the Sun class from start to finish.
The canvas—We’re going to make the cloud shape in the background from scratch, using the Canvas widget. The canvas 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 animation controller 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. Defining the CustomPainter and the Paint object

6.2.3. The CustomPainter paint method

6.3. 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. Building animations for the Clouds widget

6.3.4. TweenSequence

6.4. Reusable custom color transition widgets