Custom Paint in Flutter

So let's look at what we are building today

Flutter axis
class Smiley extends CustomPainter {@override  void paint(Canvas canvas, Size size) {}@override  bool shouldRepaint(CustomPainter oldDelegate) { 
return true;
}
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;
}
//     drawing face background  
canvas.drawCircle(
Offset(size.width / 2, size.height / 2), size.width / 2, _paintCircle
);
//     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);
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);
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);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store