How to use syncfusion_flutter_signaturepad | SfSignaturePad

import 'dart:convert';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

class SignatureWidget extends StatefulWidget {
  final dynamic data; // Your `data.uni` used in API

  const SignatureWidget({super.key, required this.data});

  @override
  State<SignatureWidget> createState() => _SignatureWidgetState();
}

class _SignatureWidgetState extends State<SignatureWidget> {
  final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SfSignaturePad(
          key: signatureGlobalKey,
          backgroundColor: Colors.white,
          strokeColor: Colors.black,
          minimumStrokeWidth: 1.0,
          maximumStrokeWidth: 4.0,
        ),
        const SizedBox(height: 10),
        Row(
          children: [
            ElevatedButton(
              onPressed: () {
                signatureGlobalKey.currentState?.clear();
              },
              child: const Text("Clear"),
            ),
            const SizedBox(width: 10),
            ElevatedButton(
              onPressed: () async {
                await _submitSignature();
              },
              child: const Text("Verify & Save"),
            ),
          ],
        )
      ],
    );
  }

  Future<void> _submitSignature() async {
    final date = DateFormat('yyyy-MM-dd').format(DateTime.now());
    String? base64Image;

    try {
      final signatureData = await signatureGlobalKey.currentState?.toImage(pixelRatio: 3.0);
      final byteData = await signatureData?.toByteData(format: ui.ImageByteFormat.png);

      if (byteData != null) {
        final pngBytes = byteData.buffer.asUint8List();
        final base64Str = base64Encode(pngBytes);

        //Add header for API
        base64Image = "data:image/png;base64,$base64Str";
        debugPrint("Base64 Signature with header: $base64Image");
      } else {
        Get.snackbar("Error", "Failed to capture signature.");
        return;
      }
    } catch (e) {
      Get.snackbar("Error", "Something went wrong while capturing the signature.");
      return;
    }

    // Replace this with your controller or API call
    final success = await fakeVerifyViaSignatureAPI(
      isNewSignatureCreated: true,
      approvedBy: base64Image ?? "",
      approvedDate: date,
    );

    if (success) {
      Get.back(); // Navigate back if needed
    }
  }

  /// MOCK: Replace this with your actual controller method
  Future<bool> fakeVerifyViaSignatureAPI({
    required bool isNewSignatureCreated,
    required String approvedBy,
    required String approvedDate,
  }) async {
    // Simulate API delay
    await Future.delayed(const Duration(seconds: 1));
    debugPrint("API called with:\n$uni\n$approvedDate\n$approvedBy");
    return true;
  }
}

Signature is converted to a png, then Base64 encoded.

It’s prefixed with "data:image/png;base64," as required by your API.

Uses Get.snackbar to show error messages.

Replace fakeVerifyViaSignatureAPI() with your actual API call.