📌 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! 🙌