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"),
),