Ensuring the credibility and legitimacy of digital documents is largely dependent on digital signatures. You may increase the security of your Flutter application by incorporating digital signature functionality.
We’ll look at a digital signature in Flutter in this article. We will see how to run a sample programme and discover how to use the signature package in your Flutter applications to incorporate digital signatures.
Introduction:
This demo video demonstrates how to use the signature package in your Flutter applications to create an animated loader and how to implement a digital signature in Flutter. We will provide customers with instructions on how to clear, redo, and undo a digital signature. It’ll appear on your gadget.
Constructor:
We must utilise a SignatureController constructor beneath in order to regulate the signature.
SignatureController({
List<Point>? points,
this.disabled = false,
this.penColor = Colors.black,
this.strokeCap = StrokeCap.butt,
this.strokeJoin = StrokeJoin.miter,
this.penStrokeWidth = 3.0,
this.exportBackgroundColor,
this.exportPenColor,
this.onDrawStart,
this.onDrawMove,
this.onDrawEnd,
})Properties:
There are some properties of SignatureController are:
penColor:This property is used for the color of the signature line drawn on the pad.penStrokeWidth:This property determines the width or thickness of the signature line drawn.exportBackgroundColor:This property is used to determine the color of the exported PNG image.point:This property is used as a setter representing the position of the signature on the 2D canvas.onDrawStart:This property uses a callback function that notifies us when the drawing has started.onDrawMove:This property uses a callback function that notifies us while drawing our signature.onDrawEnd:This property uses a callback function that notifies us when the drawing has stopped.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
signature: ^5.4.0Step 2: Import
import 'package:signature/signature.dart';Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
It must be implemented in your code in the appropriate way:
Create a new dart file called main.dart inside the lib folder.
It’s time to update our primary dart file. The new class MyHomePage() is what we wish to construct. We shall initialise the signature controller in this class first.
final SignatureController _controller = SignatureController(
penStrokeWidth: 1,
penColor: Colors.red,
exportBackgroundColor: Colors.transparent,
exportPenColor: Colors.black,
onDrawStart: () => log('onDrawStart called!'),
onDrawEnd: () => log('onDrawEnd called!'),
);Now, we will add the initState() method. In this method, we will add a _controller.addListener() navigate to log ().
@override
void initState() {
super.initState();
_controller.addListener(() => log('Value changed'));
}We will add dispose() method. in this method, we will add _controller.dispose().
@override
void dispose() {
_controller.dispose();
super.dispose();
}To the build procedure, we will add the code. We are going to add a ListView widget in this method. We are going to add a SizeBox with a height of 50 and the phrase “Signature” to this widget. Next, define the Signature() function as follows. We will include a key, controller, height, width, and backgroundColor in this function.
ListView(
children: <Widget>[
const SizedBox(
height: 50,
child: Center(
child: Text(
'Signature',
style: TextStyle(fontSize: 20),
),
),
),
Signature(
key: const Key('signature'),
controller: _controller,
height: 300,
width: 350,
backgroundColor: Colors.grey[200]!,
),
],
),We will now include the BottomAppBar() function. We are going to add three ElevatedButton() to this method. “Undo,” the initial button function, indicates to have no effect or to act as though nothing was done. “Redo,” the purpose of the second button, implies to repeat the action. The final button function is named “Clear,” and it deletes unwanted items.
bottomNavigationBar: BottomAppBar(
child: Container(
decoration: const BoxDecoration(color: Colors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
setState(() => _controller.undo());
},
child: const Text("Undo")),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
setState(() => _controller.redo());
},
child: const Text("Redo")),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
setState(() => _controller.clear());
},
child: const Text("Clear")),
],
),
),
),The screen output should appear when we execute the application, similar to the screenshot below.
Code File:
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// initialize the signature controller
final SignatureController _controller = SignatureController(
penStrokeWidth: 1,
penColor: Colors.blue,
exportBackgroundColor: Colors.transparent,
exportPenColor: Colors.black,
onDrawStart: () => log('onDrawStart called!'),
onDrawEnd: () => log('onDrawEnd called!'),
);
@override
void initState() {
super.initState();
_controller.addListener(() => log('Value changed'));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Signature Demo'),
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: Colors.blue,
),
body: ListView(
children: <Widget>[
const SizedBox(
height: 50,
child: Center(
child: Text(
'Signature',
style: TextStyle(fontSize: 20),
),
),
),
Signature(
key: const Key('signature'),
controller: _controller,
height: 300,
width: 350,
backgroundColor: Colors.grey[200]!,
),
],
),
bottomNavigationBar: BottomAppBar(
child: Container(
decoration: const BoxDecoration(color: Colors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
),
onPressed: () {
setState(() => _controller.undo());
},
child: const Text("Undo")),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
),
onPressed: () {
setState(() => _controller.redo());
},
child: const Text("Redo")),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
),
onPressed: () {
setState(() => _controller.clear());
},
child: const Text("Clear")),
],
),
),
),
);
}
}
Conclusion:
I’ve described the digital signature in a flurry in the post; feel free to change this code to suit your needs. This was just a brief introduction to my use of Flutter to facilitate digital signature on user interaction.
I hope you will find enough information in this blog to try using the digital signature in your Flutter projects. We’ll demonstrate the Introduction for you. Create a demonstration application to work with digital signatures in your Flutter applications by utilising the signature package. So do give it a try.
I appreciate you reading this article. ❤︦
If I made a mistake? Tell me in the comments below. I would adore getting better.
Slap ???? If you find this material useful.