DEV Community

loading...
Cover image for Flutter E Signature Pad

Flutter E Signature Pad

rrtutors profile image rrtutors Originally published at rrtutors.com ・1 min read

How to make digital signature in flutter.
To Create ESignature pad with Flutter


Flutter provides a CustomPainter widget to create canvas and draw the paths


With this CustomPainter widget we will create digital signature pad.


The CustomPainter has two methods paint() which is create the canvas and shouldRepaint() used to handle the repaint status on canvas.
The Canvas class contains methods to draw different types of shapes


canvas.drawLine();
canvas.drawCircle()
canvas.drawArc()
Enter fullscreen mode Exit fullscreen mode



To draw something on the canvas we need to pass Paint object to the canvas


Paint _linePaint = Paint()
      ..color = strokeColor//Pass color
      ..strokeWidth = strokeWidth //Pass width of Paint
      ..strokeCap = StrokeCap.round // Pass shape of the pen line
Enter fullscreen mode Exit fullscreen mode



Here we are using drawLines() method to draw signature on the canvas.
To this method we need to pass point for each coordinate of the user touch


How we will get the user touch points?


By using the GestureDetector() widget we are going to collect all user touch points and pass this points to the canvas

GestureDetector(
          onPanStart: (details) {
            // before painting, set color & strokeWidth.
            isClear = false;
            points[curFrame].color = selectedColor;
            points[curFrame].strokeWidth = strokeWidth;
          },
          onPanUpdate: (details) {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
            referenceBox.globalToLocal(details.globalPosition);
            state(() {
              points[curFrame].points.add(localPosition);
            });
          },
          onPanEnd: (details) {
            // preparing for next line painting.
            points.add(Point(selectedColor, strokeWidth, []));
            curFrame++;
          },
        )

Enter fullscreen mode Exit fullscreen mode





Read Complete Flutter ESignature Example


Discussion (0)

pic
Editor guide