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:

Fork the repository
Create a feature branch
Commit your changes
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