Controller Basics

Both OrgChartController and GenogramController extend the BaseGraphController class, sharing common functionality for positioning, styling, and interacting with graph nodes.

Common Properties

Property	Type	Description
boxSize	Size	Size of each node box (width × height)
spacing	double	Horizontal spacing between adjacent nodes
runSpacing	double	Vertical spacing between rows/generations
orientation	GraphOrientation	Layout direction (topToBottom or leftToRight)
idProvider	String Function(E data)	Function to extract a unique identifier from data

Common Methods

Initialization

Both controllers require a list of data items and an ID provider function:

OrgChartController

final controller = OrgChartController<Employee>(
  items: employees,
  idProvider: (employee) => employee.id.toString(),
  toProvider: (employee) => employee.managerId?.toString(),
  boxSize: const Size(180, 100),
  spacing: 25,
  runSpacing: 50,
);

GenogramController

final controller = GenogramController<Person>(
  items: familyMembers,
  idProvider: (person) => person.id.toString(),
  fatherProvider: (person) => person.fatherId?.toString(),
  motherProvider: (person) => person.motherId?.toString(),
  spousesProvider: (person) => person.spouseIds?.map((id) => id.toString()).toList(),
  genderProvider: (person) => person.isMale ? 0 : 1,
  boxSize: const Size(150, 150),
  spacing: 30,
  runSpacing: 60,
);

Modifying Data

// Add a new item to the graph
controller.addItem(newPerson);

// Add multiple items at once (v5.0.0-alpha.3+)
controller.addItems([newPerson1, newPerson2, newPerson3]);

// Clear all items from the graph (v5.0.0-alpha.3+)
controller.clearItems();

// Update the entire dataset
controller.items = updatedItems;

note

As of version 5.0.0-alpha.3, both addItem and addItems will replace any existing node with the same ID instead of creating duplicates.

Layout & Positioning

// Calculate positions of all nodes
controller.calculatePosition();

// Get the total size of the graph
Size graphSize = controller.getSize();

// Center a specific node
await controller.centerNode(
  '123', // Node ID to center
  scale: 1.0, // Optional scale level
  animate: true,
  duration: const Duration(milliseconds: 300),
);

Exporting

Both controllers support exporting the chart as an image or PDF:

// Export as image
Uint8List? pngData = await controller.exportAsImage();

// Export as PDF
pw.Document? pdfDoc = await controller.exportAsPdf();

Orientation

Both controllers support two orientation modes:

• GraphOrientation.topToBottom - Nodes flow from top to bottom (default)
• GraphOrientation.leftToRight - Nodes flow from left to right

You can switch between these modes:

// Changing orientation
controller.switchOrientation(); // Toggle between topToBottom and leftToRight
controller.switchOrientation(
    orientation: GraphOrientation.leftToRight,   // Set specific orientation
    center: true  // Center the graph view after switching
);

Node Overlapping Detection

// Get nodes that overlap with a specific node
List<Node<E>> overlapping = controller.getOverlapping(someNode);

This functionality is useful for collision detection or implementing drag-and-drop behavior between nodes.