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 #

🎯 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