📊 Flutter Org Chart #

A high-performance, fully customizable organizational chart and genogram package for Flutter

📚 Documentation | 🚀 Live Demo | 💻 GitHub | 📦 pub.dev

✨ Features #

🚀 Quick Start #

Installation #

Add to your pubspec.yaml:

dependencies:
  org_chart: ^5.0.0-alpha.5

Basic Usage #

import 'package:org_chart/org_chart.dart';

// Create controller
final controller = OrgChartController<MyData>(
  items: [
    Node(id: '1', data: MyData('CEO')),
    Node(id: '2', data: MyData('CTO'), parentId: '1'),
    Node(id: '3', data: MyData('CFO'), parentId: '1'),
  ],
);

// Build chart
OrgChart<MyData>(
  controller: controller,
  nodeBuilder: (context, details) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(details.item.data.title),
      ),
    );
  },
)

📋 Key Features #

🏢 Organizational Charts #

• Multiple Orientations: Top-to-bottom, bottom-to-top, left-to-right, right-to-left
• Flexible Layouts: Automatic node positioning with customizable spacing
• Interactive Nodes: Drag & drop to reorganize structure
• Smart Rendering: Only renders visible nodes for optimal performance

👨‍👩‍👧‍👦 Genogram Features #

• Family Relationships: Visualize complex family structures
• Marriage Indicators: Show relationship status and types
• Gender Shapes: Square for male, circle for female, diamond for other
• Relationship Lines: Customizable edge styles for different relationships

⚡ Performance Optimizations #

• QuadTree Spatial Indexing: O(log n) overlap detection
• Intelligent Caching: 400x faster node level calculations
• Parent-Child Indexing: O(1) child node lookups
• Viewport Culling: Only render visible nodes
• Debounced Operations: Smooth 60 FPS during interactions

🎨 Customization Options #

• Node Styling: Complete control over node appearance
• Edge Configuration: Arrow styles, colors, and paths
• Animations: Smooth transitions for all interactions
• Theming: Full support for light/dark themes
• Responsive: Adapts to different screen sizes

📖 Documentation #

Visit our comprehensive documentation for:

• 📝 Getting Started Guide
• 🎯 Interactive Examples
• 🔧 API Reference
• 💡 Best Practices

** Note: Documentation is to be updated soon, a lot of changes are being made to the package.

Export Capabilities #

// Export as image
final image = await controller.exportAsImage();

// Export as PDF (via example app)
await controller.exportAsPdf();

## 🌟 What's New in v5.0.0-alpha.5

- **⚡ Major Performance Improvements**: Up to 400x faster for large charts
- **🔍 Spatial Indexing**: QuadTree implementation for efficient overlap detection
- **📊 Enhanced Testing**: Comprehensive test suite with performance benchmarks
- **🔧 Better API**: More intuitive controller methods and callbacks

## 🗺️ Roadmap

Track our progress on the [GitHub Project Board](https://github.com/users/ahnaineh/projects/3)

### ✅ Completed
- High-performance rendering engine
- Comprehensive test coverage
- Multiple orientation support
- Genogram relationship visualization
- Export functionality

### 🚧 In Progress
- Arrow animations
- Enhanced documentation

### 📋 Planned
- AI-powered auto-layout
- Real-time collaboration
- Advanced analytics
- More export formats

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](https://github.com/ahnaineh/org_chart/blob/main/CONTRIBUTING.md) for details.

### Ways to Contribute
- 🐛 [Report bugs](https://github.com/ahnaineh/org_chart/issues/new?template=bug_report.md)
- 💡 [Request features](https://github.com/ahnaineh/org_chart/issues/new?template=feature_request.md)
- 📝 [Improve documentation](https://github.com/ahnaineh/org_chart/tree/main/doc)
- 🔧 [Submit pull requests](https://github.com/ahnaineh/org_chart/pulls)


<div align="center">
  <a href="https://github.com/ahnaineh/org_chart/stargazers">⭐ Star us on GitHub!</a>
</div>