How to Paint in Flutter

A simple guide for learning to use the CustomPaint widget

Photo by Steve Johnson

If you haven’t seen it already, you might want to start by watching the Flutter Widget of the Week video about CustomPaint. I’ll be showing how to do many of the things in that video.

Setup

Create a new project and replace main.dart with the following code:

Notes:

• To paint in Flutter you use the CustomPaint widget. If you don’t give it a child, you should set the size. Here I made the size 300 x 300 logical pixels. (If you do give it a child widget, then CustomPaint will take its size. The painter will paint below the child widget and foregroundPainter will paint on top of the child widget.)
• The CustomPaint widget takes a CustomPainter object (note the “-er” ending) as a parameter. The CustomPainter gives you a canvas that you can paint on.
• The CustomPainter subclass overrides two methods: paint() and shouldRepaint().
• You will do your custom painting in paint(). For all of my examples below, insert…