You might have seen a lot of apps having highly customized designs and amazing animations. It is really time-consuming and painful to achieve that level of customization on a native Android and iOS apps.

Flutter has got your back. With the help of CustomPainter combined with the legendary Hot Reload feature of Flutter you can iterate upon your creations efficiently and fast.

In this series, I will start with the basics of painting using CustomPainter (drawing basic shapes) in the first few parts, and then I will go into the complex designs.

NOTE: The series will involve some basic concepts of mathematics (mainly Trigonometry and Coordinate Geometry).

So, let's get started.

Initial App Structure

The basic structure of the app will just consist of a Scaffold having an AppBar, and a CustomPaint widget in the body.

class MyPainter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Painter'),
      ),
      body: CustomPaint(
        painter: ShapePainter(),
        child: Container(),
      ),
    );
  }
}

CustomPaint Widget Properties

Some of the most important properties of the CustomPaint widget are:

• painter: The painter that paints before the child.
• foregroundPainter: The painter that paints after the child.
• child: The canvas will by default take the size of the child, if it is defined.
• size: If the child is not defined, then the size of the canvas should be specified.

For getting started with the basic shapes, you will just need two of these properties:

• painter
• child

In the previous code snippet, I have defined a Container as the child. As you might know, Container by default takes up the entire size of the screen when there is no child specified within it.

Intro to CustomPainter

Now, you have to define the ShapePainter widget which should extend the CustomPainter class.

• paint: This method is called whenever the object needs to be repainted.
• shouldRepaint: This method is called when a new instance of the class is provided.

class ShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return null;
  }
}

Deep dive into paint method

The paint method has two parameters:

• canvas
• size

If we have a child specified inside the CustomPaint widget, then the canvas will have the same size as that. In our case, the canvas area will take the size of the entire Container.

The Canvas Area uses a coordinate system in order to located positions and they can be connected in various fashion in order to generate different custom shapes.

By default, the origin (0, 0) is located at the top-left corner of the canvas, and with respect to it all the drawings are done as the painter starts from the origin.

Conclusion

I believe you have enjoyed this first part of the series which should have given you a good insight into the small concepts of CustomPainter and the Canvas.

From the next article onwards, we will start painting on this canvas. And trust me you will love Flutter for this.

I also write articles on Medium and Codemagic Blog. You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to check out my website.

Thank you for reading!