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