kiwi-bop / flutter_signature_pad

:package: Flutter widget to allow users to sign with finger and export the result as image data.

Flutter signature pad widget

Flutter widget to allow users to sign with finger and export the result as image.

Getting Started with the widget

This is a very simple widget that allow drawing by finger on a widget and be able to get the image back.

For very basic usage, please check the example file here

Signature(
  color: Colors.black,// Color of the drawing path
  strokeWidth: 5.0, // with 
  backgroundPainter: null, // Additional custom painter to draw stuff like watermark 
  onSign: null, // Callback called on user pan drawing
  key: null, // key that allow you to provide a GlobalKey that'll let you retrieve the image once user has signed
);

API

Once you retrieved the SignatureState from your GlobalKey, you'll have access to this API:

clear: allow you to clear the area to start again

getData: allow you to retrieve the image

hasPoints: to know if user has sign or not

points: to retrieve the list of points of the signature

flutter_signature_pad's Issues

not working on Flutter 1.25.0-8.2.pre

Hi,

Everything was working perfectly until I updated to flutter 1.25.0-8.2.pre. No error are thrown but nothing is being drawn. I think it's just a matter of painting because I'm still able to see sign.points.length increase. Any idea?

how get only the drawing

I opened the signature in a new page(he took the whole page), so If my user draw at the bottom in a portrait mode when I catch the image he took the whole page and the draw in the bottom, can I crop to show only the drawer with a few space around? tks

Image to base64

Thanks for a nice lib!

I have one issue trying to save the picture to a format i can upload.
For example, saving the image as base64, the result is not valid as an image.

Code:

var image = await _sign.currentState.getData();
var data = await image.toByteData();

var dataList = Uint8List.view(data.buffer);
var base64String = base64.encode(dataList);

How to make signature_pad unscrollable?

I put the signature widget inside the TabBarView(). So when I try to do the signature the view scrolls and is little bit laggy(Start signature after leaving the first step).

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Text Field Focus'), ), body: Padding( padding: const EdgeInsets.all(16.0), // child: makeList(), child: Signature( color: Colors.black, // Color of the drawing path strokeWidth: 2.0, // with backgroundPainter: null, // Additional custom painter to draw stuff like watermark onSign: null, // Callback called on user pan drawing key: null, // key that allow you to provide a GlobalKey that'll let you retrieve the image once user has signed ), ), ); }

ancestorStateofType was deprecated

Hai @jaumard , @kiwi-dev , I've got deprecated message on flutter_signature_pad.dart file. It said that something that was deprecated because it is no longer used in the framework (only in deprecated methods) which is in static SignatureState. Here I've been attached the screenshot. Hope you can fix that issue.
Thanks before..

Dot not working after adding "onVerticalDrag"

I found that the problem is from the commit "6464439" that implementing the "onVerticalDrag" series.
After adding Vertical Drag detection, Flutter will have a delay to recognize the gesture is signing. That's why the dot is not working.
For a quick fix solution, I suggest to adding an option to enable / disable "onVerticalDrag" when user call the constructor so that user can choose to disable the vertical drag (for fixing the dot problem) or enable it (for using in scrollview)

Of course an ultimate solution to fix both will be better.

Can I set the image background color?

The default is now black when I save to remote server and browse it
the code is following:
/// save image
FormData picData = new FormData();
final sign = _sign.currentState;
final image = await sign.getData();
var data = await image.toByteData(format: UI.ImageByteFormat.png);

            final dir = (await getApplicationDocumentsDirectory());
            var file = await File('${dir.path}/sign.png').writeAsBytes(data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes));
            ///  compresse
            var compressedImage = await FlutterImageCompress.compressAndGetFile(
            file.absolute.path,
            '${dir.path}/temp.jpg',
            minWidth: 200,
            minHeight: 500,
            quality: 100,
            );
            var uploadFile = new UploadFileInfo(compressedImage, basename(compressedImage.path));
            picData.add('${file.absolute.path}', uploadFile);

            DioUtil().request(Method.post, Api.ATTACHMENT_UPLOAD, data: picData).then((resp){
              resp.data = jsonDecode(resp.data);
              Map map = Map.from({'pic':resp.data[0]['id']});
              Navigator.pop(context, map);
            })

How to set background image from asset?

I want to put a background image on the pad or onto image after converted.
I know it has a BackgroundPainter, but I don't know how to put a background image.
Please need your advice.
Thank you

EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE

I am getting errors when I try to draw on the canvas. Furthermore, no drawing is visible until I do a change color or stroke size

