Custom Paint in Flutter

So once again we are back in our class and today we are going to have some fun with Custom Paints in Flutter, So let's grab our paintbrush and enter our class.

So let's look at what we are building today

Yes, a Smiley with some animation.

and our code looks like

Before we start we need to look for something important the coordinate axis in Flutter.

Flutter axis

The left topmost corner of our device is the (0,0) origin and the x-axis corresponds to the width of the device screen and the y-axis is the height of the device screen.

The second thing is to get Offset( x, y ) we are going to use this in our entire custom paint, offset is just a point on the screen with corresponding x and y values like any other coordinate (x,y) in our graph paper.

We are going to deal with only custom paint for animation we can refer to our previous article.

Fun Animations in Flutter

So in our parent's build method, we are providing a Container with a height and width of 300 this is important because the painter working on the canvas will use his parent's constraints to get the height and width to set up the canvas to draw on.

We have implemented the animation using Animated Builder and have assigned the child a CustomPaint which takes a painter which we are going to create now.

class Smiley extends CustomPainter {
@override  void paint(Canvas canvas, Size size) {
}
@override  bool shouldRepaint(CustomPainter oldDelegate) { 
   return true; 
 }

For our custom animation, we create a class smiley that extends CustomPainter now this class should override two important methods Paint and ShouldRepaint.

Paint is the method where the actual magic of painting a canvas happens the size of the canvas depends on the size of its parent widget which in this case is a container with a height and width of 300.

ShouldRepaint is an optimization that decides the rebuilding of painting the canvas we simply return here true.

As a general rule before hitting the canvas, we need to choose our paintbrush. And now for choosing our paintbrush we are going to use a class called Paint.

Paint _paintCircle;  // for yellow circle
Paint _paintDetails;  // for details of eyes and nose
Paint _smilePaint;   // for smile
Smiley() {   
 
// face paint   
 _paintCircle = Paint()     
 ..color = Colors.yellow     
 ..style = PaintingStyle.fill; 
   
 // eyes and nose   
 _paintDetails = Paint()     
 ..color = Colors.redAccent[700]     
 ..style = PaintingStyle.fill     
 ..strokeCap = StrokeCap.round     
 ..strokeWidth = 10;    
 // smile   
 _smilePaint = Paint()     
 ..color = Colors.redAccent[700]     
 ..style = PaintingStyle.stroke     
 ..strokeWidth = 16     
 ..strokeCap = StrokeCap.round; 
 }

here we are creating 3 paintbrushes as in the description for face for eyes and nose and a smile. We need to initialize how our paintbrush should be and their properties in the constructor.

Once we select our brushes now we are ready to paint on the canvas first let's paint the face.

//     drawing face background  
  canvas.drawCircle(       
 Offset(size.width / 2, size.height / 2), size.width / 2, _paintCircle
);

the first argument is offset which defines the center of the circle, we calculate it to be at the center of the container, the second argument is the radius of the circle and the third argument is the brush itself. This is enough to just paint the circle.

//     drawing eyes  
  
canvas.drawCircle(      
  Offset(size.width * 0.3, size.height * 0.3), 16, _paintDetails); 
canvas.drawCircle(Offset(size.width - size.width * 0.3, size.height *0.3),        16, _paintDetails);

the same process we repeat for drawing both eyes, we just replaced some offset and paintbrush.

double x = size.width / 2; 
double y = size.height / 2;
// drawing nose    
final Path _path = Path();  
  _path.moveTo(x - 10, y);  
  _path.lineTo(y, y - 20);  
  _path.lineTo(x + 10, y);  
  _path.close();  
   canvas.drawPath(_path, _paintDetails);

Here for the nose, we need to make a triangle for which we declare and initialize a Path object it is the job of this path to trace the point we declared in its attributes.

path.moveTo() this just moves the point of our paintbrush as we pull our hand from the canvas and start painting on another area of the canvas this does not paint but just shifts our brush.

path.lineTo() and path.close() the path enclosed between this gets painted.

now canvas.drawPath is the Function that executes our painting of the nose.

final smile = Path();   
 smile.moveTo(size.width * 0.7, size.height * 0.7);     smile.arcToPoint(Offset(size.width * 0.3, size.height * 0.7),        radius: Radius.circular(70));   
 canvas.drawPath(smile, _smilePaint);

At last, we need to draw the smile the only different thing here is arcToPoint() which takes the final offset till where we have to draw our arc, along with the radius which specifies the curve of our arc.

With this, we pass our path (smile) and a paintbrush to canvas.drawPath to complete our smile.

So in the end keep Smiling and keep coding.