pdf_kit_editor 0.2.0

A visual PDF template builder for Flutter to create receipts, documents, and reports using a drag-and-drop experience with Google Fonts and dynamic data support.

example/lib/main.dart

// ignore_for_file: use_build_context_synchronously
import 'package:flutter/material.dart';
import 'package:pdf_kit_editor/pdf_layout_kit.dart';

/// Full example demonstrating how to embed [PdfKitEditor] in your Flutter app.
///
/// It shows:
/// - Live data binding with all your app's data fields
/// - A pre-built receipt template (users can modify it inside the editor)
/// - Manual save callback to persist to your own DB or API
/// - Comment shows how to switch to automatic local storage
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'pdf_kit_editor Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true),
      home: const EditorExample(),
    );
  }
}

class EditorExample extends StatelessWidget {
  const EditorExample({super.key});

  @override
  Widget build(BuildContext context) {
    // ─── 1. Your app's live data ──────────────────────────────────────────────
    // All keys here appear as selectable data fields inside the editor.
    final data = {
      'logo_url': 'https://flutter.dev/assets/lockup_flutter_horizontal.d0515092173211776ceed19b39c2a041.png',
      'store_name': 'Awesome Supermarket',
      'date': '2026-03-08 12:00:00',
      'cashier': 'John Doe',
      'products': [
        {'name': 'Apple', 'qty': 2, 'price': '\$10.00'},
        {'name': 'Banana', 'qty': 5, 'price': '\$5.00'},
        {'name': 'Milk 1L', 'qty': 1, 'price': '\$2.50'},
        {'name': 'Bread', 'qty': 1, 'price': '\$1.50'},
        {'name': 'Eggs ×12', 'qty': 1, 'price': '\$3.00'},
        {'name': 'Coffee 500g', 'qty': 1, 'price': '\$12.00'},
        {'name': 'Orange Juice 2L', 'qty': 2, 'price': '\$10.00'},
      ],
      'subtotal': '\$44.00',
      'discount': '-\$2.00',
      'total': 'Total: \$42.00',
      'transaction_id': 'TXN-987654321',
    };

    // ─── 2. Optional default template ─────────────────────────────────────────
    // Remove initialTemplate to let users start from a blank canvas.
    const initialTemplate = PdfTemplate(
      id: 'receipt_v1',
      name: 'Receipt Template',
      elements: [
        PdfElement.image(dataKey: 'logo_url', width: 60, height: 30, alignment: PdfTextAlignment.center),
        PdfElement.space(height: 6),
        PdfElement.text(dataKey: 'store_name', alignment: PdfTextAlignment.center),
        PdfElement.text(dataKey: 'date', alignment: PdfTextAlignment.center),
        PdfElement.divider(),
        PdfElement.table(dataSourceKey: 'products', columns: {'Item': 'name', 'Qty': 'qty', 'Price': 'price'}),
        PdfElement.divider(),
        PdfElement.text(dataKey: 'total', alignment: PdfTextAlignment.right),
        PdfElement.space(height: 8),
        PdfElement.barcode(dataKey: 'transaction_id', alignment: PdfTextAlignment.center),
      ],
    );

    // ─── 3. Embed the editor ───────────────────────────────────────────────────
    return PdfKitEditor(
      data: data,
      initialTemplate: initialTemplate,
      showDebugSwitch: true,
      showSaveButton: true,
      hideSettingsPanel: false,
      hideDataViewer: false,

      // OPTION A — Manual storage (recommended for production):
      // Handle saving yourself: database, API, cloud sync, etc.
      useDefaultStorage: false,
      onSave: (template) {
        // final json = jsonEncode(template.toJson());
        // await myDatabase.saveTemplate(json);
        debugPrint('Saved: ${template.name} (${template.elements.length} elements)');
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Template "${template.name}" saved!')));
      },

      // OPTION B — Auto-storage (great for quick prototyping):
      // useDefaultStorage: true,
      // Saves/loads template automatically from device SharedPreferences.
      // You can combine both: local auto-save AND cloud sync via onSave.
    );
  }
}