Flutter - Implement SignaturePad
Last Updated :
08 Jun, 2025
Signatures are an integral part of various applications, from e-commerce to document management systems. Flutter offers versatile tools and libraries to implement a signature pad effortlessly within your mobile applications. In this tutorial, we'll build a simple signature pad using Syncfusion's Flutter Signature Pad library and save the drawn signature as an image in the gallery.
Step-by-Step Implementation
Step 1: Create a new Flutter Application
Create a new Flutter application using the command Prompt. To create a new app, type the command below and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter
Step 2: Adding the Dependency
To add the dependency to the pubspec.yaml file, add syncfusion_flutter_signaturepad as a dependency in the dependencies part of the pubspec.yaml file, as shown below:
Dart
dependencies:
flutter:
sdk: flutter
syncfusion_flutter_signaturepad: ^29.2.8
Now, run the command below in the terminal.
flutter pub get
Or
Run the command below in the terminal.
flutter pub add syncfusion_flutter_signaturepad
Step 3: Import libraries
Let's import all libraries we are going to utilise in this project.
Dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
Create MyApp class that extends StatelessWidget. It represents the entire application. The const MyApp() constructor initializes the MyApp class.
Dart
void main() {
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),
title: 'Gfg Signature Pad',
home: _SignaturePad(),
);
}
}
The SfSignaturePad widget from the Syncfusion package serves as the core element for the signature pad. It offers various configurations for stroke width, color, and background color. The _clearCanvas function is used to clear the canvas where a signature is drawn, and _saveImage is used to save the Image to the gallery.
Dart
class _SignaturePad extends StatefulWidget {
_SignaturePad({Key? key}) : super(key: key);
@override
_SignaturePadState createState() => _SignaturePadState();
}
class _SignaturePadState extends State<_SignaturePad> {
final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();
@override
void initState() {
super.initState();
}
void _clearCanvas() {
signatureGlobalKey.currentState!.clear();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
title: const Text("Gfg Signature Pad"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
child: SfSignaturePad(
key: signatureGlobalKey,
backgroundColor: Colors.white,
strokeColor: Colors.black,
minimumStrokeWidth: 1.5,
maximumStrokeWidth: 5.0,
),
),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
onPressed: _clearCanvas,
child: Text('Clear'),
),
],
),
],
),
);
}
}
main.dart:
main.dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
void main() {
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),
title: 'Gfg Signature Pad',
home: _SignaturePad(),
);
}
}
class _SignaturePad extends StatefulWidget {
_SignaturePad({Key? key}) : super(key: key);
@override
_SignaturePadState createState() => _SignaturePadState();
}
class _SignaturePadState extends State<_SignaturePad> {
final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();
@override
void initState() {
super.initState();
}
void _clearCanvas() {
signatureGlobalKey.currentState!.clear();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
title: const Text("Gfg Signature Pad"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
child: SfSignaturePad(
key: signatureGlobalKey,
backgroundColor: Colors.white,
strokeColor: Colors.black,
minimumStrokeWidth: 1.5,
maximumStrokeWidth: 5.0,
),
),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
onPressed: _clearCanvas,
child: Text('Clear'),
),
],
),
],
),
);
}
}
Output:
Similar Reads
Flutter - Implementing Signing Out the User In this article, we can learn how to Signout the user from a flutter application. This article is a continuation of the article that explains making google signIn UI and its authentication. It is recommended to check the same before moving ahead. Now we will implement the Sign out feature for the fl
3 min read
Flutter - Implement IndexedStack Widget The IndexedStack widget in Flutter is used to display a single child from a list of children at a given index. It's commonly used when you want to show one child widget while hiding the others, such as in a tabbed interface. In this article, we are going to implement the IndexedStack widget and expl
5 min read
Implementing Flutter Gauge Flutter gauge is an information perception widget written in dart language to make a modern, interactive, and animated gauge check and is utilized to make excellent portable application user interfaces utilizing Flutter. There is an alternate style of gauge in flutter. Following are the steps to fol
4 min read
Flutter - Implementing Badges Badges can be used for various purposes in an application. For example, showing the number of messages, number of items in the cart, etc. In this article, we will see the implementation of badges in Flutter using the badges Flutter package. Install the library: In the pubspec.yaml file, add badges l
5 min read
Flutter - Implement Captcha Verification The word CAPTCHA stands for the Completely Automated Public Turing Test to Tell Computers and Humans Apart. If you have gone through any website or app you must have seen a captcha verification during login to check whether you are human or robot. So in this article, we will learn about how to add c
7 min read