zeba_academy_canvas_board 0.0.1

A powerful, fully offline interactive canvas board for Flutter. Supports pan, zoom, snapping, draggable items, JSON export/import, and image export — perfect for diagrams, notes, and UI prototyping.

📌 zeba_academy_canvas_board

A powerful, fully offline interactive canvas board for Flutter — designed for drawing, note-taking, brainstorming, and building dynamic UI layouts.

---

🚀 Features

✨ Pan & Zoom — Smooth navigation across large canvases ✨ Grid & Snapping — Perfect alignment for diagrams ✨ Interactive Items — Add text, shapes, and widgets ✨ Drag & Move — Intuitive gesture-based positioning ✨ JSON Export/Import — Save and restore canvas state ✨ Image Export — Capture canvas as an image ✨ Fully Offline — No API, no internet required

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_canvas_board: ^0.0.1

---

🛠️ Usage

import 'package:flutter/material.dart';
import 'package:zeba_academy_canvas_board/zeba_academy_canvas_board.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final controller = CanvasController();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Canvas Board")),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            controller.addItem(
              CanvasItem(
                id: DateTime.now().toString(),
                position: const Offset(100, 100),
                type: CanvasItemType.text,
                text: "Hello",
              ),
            );
          },
          child: const Icon(Icons.add),
        ),
        body: CanvasBoard(controller: controller),
      ),
    );
  }
}

---

🧠 Controller API

Add Item

controller.addItem(item);

Remove Item

controller.removeItem(id);

Export JSON

final json = controller.exportJson();

Import JSON

controller.importJson(json);

---

🖼️ Export as Image

Add dependency:

dependencies:
  screenshot: ^2.1.0

Wrap your canvas:

Screenshot(
  controller: screenshotController,
  child: CanvasBoard(controller: controller),
)

Capture:

final image = await screenshotController.capture();

---

📚 Use Cases

• 🧠 Brainstorming boards
• 📐 Study diagrams
• 📝 Visual note-taking
• 🎨 UI prototyping
• 🧩 Widget layout builders

---

🔥 Roadmap

• Undo / Redo
• Freehand drawing (pen tool)
• Image widget support
• Multi-select & grouping
• Layer system

---

📄 License

This project is licensed under the GPL License.

---

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects. You can learn more about me and my work at sufyanism.com or connect with me on Linkedin

---

🌐 Your all-in-one no-bloat hub!

🚀 Explore cutting-edge resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated directives, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development. ➡ Visit our main site: zeba.academy ➡ Explore hands-on courses and resources at: code.zeba.academy ➡ Check out our YouTube for more tutorials: zeba.academy ➡ Follow us on Instagram: zeba.academy

---

Thank you for visiting! 🙌