Basic Usage

This guide covers the fundamental steps to create an organizational chart using the org_chart package.

Import the Package

First, import the package in your Dart file:

import 'package:org_chart/org_chart.dart';

Create a Basic Organizational Chart

Step 1: Create a Controller

Initialize an OrgChartController to manage your chart:

List<Map<String, dynamic>> items = [
  {"id": "1", "to": null}, // Root node
  {"id": "2", "to": "1"}, // Child of node with id '1'
  {"id": "3", "to": "1"}, // Another child of node with id '1'
];
final controller = OrgChartController<Map<String, dynamic>>(
    items: items, // List of items to display in the chart
    idProvider: (item) => item["id"], // Function to get the ID of an item
    toProvider: (item) => item["to"], // Function to get the parent ID of an item
);

Step 2: Define Your Chart

Add the OrgChart widget to your UI with nodes:

OrgChart<Map<String, dynamic>>(
  controller: controller,
  builder: (details) {
    return Container(
      width: 150,
      height: 80,
      color: Colors.blue,
      child: Center(
        child: Text(
          'Node ${details.item["id"]}',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  },
)

Using Node Details

A details parameter is provided within the builder function with useful information:

builder: (context, details) {
  return Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: details.beingDragged ? Colors.red : Colors.blue,
        width: 2,
      ),
    ),
    child: Text('Node ${details.data}'),
  );
}

Handling Node Events

You can wrap your widget within the builder method with a GestureDetector to handle events like taps and double taps:

OrgChart<Map<String, dynamic>>(
  ...
  builder: (context, details) {
    return GestureDetector(
      onTap: () {
        // Handle tap event
      },
      onDoubleTap: () {
        // Handle double tap event
      },
      child: ...
    );
  },
)

Using With Data Objects

You can easily map your custom data to nodes:

class Employee {
  final String id;
  final String name;
  final String? managerId;
  
  Employee({required this.id, required this.name, this.managerId});
}

// Create employees
final employees = [
  Employee(id: '1', name: 'CEO', managerId: null),
  Employee(id: '2', name: 'CTO', managerId: '1'),
  Employee(id: '3', name: 'CFO', managerId: '1'),
];

// Create OrgChartController
final controller = OrgChartController<Employee>(
  items: employees,
  idProvider: (employee) => employee.id,
  toProvider: (employee) => employee.managerId,
);

// Use in chart
OrgChart<Employee>(
  controller: controller,
  nodes: nodes,
)

For more advanced usage, including controlling node positions, changing orientation, and other features, check the Advanced Usage section.