Flutter: Custom Painter | PART-1
Tags: flutter, painter, dart, beginners
Published: 2020-04-23 10:30:07

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**.

```dart
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](https://api.flutter.dev/flutter/rendering/CustomPainter-class.html)** 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.

```dart
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.

![](https://dev-to-uploads.s3.amazonaws.com/i/iznsm0q3ts8xyczquq66.png)

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](https://medium.com/@sbis1999) and [Codemagic Blog](https://blog.codemagic.io/). You can follow me on [Twitter](https://twitter.com/sbis04) and find some of my projects on [GitHub](https://github.com/sbis04). Also, don’t forget to check out my [website](https://www.souvikbiswas.com). 

Thank you for reading!