Open In App

Flutter - Implement SignaturePad

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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';


Step 4: Create MyApp Widget

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(),
    );
  }
}


Step 5: Create SignaturePad Widget

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'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}


Complete Source Code

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:


R
rn540
Improve
Article Tags :

Explore

Lightbox