Flutter – Implement SignaturePad

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 Project

Start by creating a new Flutter project using the following command in the terminal or command prompt:

flutter create signature_app

Step 2: Install packages

Now, to install libraries and use them in the project, add required libraries with their desired version under the dependencies section in pubspec.yaml file, and press Ctrl + S to install them.

Step 3: Import libraries

Let’s import all libraries we are going to utilise in this project.

Dart

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:gallery_saver/gallery_saver.dart';
import 'package:flutter/services.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
import 'package:path_provider/path_provider.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 signature is drawn, and _saveImage is used to save Image to 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();
  }

  void _saveImage() async {
  final data = await signatureGlobalKey.currentState!.toImage(pixelRatio: 3.0);
  final bytes = await data.toByteData(format: ui.ImageByteFormat.png);

  Directory? directory;
  if (Platform.isAndroid) {
    directory = await getExternalStorageDirectory();
  } else if (Platform.isIOS) {
    directory = await getApplicationDocumentsDirectory();
  }

  if (directory != null) {
    File file = File('${directory.path}/signature.png');
    await file.writeAsBytes(bytes!.buffer.asUint8List());

    await GallerySaver.saveImage(file.path);

    await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context) => SignatureImage(bytes: bytes!.buffer.asUint8List()),
      ),
    );
  } else {
    print('Failed to access external storage directory.');
  }
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
              title: const Text("Gfg Signature Pad"),
              centerTitle: true,
            ),
        body: Column(
            children: [
          Padding(
              padding: EdgeInsets.all(10),
              child: Container(
                  child: SfSignaturePad(
                      key: signatureGlobalKey,
                      backgroundColor: Colors.white,
                      strokeColor: Colors.black,
                      minimumStrokeWidth: 1.5,
                      maximumStrokeWidth: 5.0),
                  decoration:
                      BoxDecoration(border: Border.all(color: Colors.grey)))),
          SizedBox(height: 10),
          Row(children: <Widget>[
            ElevatedButton(
              child: Text('Save Image'),
              onPressed: _saveImage,
            ),
            ElevatedButton(
              child: Text('Clear'),
              onPressed: _clearCanvas,
            )
          ], mainAxisAlignment: MainAxisAlignment.spaceEvenly)
        ],
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center));
  }
}

Step 6: Create SignatureImage Widget

The SignatureImage widget is used to show an image fetched from the gallery. For instance, after signature is saved in the gallery, this SignatureImage widget will display the saved signature image in a new screen.

Dart

class SignatureImage extends StatelessWidget {
  final Uint8List bytes;

  SignatureImage({required this.bytes});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Saved in Gallery')),
      body: Center(
        child: Container(
          color: Colors.grey[300],
          child: Image.memory(bytes),
        ),
      ),
    );
  }
}

Output: