🧠 Zeba Academy Concept Map

A Flutter package for creating interactive concept maps, mind maps, and visual learning diagrams with draggable nodes, relationships, zoom, pan, custom node types, and export support.

🚀 Features

Zeba Academy Concept Map provides developers with tools to create beautiful interactive learning maps inside Flutter applications.

✨ Included Features

✅ Interactive Mind Maps ✅ Topic Relationships ✅ Draggable Nodes ✅ Drag & Drop Support ✅ Zoom & Pan Canvas ✅ Custom Node Types ✅ Custom Node Colors ✅ Node Connections ✅ JSON Export ✅ Lightweight API ✅ Flutter Friendly Architecture

📦 Installation

Add this package to your pubspec.yaml:

dependencies:
  zeba_academy_concept_map: ^0.0.1

Run:

flutter pub get

🛠 Usage

Import the package:

import 'package:zeba_academy_concept_map/zeba_academy_concept_map.dart';

Create Controller

final controller = ConceptMapController();

Add Nodes

controller.addNode(

  ConceptNode(

    id: "flutter",

    title: "Flutter",

    position: Offset(200, 200),

  ),

);

Add another node:

controller.addNode(

  ConceptNode(

    id: "widgets",

    title: "Widgets",

    position: Offset(500, 300),

  ),

);

Connect Topics

Create relationships between concepts:

controller.connect(
  "flutter",
  "widgets",
);

Result:

Flutter
    |
    |
 Widgets

🧩 Display Concept Map

Add the widget:

ConceptMap(

 controller: controller,

)

🖱️ Drag & Drop

Every node supports interaction.

Users can:

Move nodes
Rearrange concepts
Create custom layouts

No extra setup required.

🔍 Zoom & Pan

Built-in canvas navigation:

Pinch zoom
Mouse zoom
Touch movement
Large workspace support

🎨 Custom Node Types

Create custom learning nodes:

ConceptNode(

 id: "dart",

 title: "Dart",

 type: "language",

 color: Colors.orange,

 position: Offset(300,400),

)

Examples:

language
lesson
topic
category
custom

📤 Export Maps

Export your concept map:

final json =
MapExporter.json(controller);

Example output:

{
  "nodes": [
    {
      "id": "flutter",
      "title": "Flutter",
      "x": 200,
      "y": 200
    }
  ],
  "edges": [
    {
      "from": "dart",
      "to": "flutter"
    }
  ]
}

📁 Package Structure

lib/

├── zeba_academy_concept_map.dart

└── src/

    ├── models/

    │   ├── map_node.dart
    │   └── map_edge.dart

    ├── widgets/

    │   └── concept_map.dart

    ├── controllers/

    │   └── map_controller.dart

    ├── painters/

    │   └── map_painter.dart

    └── utils/

        └── exporter.dart

🎯 Use Cases

Perfect for:

📚 Education Apps 🧠 Mind Mapping Apps 🏫 Learning Platforms 🌳 Skill Tree Systems 📝 Knowledge Management 💻 Coding Courses 📊 Visual Planning Tools

📋 Requirements

Flutter:

>=3.24.0

Dart:

>=3.12.0

🤝 Contributing

Contributions are welcome.

Steps:

Fork the repository
Create a branch

git checkout -b feature/new-feature

Commit changes

git commit -m "Add new feature"

Push changes

git push origin feature/new-feature

Open a Pull Request

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about my work:

🌐 Website https://sufyanism.com/

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

🚀 Zeba Academy

Your all-in-one learning hub!

Explore courses and resources in:

Coding
Technology
Development
Real-world projects

Level up your tech skills with practical learning resources. 💻✨

🌐 Links

➡ Main Website:

https://zeba.academy

➡ Coding Resources:

https://code.zeba.academy

➡ YouTube Tutorials:

https://www.youtube.com/@zeba.academy

➡ Instagram:

https://www.instagram.com/zeba.academy/

📄 License

This project is licensed under:

GNU General Public License v3.0

You are free to:

✅ Use ✅ Study ✅ Modify ✅ Share ✅ Distribute

under the terms of GPL-3.0.

See the LICENSE file for full license details.

⭐ Support

If this package helps you:

⭐ Star the project 🤝 Contribute 📢 Share with developers

Thank you for supporting open-source development ❤️