signature_canvas 1.0.0

A customizable Flutter widget for drawing signatures or freehand strokes. Includes image export, base64 support, and stroke reconstruction.

signature_canvas

Un widget de Flutter que permite dibujar firmas o trazos libres. Incluye:

• Soporte para colores dinámicos según el tema (oscuro/claro)
• Exportación como imagen PNG (Uint8List)
• Exportación como base64
• Reconstrucción de la firma desde datos serializados
• Controlador altamente configurable

💡 Características

• ✅ Dibujar a mano alzada
• 🎨 Color del lápiz adaptado al tema
• 💾 Exportar como imagen o base64
• 🔁 Reconstrucción de trazos desde JSON/base64
• 🧠 Controlador independiente y desacoplado

🚀 Instalación

Agrega la dependencia en tu archivo pubspec.yaml:

dependencies:
  signature_canvas: ^1.0.0

🧑‍💻 Uso Básico

1. Crea el controlador

final controller = SignatureController(
  penColor: Colors.black,               // Color del lápiz en tiempo real
  strokeWidth: 2.0,                     // Grosor del trazo
  exportPenColor: Colors.black,         // Color del lápiz al exportar PNG
  exportBackgroundColor: Colors.white, // Fondo de la imagen exportada
);

2. Muestra el canvas

SignatureCanvas(
  controller: controller,
  autoPenColorFromTheme: true, // Se adapta automáticamente al tema
)

3. Borra la firma

controller.clear();

📦 Exportar firma

PNG (Uint8List)

final Uint8List? image = await controller.exportAsImage();

PNG como base64

final String? base64 = await controller.exportAsPngBase64();

JSON serializado (lista de puntos)

final List<Map<String, dynamic>?> points = controller.exportAsJson();

JSON como base64 (reconstruible)

final String jsonBase64 = controller.exportAsJsonBase64();

♻️ Reconstruir firma desde datos

controller.importFromJsonBase64(jsonBase64String);

Esto dibujará de nuevo los trazos previos, permitiendo mostrar o continuar la edición.

🧪 Ejemplo completo

final controller = SignatureController(
  penColor: Colors.black,
);

...

SignatureCanvas(
  controller: controller,
)

...

ElevatedButton(
  onPressed: () async {
    final base64 = await controller.exportAsPngBase64();
    print('Firma base64: $base64');
  },
  child: Text("Guardar firma"),
),