Flutter - Signature Pad | Signature Pad in Flutter | Digital Signature [2022]

[@sohanhalwa98]

Thanks man , you save my day

[@EffortlessCodeLearning]

Glad to hear that :)

[@jessieaguiao]

Hi, I would like to ask how to save as local png or jpg file? Thanks in advance.

[@EffortlessCodeLearning]

Watch the video & refer below steps to store signature on local file storage,
1) Define Uint8List type variable & controller in widget
Uint8List? exportedImage;
SignatureController controller = SignatureController(
penStrokeWidth: 3,
penColor: Colors.red,
exportBackgroundColor: Colors.yellowAccent,
);
2) Use Signature widget wherever you want show signature pad,
Signature(
controller: controller,
width: 350,
height: 200,
backgroundColor: Colors.lightBlue[100]!,
),
3) Export signature using controller
exportedImage = await controller.toPngBytes();
4) Store exported image to local file storage
final tempDir = await getTemporaryDirectory(); //Directory where you want store the image
File file = await File('${tempDir.path}/signature.png').create();
file.writeAsBytesSync(exportedImage);

[@jessieaguiao]

@@EffortlessCodeLearning thank you very much. new subscriber here.

[@EffortlessCodeLearning]

@@jessieaguiao Welcome to ECL 🙂

[@mohamedyashik1049]

How to upload signature image in server?

[@EffortlessCodeLearning]

You can do it using http client. Below code for the reference.
var request = http.MultipartRequest(
"POST", Uri.parse(""));
request.files
.add(await http.MultipartFile.fromPath("", imagePath));
//pass image path as a parameter. correct parameter_name should be passed to access image on server side
final response = await request.send();