How to Create a Custom Document Signing Feature in FlutterFlow

1// Custom Widget: PdfViewer
2import 'package:pdfx/pdfx.dart';
3import 'package:flutter/material.dart';
4
5class PdfViewerWidget extends StatefulWidget {
6  final String pdfUrl;
7  const PdfViewerWidget({Key? key, required this.pdfUrl}) : super(key: key);
8
9  @override
10  State<PdfViewerWidget> createState() => _PdfViewerWidgetState();
11}
12
13class _PdfViewerWidgetState extends State<PdfViewerWidget> {
14  late final PdfControllerPinch _pdfController;
15  int _currentPage = 1;
16  int _totalPages = 1;
17
18  @override
19  void initState() {
20    super.initState();
21    _pdfController = PdfControllerPinch(
22      document: PdfDocument.openFile(widget.pdfUrl),
23    );
24  }
25
26  @override
27  void dispose() {
28    _pdfController.dispose();
29    super.dispose();
30  }
31
32  @override
33  Widget build(BuildContext context) {
34    return Column(children: [
35      Expanded(
36        child: PdfViewPinch(
37          controller: _pdfController,
38          onDocumentLoaded: (doc) =>
39              setState(() => _totalPages = doc.pagesCount),
40          onPageChanged: (page) =>
41              setState(() => _currentPage = page),
42        ),
43      ),
44      Padding(
45        padding: const EdgeInsets.all(8),
46        child: Text(
47          'Page $_currentPage of $_totalPages',
48          style: const TextStyle(fontSize: 14),
49        ),
50      ),
51    ]);
52  }
53}

1// Key signature capture logic
2import 'dart:ui' as ui;
3import 'package:flutter/rendering.dart';
4import 'package:flutter/material.dart';
5
6class SignatureCanvas extends StatefulWidget {
7  final Function(Uint8List bytes) onSigned;
8  const SignatureCanvas({Key? key, required this.onSigned}) : super(key: key);
9
10  @override
11  State<SignatureCanvas> createState() => _SignatureCanvasState();
12}
13
14class _SignatureCanvasState extends State<SignatureCanvas> {
15  final List<List<Offset>> _strokes = [];
16  List<Offset> _currentStroke = [];
17  final GlobalKey _repaintKey = GlobalKey();
18
19  Future<void> _saveSignature() async {
20    final boundary = _repaintKey.currentContext!.findRenderObject()
21        as RenderRepaintBoundary;
22    final image = await boundary.toImage(pixelRatio: 2.0);
23    final byteData = await image.toByteData(
24      format: ui.ImageByteFormat.png,
25    );
26    widget.onSigned(byteData!.buffer.asUint8List());
27  }
28
29  @override
30  Widget build(BuildContext context) {
31    return Column(children: [
32      RepaintBoundary(
33        key: _repaintKey,
34        child: GestureDetector(
35          onPanStart: (d) {
36            setState(() => _currentStroke = [d.localPosition]);
37          },
38          onPanUpdate: (d) {
39            setState(() => _currentStroke.add(d.localPosition));
40          },
41          onPanEnd: (_) {
42            setState(() {
43              _strokes.add(List.from(_currentStroke));
44              _currentStroke = [];
45            });
46          },
47          child: Container(
48            height: 150,
49            decoration: BoxDecoration(
50              color: Colors.white,
51              border: Border.all(color: Colors.grey.shade300),
52              borderRadius: BorderRadius.circular(8),
53            ),
54            child: CustomPaint(
55              painter: _SignaturePainter(
56                  strokes: _strokes, current: _currentStroke),
57              size: Size.infinite,
58            ),
59          ),
60        ),
61      ),
62      Row(children: [
63        TextButton(
64          onPressed: () => setState(() {
65            _strokes.clear();
66            _currentStroke = [];
67          }),
68          child: const Text('Clear'),
69        ),
70        ElevatedButton(
71          onPressed: _strokes.isEmpty ? null : _saveSignature,
72          child: const Text('Save Signature'),
73        ),
74      ]),
75    ]);
76  }
77}

1// Cloud Function: mergeSignatureIntoPdf (Node.js)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const { PDFDocument } = require('pdf-lib');
5const fetch = require('node-fetch');
6
7exports.mergeSignatureIntoPdf = functions.https.onCall(
8  async (data, context) => {
9    if (!context.auth) {
10      throw new functions.https.HttpsError('unauthenticated', 'Login required');
11    }
12    const { requestId, signatureUrl, signatureX, signatureY,
13      signatureWidth, signatureHeight } = data;
14    const db = admin.firestore();
15    const bucket = admin.storage().bucket();
16
17    // Load original PDF
18    const reqDoc = await db.collection('signingRequests').doc(requestId).get();
19    const { documentUrl } = reqDoc.data();
20    const pdfResponse = await fetch(documentUrl);
21    const pdfBytes = await pdfResponse.arrayBuffer();
22    const pdfDoc = await PDFDocument.load(pdfBytes);
23
24    // Load signature PNG
25    const sigResponse = await fetch(signatureUrl);
26    const sigBytes = await sigResponse.arrayBuffer();
27    const sigImage = await pdfDoc.embedPng(sigBytes);
28
29    // Stamp signature on last page (or target page)
30    const pages = pdfDoc.getPages();
31    const targetPage = pages[pages.length - 1];
32    targetPage.drawImage(sigImage, {
33      x: signatureX,
34      y: signatureY,
35      width: signatureWidth,
36      height: signatureHeight,
37    });
38
39    // Save merged PDF
40    const mergedBytes = await pdfDoc.save();
41    const outPath = `signed_documents/${requestId}/${context.auth.uid}_signed.pdf`;
42    const file = bucket.file(outPath);
43    await file.save(Buffer.from(mergedBytes), {
44      metadata: { contentType: 'application/pdf' },
45    });
46    const [signedUrl] = await file.getSignedUrl({
47      action: 'read',
48      expires: Date.now() + 7 * 24 * 60 * 60 * 1000,
49    });
50    return { signedDocumentUrl: signedUrl };
51  }
52);