A Flutter plugin providing signature pad for drawing smooth signatures.

I have a code:

child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                HtmlWidget(_formatHTMLRender(html)),
                Container(
                  height: 300,
                  width: double.infinity,
                  color: Colors.white,
                  child: HandSignaturePainterView(
                    control: control,
                    type: SignatureDrawType.shape,
                    color: Colors.cyan,
                  ),
                ),
              ],
            )
          )

But I can't draw when scroll page. Please help me. Thanks

Not sure exactly how to reproduce, but I will occasionally get this error when attempting to convert to an image. As I am signing my line disappears and then I will encounter this error when saving as an image a.k.a await control.toImage().

This issue goes away if you undo the change where your line disappeared. I believe something is getting set to null along the way.

[VERBOSE-2:ui_dart_state.cc(177)] Unhandled Exception: 'dart:ui/painting.dart': Failed assertion: line 43: '<optimized out>': Offset argument contained a NaN value.
#0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
#1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
#2      _offsetIsValid (dart:ui/painting.dart:43:10)
#3      Path.arcToPoint (dart:ui/painting.dart:2051:12)
#4      CubicArc.path
package:hand_signature/src/signature_control.dart:381
#5      PathSignaturePainter.paint.<anonymous closure>.<anonymous closure>
package:hand_signature/src/signature_painter.dart:89
#6      List.forEach (dart:core-patch/growable_array.dart:313:8)
#7      PathSignaturePainter.paint.<anonymous closure>
package:hand_signature/src/signature_painter.dart:87
#8      List.forEach (dart:core-patch/growable_array.dart:313:8)
#9      PathSignaturePainter.paint
package:hand_signature/src/signature_painter.dart:86
#10     HandSignatureControl.toPicture <…>

Here is the controller setup and body of my scaffold:

HandSignatureControl

final control = HandSignatureControl(
    threshold: 0,
    smoothRatio: 0.65,
    velocityRange: 2,
  );

Body

SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Stack(
              fit: StackFit.expand,
              children: [
                HandSignaturePainterView(
                  control: control,
                  color: Colors.blue,
                  maxWidth: 7,
                  type: SignatureDrawType.shape,
                ),
                Stack(
                  alignment: Alignment.bottomLeft,
                  children: [
                    Text(
                      'X',
                      style: TextStyle(
                        fontSize: 50,
                        color: Colors.blue.withOpacity(0.7),
                        fontWeight: FontWeight.w100,
                      ),
                    ).paddingOnly(bottom: 10),
                    Divider(
                      height: 2,
                      thickness: 2,
                      color: Colors.blue.withOpacity(0.7),
                    ),
                  ],
                ).paddingOnly(bottom: 50)
              ],
            ).expanded(),
          ],
        ),
      ),

found this while looking through the lines in my controller:

Lmk if there is anything I missed. Happened on an iPhone 12 Pro running iOS 14.4. I'm on Flutter channel stable 1.22.6

• Saving only OffsetPoints as they're sufficient for reinitialization

Data Size

I have tested multiple times to check the JSON string's size. On average the SVG export is around 30 kilobytes and the JSON string is about 9 kilobytes.

Usage Example

final control = HandSignatureControl()
[Draw the signature using the UI]
final jsonMap = control.toMap
[Save the jsonMap as you want]

On the next launch:

final jsonMap  = [load the saved map]
final control = HandSignatureControl.fromMap(jsonMap)

Currently, there are only image / SVG exports but it would be nice to save and reinitialize the current state of the signature so we can edit later. I implemented this and opened a PR.

Hello,

I'm using your package and I think it's really nice. However I'm facing this little issue, where the image produced by the controller is not the same picture drawn.

Example below:

| HandSignaturePainterView | controller.toImage() | | ------------ | ------------ | | | | | | |

I inspected the toImage code and found that the path is being scaled by a PathUtil.fill() method.

While I understand the optimization of trimming whitespace, this scales the path points but not its width, resulting in a different image.

So I forked your repository and added a bool scaleToFill to disable this behavior and obtain the same image as the one shown by HandSignaturePainterView.

The bool is also set to true by default, so when omitted it keeps the old behavior, and won't result in a breaking change.

I would be awesome if you could accept this pull request and publish the updated package on pub.dev.

Hi. I know I can export the signature to svg and png, but is there a way to save the draw, then reopen and modify it?? Like for example the Samsung notes app

Thank you

Hello, I'm using this package but I have this problem below while writing a signature.

'package:hand_signature/src/utils.dart': Failed assertion: line 369 pos 12: 'lines.length > 0': is not true.
The relevant error-causing widget was HandSignaturePainterView

This is my code to show widget

Container(
  width: double.infinity,
  height: 250,
  child: HandSignaturePainterView(
    control: control,
    decoration: ... ,
    type: SignatureDrawType.line,
    width: 3,
  ),
)

And this is style of HandSignatureControl

final HandSignatureControl control = new HandSignatureControl(
    threshold: 0.01,
    smoothRatio: 0.65,
    velocityRange: 2.0,
  );

Do you have any solution?

Hello. Let me congrat with you for this work, It's a really useful package. Thank you. But I noticed two issue: 1 Is there a way to get from the control some other infos like tilt, pressure, distance (these can be retreived with PointerEvent)? 2 When you first touch the display with the pen/hand, draw a very small path, then you get off the pen/hand from the display, and keep going like this, it seems difficult for the painter to draw these minipaths with precision. I don't know how to explain, I hope you have understood. Maybe I can fix this issue be increasing the velocity property??

Hello, I am planning to add these;

• Be able to change controller properties while drawing. (width, color)
• Basic undo functionality.

Any toughts? Thanks.

Hello RomanBase,

I updated my brach as you suggested.

When the scaleToFill boolean is true (default behavior) it will behave like before. When the scaleToFill boolean is false, it will use the canvas bounds instead of the path bounds, so the transparent pixels outside the path will not be trimmed.

I've also updated the method CubicArc.scale() and CubicLine.scale() to scale the size of the stroke. This will prevent the path from becoming thinner when upscaling or thicker when downscaling.

I've also updated the example to show the feature, as you can see in the screenshots below.

I hope everything is ok for the merge request, let me know if anything else is needed!

Turns out null check is missing in controller.toImage(...) resulting in [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: RangeError (index): Invalid value: Valid value range is empty: 0

Adding if (!isFilled) { return null; } In signature_control.dart [Line 1104] , should do the job

It actually is done in .toSvg() function in same file - signature_control.dart [Line 872-874]

If Interested in replicated this issue

Step 1: Fork the official example from https://github.com/RomanBase/hand_signature/tree/master/example Step 2: Build and Run it Step 3: Without drawing anything on canvas press 'export' button OR, - Draw something, press 'export', press 'clear', and then press 'export' again Step 4: Observer the debug console

My code is as follows. After drawing, I'm going to convert the data I drew into Json and upload it to Firestore. (And I'm going to get it back later.)

Container(
                      width: _screenWidth ?? 525, 
                      height: _screenHeight ?? 736,
                      color: Colors.transparent,
                      child: HandSignature(
                        control: signControl,
                        type: SignatureDrawType.shape,

                        onPointerUp: () async {
                          final drawJson = signControl.toMap();

                          // TODO firebase upload
                          await FirebaseFirestore.instance
                              .collection(COL_ROOMS)
                              .doc(widget.roomKey)
                              .collection(COL_DRAW)
                              .doc()
                              .set(drawJson);
                        },
                      ),

However, the following error is printed when uploading.

Nested arrays are not supported

There seems to be a problem with the json data. Is there a way to do this?