🏢 Zeba Academy Org Chart UI

Flutter Package Documentation

📌 Overview

Zeba Academy Org Chart UI is a Flutter package for building interactive organizational charts with hierarchy trees, expandable nodes, employee cards, and department-based structure support.

✨ Features

  • 🌳 Hierarchy tree structure
  • 📂 Expandable / collapsible nodes
  • 👤 Employee profile cards
  • 🏢 Department support
  • ⚡ Lightweight and easy integration

📦 Installation

Add dependency:

dependencies:
  zeba_academy_org_chart_ui: ^0.0.1

Run:

flutter pub get

🚀 Usage

import 'package:flutter/material.dart';
import 'package:zeba_academy_org_chart_ui/zeba_academy_org_chart_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final root = OrgNode(
      id: "1",
      name: "CEO",
      role: "Chief Executive Officer",
      department: "Management",
      children: [
        OrgNode(
          id: "2",
          name: "CTO",
          role: "Tech Lead",
          department: "IT",
        ),
        OrgNode(
          id: "3",
          name: "HR Head",
          role: "HR Manager",
          department: "HR",
        ),
      ],
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Org Chart")),
        body: OrgChart(root: root),
      ),
    );
  }
}

🧱 Components

OrgChart

OrgChart(root: rootNode);

OrgNode

OrgNode(
  id: "1",
  name: "CEO",
  role: "Leader",
  department: "Management",
  children: [],
);

📊 Example Structure

CEO
├── CTO
│ └── Developer
└── HR Head

⚠️ Limitations

  • No connector lines yet
  • No zoom/pan
  • No drag & drop
  • Basic tree layout

🛣 Roadmap

  • Connector lines
  • Zoom & pan
  • Drag & drop editing
  • Animations
  • Horizontal layout
  • Department colors

👨‍💻 About Me

Sufyan bin Uzayr
https://sufyanism.com
https://www.linkedin.com/in/sufyanism

🎓 Zeba Academy

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

📜 License

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

⭐ Support

Star the repo if you like this package.

Libraries

zeba_academy_org_chart_ui