Introducing the New Flutter SignaturePad Widget | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (74)Flutter  (137)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (967)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (148)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (343)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New Flutter SignaturePad Widget

Introducing the New Flutter SignaturePad Widget

Nowadays, all types of documents can be signed digitally—Word documents, PDFs, etc. Coincidentally, the Syncfusion 2020 Volume 3 release also includes a new Flutter SignaturePad widget for capturing signatures and using them in documents and on devices. You can use your finger, pen, mouse, tablet, touchscreen, etc. to draw your own signature with this widget.

The SignaturePad widget allows you to save the signature as an image, which can be synchronized with your documents that need the signature.

Flutter SignaturePad Widget
Flutter SignaturePad Widget

Let’s check out its key features in this blog post!

Key features

Realistic handwritten look and feel

A signature is comprised of stroke gestures. In the SignaturePad widget, you can choose the signature’s stroke ink thickness with the pressure you are applying while drawing a particular stroke gesture.

For example, in a real handwritten signature, the stroke thickness is heavier at the start and end of the signature as we naturally apply more pressure there. Also, in some signatures, certain curves will naturally have heavier strokes as we press harder while drawing them.

The SignaturePad uses this logic to apply your touch impressions while drawing the signature. You can see this in the previous GIF image, which clearly shows the signature stroke thickness variation as the signature is drawn.

Save as image

The SignaturePad widget provides options to convert and save a drawn signature as an image to embed it in documents, PDFs, and anything else that supports using images to enter a signature. This is a key functionality that enables you to transfer the signature from the SignaturePad widget to any other devices or documents.

Signature to Image Conversion
Signature to Image Conversion

Rich customization options

Signature stroke color customization

There will be situations where the color of the signature denotes the authority you have in an organization. Or maybe you just don’t like signing in black, which is the default stroke color of the SignaturePad.

Luckily, you can easily set custom stroke colors for your signature, as shown in the following screenshot.

Signature Stroke Color Customization
Signature Stroke Color Customization

Signature stroke width customization

Another feature that further enhances the realistic handwritten appearance in the SignaturePad widget is the ability to set minimum and maximum stroke widths for the signature.

Signature Width Customization
Signature Width Customization

Handle onSave and onClear callbacks

The widget also provides callbacks that help you handle the start and end of each signature stroke.

How to use the SignaturePad in a Flutter application

You can refer to this overview and getting started documentation to quickly learn how to use the Syncfusion Flutter SignaturePad widget in your applications.


I hope this new Flutter SignaturePad widget will be useful wherever you need to capture digital signatures in your Flutter applications. This widget is available in the 2020 Volume 3 release.

You can refer to the Syncfusion Flutter widgets page to learn more about all the other widgets we offer for creating high-quality apps for iOS, Android, and web platforms. Use them to enhance your productivity!

For current Syncfusion customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features. Also, we encourage you to try our samples at this GitHub location.

You can also reach us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!



Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed