Enrique Sadi
 · Crafting custom digital solutions to drive business growth - Made There Software Factory

Capture a signature using Apple Pencil and upload it to Firebase.

Custom Code

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.

What have you tried so far?

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',
              ),
            ],
          ),
        ],
      ),
    );
  }
}
Did you check FlutterFlow's Documentation for this topic?
Yes
1
2 replies