30
Apr

Flutter Signature Pad

0

Flutter Signature Pad:

In this tutorial, we are learning about drawing a signature with a finger in a smart device and saving it as an image. This is helpful to verify a user remotely with his signature.

Creating Flutter Signature Pad in Flutter App:

To create flutter signature pad, we have to add it’s dependency packages to the pubspec.yaml file:

dependencies:

flutter_signature_pad: ^2.0.0+1

After adding this dependency package run the get package method to import all the dependencies. without adding this dependency package if we import into the dart file it will show package not found the error.

Import the package into main.dart :

Import the dependency package into main.dart file with below code

 

import ‘package:flutter_signature_pad/flutter_signature_pad.dart’;

After importing into main .dart file run the get method to get all the dependencies into your dart file otherwise some times it will show an error.

To set Preferred orientation use the below code as shown:

 

 

void main() async {
await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
runApp(MyApp());
}

Using the below code we are setting width and height for signature and also set the color. Here we are setting the color is blue  

@override
void paint(ui.Canvas canvas, ui.Size size) {
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 10.8, Paint()..color = Colors.blue);
}

The following standard method  used to perform respetive activities in the signature app

 

clear: allow you to clear the area to start again

getData: allow you to retrieve the image

hasPoints: to know if the user has sign or not

points: to retrieve the list of points of the signature

Complete Example Code for Flutter Signature Pad App:

import 'dart:convert';
import 'dart:math';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_signature_pad/flutter_signature_pad.dart';

void main() async {
await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _WatermarkPaint extends CustomPainter {
final String price;
final String watermark;

_WatermarkPaint(this.price, this.watermark);

@override
void paint(ui.Canvas canvas, ui.Size size) {
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 10.8, Paint()..color = Colors.blue);
}

@override
bool shouldRepaint(_WatermarkPaint oldDelegate) {
return oldDelegate != this;
}

@override
bool operator ==(Object other) =>
identical(this, other) || other is _WatermarkPaint && runtimeType == other.runtimeType && price == other.price && watermark == other.watermark;

@override
int get hashCode => price.hashCode ^ watermark.hashCode;
}

class _MyHomePageState extends State {
ByteData _img = ByteData(0);
var color = Colors.red;
var strokeWidth = 5.0;
final _sign = GlobalKey();

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Signature(
color: color,
key: _sign,
onSign: () {
final sign = _sign.currentState;
debugPrint('${sign.points.length} points in the signature');
},
backgroundPainter: _WatermarkPaint("2.0", "2.0"),
strokeWidth: strokeWidth,
),
),
color: Colors.black12,
),
),
_img.buffer.lengthInBytes == 0 ? Container() : LimitedBox(maxHeight: 200.0, child: Image.memory(_img.buffer.asUint8List())),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MaterialButton(
color: Colors.green,
onPressed: () async {
final sign = _sign.currentState;
//retrieve image data, do whatever you want with it (send to server, save locally...)
final image = await sign.getData();
var data = await image.toByteData(format: ui.ImageByteFormat.png);
sign.clear();
final encoded = base64.encode(data.buffer.asUint8List());
setState(() {
_img = data;
});
debugPrint("onPressed " + encoded);
},
child: Text("Save")),
MaterialButton(
color: Colors.grey,
onPressed: () {
final sign = _sign.currentState;
sign.clear();
setState(() {
_img = ByteData(0);
});
debugPrint("cleared");
},
child: Text("Clear")),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MaterialButton(
onPressed: () {
setState(() {
color = color == Colors.green ? Colors.red : Colors.green;
});
debugPrint("change color");
},
child: Text("Change color")),
MaterialButton(
onPressed: () {
setState(() {
int min = 1;
int max = 10;
int selection = min + (Random().nextInt(max - min));
strokeWidth = selection.roundToDouble();
debugPrint("change stroke width to $selection");
});
},
child: Text("Change stroke width")),
],
),
],
)
],
),
);
}
}

Leave a Reply

Categories