Stick Figure Design With CustomPaint

In this post we will continue the development of HangMan game in Flutter by drawing the Stick figure design with CustomPaint. So, far we have already setup the project and played around a little with CustomPaint widget.

Drawing The Stick Figure With CustomPaint

The main ingredient of the game that we are building in Flutter is definitely the Stick Figure. We can divide the stick figure into four parts:

• head
• body
• legs
• hands

Drawing The Head

Let’s represent the head by a circle.

_drawHead(Canvas canvas, Size size, Paint paint) {
    paint.color = Colors.yellow;
    paint.style = PaintingStyle.fill;
    var nooseEnd = Offset(size.width/2, size.height/5);
    canvas.drawCircle(nooseEnd, _headHeight, paint);
  }

Drawing The Body

Similarly, we represent the body by a rectangle.

_drawBody(Canvas canvas, Size size, Paint paint) {
    paint.color = Colors.blueAccent;
    var bodyStart = Offset(size.width/2, size.height/5 + _headHeight);
    var bodyEnd = Offset(size.width/2, bodyStart.dy + (3 * _headHeight));
    paint.strokeWidth = 8.0;
    canvas.drawRect(Rect.fromCenter(
      center: Offset(size.width/2, (bodyStart.dy + bodyEnd.dy)/2),height: _headHeight * 3, width: _headHeight * 2), paint);
  }

The body starts right where the head ends.

Drawing The Legs

_drawLeg(Canvas canvas, Size size, Paint paint, Limb limb) {
    paint.color = Colors.yellowAccent;
    var bodyStart = Offset(size.width/2, size.height/5 + _headHeight);

    var dxStart = limb == Limb.left ? size.width/2 - 16 : size.width/2 + 16;
    var legStart = Offset(dxStart, bodyStart.dy + (3 * _headHeight));

    var dxEnd = limb == Limb.left ? size.width/2 - 32 : size.width/2 + 32;
    var legEnd = Offset(dxEnd, legStart.dy + (3 * _headHeight));
    paint.strokeWidth = 8.0;
    canvas.drawLine(legStart, legEnd, paint);
  }

Since there are two legs, we need to identify whether we are drawing the left or the right leg. We use the enum Limb for this purpose:

enum Limb {
  left, right
}

Drawing The Hands

Finally, we can create hands with the code below:

_drawHand(Canvas canvas, Size size, Paint paint, Limb limb) {
    var bodyStart = Offset(size.width/2, size.height/5 + _headHeight);

    var dxStart = limb == Limb.left ? size.width/2 - 16 : size.width/2 + 16;
    var handStart = Offset(dxStart, bodyStart.dy);

    var dx = limb == Limb.left ? size.width/2 - 64 : size.width/2 + 64;

    var handEnd = Offset(dx, handStart.dy + (2.5 * _headHeight));
    paint.strokeWidth = 8.0;
    canvas.drawLine(handStart, handEnd, paint);
  }

Preview Complete Stick Figure

To preview how our helper functions to create the Stick figure, we update the paint function of HangManPainter.

...
class HangManPainter extends CustomPainter {
  double _headHeight = 32.0;
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();

    paint.color = Colors.grey;
    paint.style = PaintingStyle.fill;
    
    _drawFrame(canvas, size, paint);
    _drawNoose(canvas, size, paint);

    _drawHead(canvas, size, paint);
    _drawBody(canvas, size, paint);
    _drawLeg(canvas, size, paint, Limb.left);
    _drawLeg(canvas, size, paint, Limb.right);
    _drawHand(canvas, size, paint, Limb.left);
    _drawHand(canvas, size, paint, Limb.right);
  }

  _drawNoose(Canvas canvas, Size size, Paint paint) {
...

If you run the Flutter app right now, you should see the complete Stick Figure being drawn with CustomPaint.

Next Post: Guess Word Design For HangMan Game