DOCSEARCHbyAlgolia
Submit Docs

org_chart Documentation

website·Indexed 31 days ago

https://ahnaineh.github.io/org_chart

A high-performance, customizable Flutter library for visualizing hierarchical organizational structures and complex family trees. It includes specialized tools like OrgChartController for organizational hierarchies and GenogramController for multi-generational family trees, supporting custom node builders, relationship styling, and cross-platform rendering.

Tokens
13K
Snippets
59
Records
74
Agent score
73%

What's inside org_chart

  1. Overview of the Flutter org_chart library

    The org_chart library is a high-performance, customizable, cross-platform Flutter package designed for creating organizational charts and family genograms. Key capabilities include:

    • Performance: Uses QuadTree optimization to support 1000+ nodes.
    • Interactivity: Supports drag-and-drop, zooming, panning, and collapsing nodes.
    • Platform Support: Compatible with iOS, Android, Web, and Desktop.
    • Customization: Provides full control over the appearance of nodes and edges.

  2. Understand Genogram core visualization concepts

    The Genogram tool is designed to visualize complex family relationships using multi-generational trees. Key capabilities include:

    • Parental Mapping: Each node supports a designated father and mother.
    • Marital Complexity: Support for multiple spouses and marriages.
    • Automated Layout: Positioning is handled automatically based on gender and generation.
    • Relationship Indicators: Visual lines are used to represent marriages and divorces.

  3. Migrate to OrgChart v5.0.0

    Upgrading to version 5.0.0 involves a major architecture redesign and several breaking changes. Key changes include a new API for OrgChartController initialization, an updated node data structure, and a new event handling system. A new Genogram widget with advanced family tree features is also included.

  4. Understand OrgChart architecture

    The OrgChart library is divided into three primary architectural components:

    • Controller: Responsible for managing the data and the layout logic.
    • Widget: Handles the rendering of the visualization.
    • Model: Represents the custom data structures provided by the user.

  5. Understand OrgChart core concepts and constraints

    The OrgChart library is designed to visualize hierarchical organizational structures. It operates under the following constraints and features:

    • Single Parent: Each node can have at most one parent.
    • Multiple Children: Nodes can have an unlimited number of children.
    • Tree Layout: The library provides automatic positioning of nodes.
    • Interactions: Built-in support for drag-and-drop, zooming, panning, and collapsing nodes.

  6. Understand Genogram architecture

    The Genogram system is divided into three primary architectural components:

    • Controller: Responsible for managing family data and the logic of relationships.
    • Widget: The UI layer that renders the family tree visualization.
    • Model: The custom data structures used to define family members.

  7. Check OrgChart version compatibility with Flutter and Dart SDKs

    Ensure your environment meets the minimum SDK requirements for the installed version of the OrgChart library. Only version 5.0.x is currently active; all previous versions (1.0.x through 4.0.x) are deprecated.
    VersionFlutter SDKDart SDKStatus
    5.0.x>=3.0.0>=3.0.0✅ Active
    4.0.x>=2.10.0>=2.17.0❌ Deprecated
    3.0.x>=2.10.0>=2.17.0❌ Deprecated
    2.0.x>=2.5.0>=2.14.0❌ Deprecated
    1.0.x>=2.0.0>=2.12.0❌ Deprecated

  8. Implement a custom node builder for Genogram

    The builder parameter of the Genogram widget defines how each person in the family tree is rendered. It provides a NodeBuilderDetails<T> object containing the following properties:

    • item: The data object for the family member.
    • level: The generation level (1 is the oldest).
    • hideNodes: A function to toggle the visibility of descendants.
    • nodesHidden: Boolean indicating if descendants are currently hidden.
    • isBeingDragged: Boolean indicating if the node is currently being dragged.
    • isOverlapped: Boolean indicating if another node is overlapping this one.
    class NodeBuilderDetails<T> {
  final T item;
  final int level;
  final Function hideNodes;
  final bool nodesHidden;
  final bool isBeingDragged;
  final bool isOverlapped;
}

  9. Create a custom node builder for family members

    The builder property of the Genogram widget accepts a function that returns a widget for each node. The NodeBuilderDetails<T> object provides access to the data item and state information, such as isOverlapped, allowing for dynamic styling based on the member's gender or current state.
    Widget buildFamilyMemberNode(NodeBuilderDetails<FamilyMember> details) {
  final member = details.item;
  final isMale = controller.genderProvider(member) == 0;
  
  return GestureDetector(
    onDoubleTap: () => showMemberDetails(member),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: details.isOverlapped ? Colors.green.shade500 : (isMale ? Colors.blue.shade300 : Colors.pink.shade300),
          width: details.isOverlapped ? 3 : 2,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Text(member.name),
          Text('${member.birthYear} - ${member.deathYear}'),
        ],
      ),
    ),
  );
}

  10. Implement context menus in OrgChart

    Add right-click or long-press menus to nodes using the optionsBuilder to define the menu UI and onOptionSelect to handle the selection event.
    OrgChart<Employee>(
  optionsBuilder: (BuildContext context, Employee employee) {
    return Card(
      elevation: 8,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            leading: Icon(Icons.edit),
            title: Text('Edit'),
            onTap: () => editEmployee(employee),
          ),
          ListTile(
            leading: Icon(Icons.delete),
            title: Text('Remove'),
            onTap: () => removeEmployee(employee),
          ),
        ],
      ),
    );
  },
  onOptionSelect: (Employee employee) {
    Navigator.pop(context);
  },
)

  12. Choose between OrgChart and Genogram chart types

    Depending on the relationship structure you need to visualize, choose between OrgChart and Genogram.

    Use OrgChart for hierarchical or tree-like structures such as corporate hierarchies, team management, project structures, decision trees, file systems, or menu systems.

    Use Genogram for complex familial or biological relationships such as family trees, medical history, social work, genetic studies, anthropology, or psychology.