Explore Digital Signature In Flutter
Digital signatures are pivotal in guaranteeing the respectability and authenticity of digital records. By integrating digital signature usefulness into your Flutter application, you can upgrade the security of your application.
This article will Explore a Digital Signature In Flutter. We will perceive how to execute a demo program and we are going to learn about how we can implement digital signature using the signature package in your Flutter applications.
For Signature:
Signature | Flutter Package
A Flutter plugin providing a performance-optimized signature canvas with the ability to set custom style, boundaries, and…pub.dev
`If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
This demo video shows how to implement a digital signature in Flutter and how an animated loader will work using the signature package in your Flutter applications. We will offer users a digital signature and how to undo, redo, and clear the signature. It will be shown on your device.
Demo Module::
Constructor:
To control the signature, we need to use a SignatureController constructor underneath.
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 to color 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.0
Step 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 :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We should adjust our main. dart file. We want to create a new class MyHomePage(). In this class first, we will initialize the signature controller.
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();
}We will add the code to the build method. In this method, we will add a ListView widget. In this widget, we will add SizeBox with a height was 50 and text that is ‘Signature’. Then below define the Signature() function. In this function, we will add a key, controller, height, width, and backgroundColor.
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]!,
),
],
),Now, we will add the BottomAppBar() method. In this method, we will add three ElevatedButton(). The first button function called ‘Undo’ means make of no effect or as if not done. The second button function is called ‘Redo’ which means to do it over or again. The last button function is called ‘Clear’ means to remove things that are not wanted.
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")),
],
),
),
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_digital_signature_demo/splash_screen.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 Splash(),
);
}
}
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.red,
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 Digital Signature Demo'),
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: Colors.cyan,
),
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.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")),
],
),
),
),
);
}
}Conclusion:
In the article, I have explained the Digital Signature in a flutter; you can modify this code according to your choice. This was a small introduction to Digital Signature On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Digital Signature in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Digital Signature Using the signature package in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
