syncfusion_flutter_signaturepad 20.1.51 copy "syncfusion_flutter_signaturepad: ^20.1.51" to clipboard
syncfusion_flutter_signaturepad: ^20.1.51 copied to clipboard

The Flutter Signature Pad widget allows you to capture smooth and more realistic signatures through drawn gestures and save it as an image.

syncfusion_flutter_signaturepad

Syncfusion Flutter SignaturePad #

Syncfusion Flutter SignaturePad library is written in Dart for capturing smooth and more realistic signatures and save it as an image to sync across devices and documents that needs signatures.

Overview #

This library is used to capture a signature through drawing gestures. You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature in this SignaturePad widget. The widget also allows you to save a signature as an image, which can be further synchronized with your documents that need the signature.

Disclaimer : This is a commercial package. To use this package, you need to have either a Syncfusion commercial license or Free Syncfusion Community license. For more details, please check the LICENSE file.

Flutter signature drawing

Table of contents #

SignaturePad features #

  • Rich customization - The widget allows you to set the minimum and maximum stroke widths and the stroke color for a signature. Also, you can set the background color of the SignaturePad.
  • More realistic handwritten look and feel - The unique stroke rendering algorithm draws signatures based on the speed of the drawing gestures, along with the minimum and maximum stroke thicknesses, which brings a more realistic, handwritten look and feel to your signatures.
  • Save as image - Save the drawn signature as an image to embed in documents, PDFs, and anything else that supports using images to denote a signature.

Get the demo application #

Explore the full capability of our Flutter widgets on your device by installing our sample browser application from the following app stores. View sample codes in GitHub.

Take a look at the following to learn more about the Syncfusion Flutter SignaturePad:

Installation #

Install the latest version from pub.dev.

Getting started #

Import the following package.

import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

Add SignaturePad to widget tree #

Add the SignaturePad widget as a child of any widget. Here, the SignaturePad widget is added as a child of the Container widget.

@override

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SfSignaturePad(),
      ),
    );
  }
  

Add SignaturePad elements #

Update elements such as stroke color, minimum stroke width, maximum stroke width, and background color to capture a realistic signature. In the following code example, the SignaturePad is added inside a Container widget to get a size for it.

@override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Container(
          child: SfSignaturePad(
            minimumStrokeWidth: 1,
            maximumStrokeWidth: 3,
            strokeColor: Colors.blue,
            backgroundColor: Colors.grey,
          ),
          height: 200,
          width: 300,
        ),
      ),
    );
  }

Save the signature as image in mobile and desktop platforms #

You can save the signature drawn in the SignaturePad as an image using the toImage() method as shown in the below code example in Android, iOS and Desktop platforms. Since this toImage() method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method. Optionally, the pixelRatio parameter may be used to set the pixel ratio of the image. The higher the pixel ratio value, the high-quality picture you get. The default value of the pixel ratio parameter is 1.

@override
Widget build(BuildContext context) {
  GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
  return Scaffold(
    body: Column(
      children: [
        Container(
          child: SfSignaturePad(
            key: _signaturePadKey,
            backgroundColor: Colors.grey[200],
          ),
          height: 200,
          width: 300,
        ),
        RaisedButton(
            child: Text("Save As Image"),
            onPressed: () async {
              ui.Image image =
                 await _signaturePadKey.currentState!.toImage();
            }),
      ],
    ),
  );
}

Save the signature as image in web (Desktop browser) #

This is similar to the mobile and desktop platforms. You can save the signature drawn in the SignaturePad as an image using the toImage() method as shown in the below code example in web platform (Desktop browser). Since this toImage() method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method. Optionally, the pixelRatio parameter may be used to set the pixel ratio of the image. The higher the pixel ratio value, the high-quality picture you get. The default value of the pixel ratio parameter is 1.

@override
Widget build(BuildContext context) {
  GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
  return Scaffold(
    body: Column(
      children: [
        Container(
          child: SfSignaturePad(
            key: _signaturePadKey,
            backgroundColor: Colors.grey[200],
          ),
          height: 200,
          width: 300,
        ),
        RaisedButton(
            child: Text("Save As Image"),
            onPressed: () async {
              ui.Image image =
                 await _signaturePadKey.currentState!.toImage();
            }),
      ],
    ),
  );
}

Save the signature as image in Web (Mobile browser) #

You can save the signature drawn in the SignaturePad as an image using the renderToContext2D method as show in the below code snippet. Since this renderToContext2D() method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method.

@override
Widget build(BuildContext context) {
  GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
  return Scaffold(
    body: Column(
      children: [
        Container(
          child: SfSignaturePad(
            key: _signaturePadKey,
            backgroundColor: Colors.grey[200],
          ),
          height: 200,
          width: 300,
        ),
        RaisedButton(
            child: Text("Save As Image"),
            onPressed: () async {

				//Get a html canvas context.
                final canvas = html.CanvasElement(width: 500, height: 500);
                final context = canvas.context2D;

				//Get the signature in the canvas context.
                _signaturePadKey.currentState!.renderToContext2D(context);

				//Get the image from the canvas context
                final blob = await canvas.toBlob('image/jpeg', 1.0);

				//Save the image as Uint8List to use it in local device.
                final completer = Completer<Uint8List>();
                final reader = html.FileReader();
                reader.readAsArrayBuffer(blob);
                reader.onLoad.listen((_) => completer.complete(reader.result));
                Uint8List imageData = await completer.future;

            }),
      ],
    ),
  );
}

N> Since Flutter uses two separate default web renderers, here we have two different code snippets to convert signatures to images in desktop and mobile browsers. Please refer to this Flutter web-renderers page for more details.

Clear the existing signature in SignaturePad #

You can clear the signature drawn in the SignaturePad using the clear() method as show in the following code snippet. Since this clear() method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method.

@override
  Widget build(BuildContext context) {
    
	GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
    
	return Scaffold(
      body: Column(
        children: [
          Container(
            child: SfSignaturePad(
              key: _signaturePadKey,
              backgroundColor: Colors.grey[200],
            ),
            height: 200,
            width: 300,
          ),
          RaisedButton(
              child: Text("Clear"),
              onPressed: () async {
                ui.Image image =
                   _signaturePadKey.currentState.clear();
              }),
        ],
      ),
    );
  }

Support and feedback #

About Syncfusion #

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1,000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Blazor, mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, UWP and WinUI). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

231
likes
0
pub points
98%
popularity

Publisher

verified publishersyncfusion.com

The Flutter Signature Pad widget allows you to capture smooth and more realistic signatures through drawn gestures and save it as an image.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, syncfusion_flutter_core

More

Packages that depend on syncfusion_flutter_signaturepad