certificate_canvas 0.0.2

A powerful, memory-safe drag-and-drop certificate designer for Flutter. Features undo/redo, smart templates, image overlays, and high-res exports.

example/lib/main.dart

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:certificate_canvas/certificate_canvas.dart';
// Note: In a real app, you would add image_picker to pubspec.yaml
// import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MaterialApp(home: ExampleCertificateApp()));
}

class ExampleCertificateApp extends StatefulWidget {
  const ExampleCertificateApp({super.key});

  @override
  State<ExampleCertificateApp> createState() => _ExampleCertificateAppState();
}

class _ExampleCertificateAppState extends State<ExampleCertificateApp> {
  final CertificateController _controller = CertificateController();
  Uint8List? _bgBytes;

  @override
  void initState() {
    super.initState();
    // Initialize with a template
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _controller.setFields([
        CertificateField(
          id: "title",
          text: "CERTIFICATE OF APPRECIATION",
          x: 0.5,
          y: 0.2,
          fontSize: 30,
          isBold: true,
          textAlign: TextAlign.center,
        ),
        CertificateField(
          id: "name",
          text: "John Doe",
          x: 0.5,
          y: 0.5,
          fontSize: 40,
          isBold: true,
          color: Colors.blue,
          textAlign: TextAlign.center,
        ),
        CertificateField(
          id: "date",
          text: "Date: 2024-01-01",
          x: 0.8,
          y: 0.8,
          fontSize: 16,
        ),
      ]);
    });
  }

  // Mock function to simulate uploading
  Future<void> _mockUpload(Uint8List pngBytes) async {
    // In a real app: FirebaseStorage.instance.ref().putData(pngBytes);
    await Future.delayed(const Duration(seconds: 2));
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
            content: Text(
                "Certificate uploaded! Size: ${pngBytes.lengthInBytes} bytes")),
      );
    }
  }

  // Mock function to simulate image picking
  Future<Uint8List?> _mockPickImage() async {
    // final file = await ImagePicker().pickImage(source: ImageSource.gallery);
    // return await file?.readAsBytes();
    return null; // Return null for demo purposes
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Certificate Designer Demo")),
      body: CertificateEditor(
        controller: _controller,
        imageBytes: _bgBytes, // Pass your background image bytes here
        onUpload: _mockUpload,
        onPickImage: _mockPickImage,
      ),
    );
  }
}