E/flutter ( 9922): [ERROR:flutter/lib/ui/painting/codec.cc(91)] InitCodec failed - buffer was empty
Reloaded 11 of 615 libraries in 3,608ms.
I/flutter ( 9922): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter ( 9922): The following _Exception was thrown resolving an image codec:
I/flutter ( 9922): Exception: operation failed
I/flutter ( 9922): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): change stroke width to 2
E/flutter ( 9922): [ERROR:flutter/lib/ui/painting/codec.cc(91)] InitCodec failed - buffer was empty
I/flutter ( 9922): Another exception was thrown: Exception: operation failed
I/flutter ( 9922): cleared
E/flutter ( 9922): [ERROR:flutter/lib/ui/painting/codec.cc(91)] InitCodec failed - buffer was empty
I/flutter ( 9922): Another exception was thrown: Exception: operation failed
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 9922): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.

That's the log, it doesn't even specify where the error is coming from.

Save to image

Hi, can I save the signature to file ?

send image with base64

thanks for the great library. I have one issue that I can't send the image. I has try this https://github.com/kiwi-bop/flutter_signature_pad/blob/master/example/lib/main.dart#L98-L103 but in my server, I can't decode it. The way I decode it like this $image = base64_decode($data->assign_sa); but then I have error
InvalidArgumentException: Malformed UTF-8 characters, possibly incorrectly encoded in file /home/serc1112/public_html/api-sat/vendor/laravel/framework/src/Illuminate/Http/JsonResponse.php on line 91
am I wrong how to decode it?

Flutter 3.0.0 update necessary

Due to the new Flutter version 3.0.0, and their changes to the way the instance property on bindings work the package requires an upgrade to silence the warnings.

You can read more about it here - https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.0.0

This is the warning that I'm receiving from the package:

./../development/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_signature_pad-3.0.0/lib/flutter_signature_pad.dart:60:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which
excludes null.

Thanks!

Issue with getData() not being declared async

Hi guys! This is a great Flutter plugin. I had to modify your dart file to get it to work for me, though. The getData() method returns a Future, but is not declared asynchronous. So my compiler failed and had an issue with the Image being returned not being of type Future. Is there another way around this? Adding the 'async' tag to the getData() method in the dart file worked for me, but perhaps I just am not using it correctly? Flutter 1.1.9 Dart 2.1.1 (build 2.1.1-dev.0.1 2cb346bd0c)

base64_encode

image is not converting into base64_encode completely only a few portions are saving

build error when testing the example code

here is the error log:
Compiler message:
/C:/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_signature_pad-2.0.2/lib/flutter_signature_pad.dart:23:20: Error: The method 'findAncestorStateOfType' isn't defined for the class 'BuildContext'.

• 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/framework.dart').
  Try correcting the name to the name of an existing method, or defining a method named 'findAncestorStateOfType'.
  return context.findAncestorStateOfType();

There's no getData

I have my _signKey declared inside of my state class:

final GlobalKey _signKey = GlobalKey();

In my build method I have a "done" button and have this in it:

final sign = _signKey.currentState;
final image = await sign?.getData();

But it's error out saying getData is not defined.

I'm on version 3.0.0.

Migration to null-safety

Flutter 2.0 is stable now featuring null-safety
https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65

Are there plans to migrate this package to null-safety?

ByteDataView

Hey

I can not use data as a file for saving.
var data = await image.toByteData(format: ui.ImageByteFormat.png);
when I use "File file = data" I got an error that data is ByteDataView.
How can I convert data to file ?????

Sliding problem

Flutter_signature_pad In SingleChildScrollView, when the flutter_signature_pad is swiped, the SingleChildScrollView will slide together.

Plugin unusable after last flutter release

I was using the plugin on an android apk which was fine but after the last release, the pad is not working correctly. I attach you a screenshot of the example app of the plugin

When i call the method getData, backgroundPainter is null and exception was thrown

When i call the method getData, backgroundPainter is null and crash

I/flutter (12444): When the exception was thrown, this was the stack:
I/flutter (12444): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
I/flutter (12444): #1 SignatureState.getData (package:flutter_signature_pad/flutter_signature_pad.dart:91:30)
I/flutter (12444): #2 SignaturePageState.build. (package:flutter_sa/pages/sign.dart:148:73)

The method '>' was called on null.

Hi, can you tell me what is wrong?

