I want to save a signature in Firebase. I used pencil_kit 2.1.0 to create a custom widget that allows signing on the screen. However, I haven’t been able to retrieve the signature (base64Image) and upload it to Firebase to associate it with a document. How can I do this?
I appreciate any help.
Capture a signature using Apple Pencil and upload it to Firebase.
Custom Code
Here is the code for the custom widget that lets me input the signature on the screen:
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:pencil_kit/pencil_kit.dart';
class Firma extends StatefulWidget {
const Firma({
super.key,
this.width,
this.height,
});
final double? width;
final double? height;
@override
State<Firma> createState() => _FirmaState();
}
class _FirmaState extends State<Firma> {
late PencilKitController controller;
String base64Image = '';
@override
Widget build(BuildContext context) {
return SizedBox(
width: widget.width,
height: widget.height,
child: Column(
children: [
// Signature canvas
Expanded(
child: PencilKit(
onPencilKitViewCreated: (PencilKitController controller) {
this.controller = controller;
// Set initial tool settings
controller.setPKTool(
toolType: ToolType.pen,
width: 2,
color: Colors.black,
);
},
// Optional callbacks
canvasViewDrawingDidChange: () {
print('Drawing changed');
},
),
),
// Control buttons
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: const Icon(Icons.clear),
onPressed: () => controller.clear(),
tooltip: 'Clear',
),
IconButton(
icon: const Icon(Icons.undo),
onPressed: () => controller.undo(),
tooltip: 'Undo',
),
IconButton(
icon: const Icon(Icons.save),
onPressed: () async {
// Get signature as base64 string
final data = await controller.getBase64PngData();
setState(() {
base64Image = data;
});
// Here you can save base64Image to your backend
print('Signature saved as base64');
},
tooltip: 'Save',
),
],
),
],
),
);
}
}
Yes
1
2 replies