zeba_academy_whiteboard_ui 1.0.1

A powerful Flutter whiteboard and brainstorming toolkit featuring sticky notes, mind maps, flow diagrams, sketch areas, connectors, and infinite canvas support.

zeba_academy_whiteboard_ui

A powerful Flutter package that provides interactive whiteboard-inspired UI components for brainstorming, planning, collaboration, and visual thinking applications.

Build modern whiteboard experiences with sticky notes, mind maps, connectors, sketch areas, and flow diagrams using beautiful and customizable Flutter widgets.

---

✨ Features

📝 Sticky Notes

• Interactive note cards
• Custom colors and styles
• Drag-and-drop support
• Rich text content
• Shadow and elevation effects

🔗 Connectors

• Connect elements visually
• Multiple connector styles
• Animated connections
• Arrow support
• Curved and straight paths

🧠 Mind Maps

• Hierarchical node structures
• Expandable branches
• Interactive navigation
• Custom node designs
• Dynamic layouts

✏️ Sketch Areas

• Drawing canvas support
• Freehand sketching
• Annotation tools
• Eraser functionality
• Custom brush settings

📊 Flow Diagrams

• Workflow visualization
• Process mapping
• Decision trees
• Node-based layouts
• Interactive diagram components

---

📸 Preview

Create beautiful:

• Brainstorming boards
• Project planning tools
• Educational whiteboards
• Collaborative workspaces
• Process flow builders
• Mind mapping applications
• Visual note-taking apps
• Diagram editors

---

🚀 Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_whiteboard_ui: ^1.0.0

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_whiteboard_ui/zeba_academy_whiteboard_ui.dart';

---

📝 Sticky Note Example

StickyNote(
  title: 'Project Ideas',
  content: 'Build a collaborative whiteboard app.',
  color: Colors.yellow,
  width: 220,
  height: 180,
)

---

🔗 Connector Example

ConnectorLine(
  startOffset: const Offset(50, 50),
  endOffset: const Offset(250, 180),
  showArrow: true,
)

---

🧠 Mind Map Example

MindMapNode(
  title: 'Main Idea',
  children: [
    MindMapNode(
      title: 'Feature A',
    ),
    MindMapNode(
      title: 'Feature B',
    ),
  ],
)

---

✏️ Sketch Area Example

SketchBoard(
  brushSize: 4,
  enableEraser: true,
)

---

📊 Flow Diagram Example

FlowDiagram(
  nodes: [
    FlowNode(
      id: 'start',
      title: 'Start',
    ),
    FlowNode(
      id: 'process',
      title: 'Process',
    ),
  ],
)

---

🎨 Customization

All widgets are highly customizable.

StickyNote(
  title: 'Custom Note',
  content: 'Fully customizable.',
  color: Colors.blue,
  borderRadius: 20,
  elevation: 12,
)

---

📚 Included Components

Component	Description
StickyNote	Interactive note widget
ConnectorLine	Visual element connector
MindMapNode	Mind map structure widget
SketchBoard	Drawing canvas
FlowDiagram	Flowchart builder
FlowNode	Diagram node
WhiteboardCanvas	Complete workspace
WhiteboardToolbar	Editing controls
DiagramConnector	Advanced connector widget
BrainstormBoard	Brainstorming layout

---

🎯 Use Cases

Perfect for:

• Education Apps
• Whiteboard Applications
• Project Management Tools
• Collaboration Platforms
• Workflow Builders
• Diagram Editors
• Visual Learning Tools
• Planning Applications
• Productivity Software
• Design Systems

---

🌟 Why zeba_academy_whiteboard_ui?

• Easy integration
• Highly customizable
• Modern design
• Lightweight architecture
• Responsive layouts
• Production-ready widgets
• Flutter-friendly APIs
• Extensive extensibility

---

🤝 Contributing

Contributions, issues, and feature requests are welcome.

If you would like to contribute:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Submit a pull request

---

📄 License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

• Use
• Modify
• Distribute
• Share

Under the terms of the GPL-3.0 License.

For full license details visit:

https://www.gnu.org/licenses/gpl-3.0.en.html

---

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 https://sufyanism.com/ or connect with me on LinkedIn:

https://www.linkedin.com/in/sufyanism

---

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, 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: https://zeba.academy

➡ Explore hands-on courses and resources at: https://code.zeba.academy

➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy

➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

---

❤️ Support

If you find this package useful, consider:

⭐ Starring the repository

🐛 Reporting issues

💡 Suggesting improvements

🤝 Contributing to development

---

Made with Flutter ❤️ by Zeba Academy