main.dart

        @override
          Widget build(BuildContext context) {
            return WillPopScope(
              child: Scaffold(
                  appBar: AppBar(
                    title: Text('Sign'),
                    actions: <Widget>[
                      IconButton(
                        icon: Icon(Icons.done),
                        onPressed: () {
                          ...
                        },
                      )
                    ],
                  ),
                  body: SingleChildScrollView(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            ...
                            _showSignaturePad(),
                           ....
                          ]))),
              onWillPop: () {
                Navigator.of(context).pop();
              },
            );
          }
    
  

    Widget _showSignaturePad() {
        return Container(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Signature(
              color: color,
              key: _sign,
              onSign: () {
                final sign = _sign.currentState;
                // debugPrint('${sign.points.length} points in the signature');
              },
              backgroundPainter: WatermarkPaint("2.0", "2.0"),
              strokeWidth: strokeWidth,
            ),
          ),
          color: Colors.black12,
        );
        }

water_mark_paint.dart

    import 'package:flutter/cupertino.dart';
    import 'dart:ui' as ui;
    
    import 'package:flutter/material.dart';
    
    class WatermarkPaint extends CustomPainter {
      final String price;
      final String watermark;
    
      WatermarkPaint(this.price, this.watermark);
    
      @override
      void paint(ui.Canvas canvas, ui.Size size) {
        canvas.drawCircle(Offset(size.width / 2, size.height / 2), 10.8,
            Paint()..color = Colors.blue);
      }
    
      @override
      bool shouldRepaint(WatermarkPaint oldDelegate) {
        return oldDelegate != this;
      }
    
      @override
      bool operator ==(Object other) =>
          identical(this, other) ||
          other is WatermarkPaint &&
              runtimeType == other.runtimeType &&
              price == other.price &&
              watermark == other.watermark;
    
      @override
      int get hashCode => price.hashCode ^ watermark.hashCode;
    }

Error

The method '>' was called on null. Receiver: null Tried calling:

(1e-10)

the error seems to be size, help me please, I not understand

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
children (using Flexible rather than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would otherwise be forced to take, and
then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.
If this message did not help you determine the problem, consider using debugDumpRenderTree():
https://flutter.dev/debugging/#rendering-layer
http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is:
RenderFlex#dbf9e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← Padding ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a630f] ← Semantics ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#6734b] ← _PointerListener ← Listener ← _ScrollableScope ← ⋯, parentData: offset=Offset(0.0, 0.0) (can use size), constraints: BoxConstraints(w=401.4, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: center, verticalDirection: down)
The creator information is set to:
Column ← Padding ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a630f] ← Semantics ←
_PointerListener ← Listener ← _GestureSemantics ←
RawGestureDetector-[LabeledGlobalKey#6734b] ← _PointerListener ← Listener
← _ScrollableScope ← ⋯
The nearest ancestor providing an unbounded width constraint is: _RenderSingleChildViewport#9ba66 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
needs compositing
creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#a630f] ← Semantics ← _PointerListener ←
Listener ← _GestureSemantics ←
RawGestureDetector-[LabeledGlobalKey#6734b] ← _PointerListener ← Listener
← _ScrollableScope ← _ScrollSemantics-[GlobalKey#6e550] ← RepaintBoundary ← ⋯
parentData: (can use size)
constraints: BoxConstraints(w=411.4, h=555.4)
size: MISSING
See also: https://flutter.dev/layout/
If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was:
Column
lib\…\view\formContrato.dart:117
When the exception was thrown, this was the stack:

Cannot change dotSize and penColor dynamically

When building with a new strokeWidth or color in the options, changes are not effective.

Following your example, when setting state with a new strokeWidth or a new color, the drawing is done with the same initial values.

selectColor(Color value) {
     setState(() => penColor = value); // does not change color of the stroke
 }
...
Widget build(BuildContext context) {
    var sign = Signature(
      color: penColor,
      strokeWidth: dotSize,
    );

How can we change dynamically these values ?

toByteData() isn't supported for flutter web

there's a problem with .toByteData in line 101 of the example project:
var data = await image.toByteData(format: ui.ImageByteFormat.png);

This is documented here:
flutter/flutter#44908

As of now, there doesn't seem to be a clean way to retrieve that data for flutter web.

Signature pad not picking up stoke straight away

With the example code provided,

when i try to draw the line it does not register the first part of my stroke.

Author Inactivity

I believe the author of this package has been inactive for almost a year now. For any developers who are here for a signature pad, it is recommended to find another package.

Cannot draw dot

I can't make a dot point.
Update:

• Pull Request: https://github.com/kiwi-bop/flutter_signature_pad/pull/16

Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.

Try calling using ?. instead.
WidgetsBinding.instance.addPostFrameCallback((_) => afterFirstLayout(context));