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.
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.
Other useful links
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 android and iOS platforms
You can save the signature drawn in the SignaturePad as an image using the toImage() method, as shown in the following code snippet in the Android and iOS 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(pixelRatio: 3);
}),
],
),
);
}
Save the signature as an image in a web platform
You can save the signature drawn in the SignaturePad as an image using the renderToContext2D() method as shown in the following 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 the 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);
final completer = Completer<Uint8List>();
final reader = html.FileReader();
reader.readAsArrayBuffer(blob);
reader.onLoad.listen((_) => completer.complete(reader.result));
Uint8List imageData = await completer.future;
}),
],
),
);
}
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
- If you have any questions, you can reach out to our Syncfusion support team or post question on our community forums . Submit a feature request or a bug through our feedback portal.
- To renew your subscription, click renew or contact our sales team at salessupport@syncfusion.com | Toll Free: 1-888-9 DOTNET.
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, and UWP). 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.
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add syncfusion_flutter_signaturepadThis will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):
dependencies:
syncfusion_flutter_signaturepad: ^19.2.55
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
void main() {
return runApp(SignaturePadApp());
}
///Renders the SignaturePad widget.
class SignaturePadApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SfSignaturePad Demo',
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatefulWidget {
_MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<_MyHomePage> {
final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();
@override
void initState() {
super.initState();
}
void _handleClearButtonPressed() {
signatureGlobalKey.currentState!.clear();
}
void _handleSaveButtonPressed() async {
final data =
await signatureGlobalKey.currentState!.toImage(pixelRatio: 3.0);
final bytes = await data.toByteData(format: ui.ImageByteFormat.png);
await Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Container(
color: Colors.grey[300],
child: Image.memory(bytes!.buffer.asUint8List()),
),
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Container(
child: SfSignaturePad(
key: signatureGlobalKey,
backgroundColor: Colors.white,
strokeColor: Colors.black,
minimumStrokeWidth: 1.0,
maximumStrokeWidth: 4.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.grey)))),
SizedBox(height: 10),
Row(children: <Widget>[
TextButton(
child: Text('ToImage'),
onPressed: _handleSaveButtonPressed,
),
TextButton(
child: Text('Clear'),
onPressed: _handleClearButtonPressed,
)
], mainAxisAlignment: MainAxisAlignment.spaceEvenly)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center));
}
}