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.