force_graph

A Flutter package for interactive, force-directed graph visualization using physics simulation.

Features

  • Force-directed graph layout with customizable repulsion and attraction.
  • Interactive zoom, pan, and recenter controls.
  • Node and edge selection with tooltips.
  • Animated transitions for viewport movement and zoom.
  • Support for custom node and edge styles.
  • Optional auto-move for nodes.

Getting Started

Add the package to your pubspec.yaml:

dependencies:
  force_graph: latest

Import the main widget and controller:

import 'package:force_graph/force_graph.dart';

Usage

Create your graph data:

final nodes = [
  ForceGraphNodeData.from(
    id: 'A',
    edges: [
      ForceGraphEdgeData.from(
        source: 'A',
        target: 'B',
        similarity: 0.8,
      ),
    ],
    title: 'Node A',
  ),
  ForceGraphNodeData.from(
    id: 'B',
    edges: [],
    title: 'Node B',
  ),
];

Initialize the controller and widget:

final controller = ForceGraphController(nodes: nodes);

ForceGraphWidget(
  controller: controller,
  showControlBar: true,
  nodeTooltipBuilder: (context, node) => Text(node.data.title),
  edgeTooltipBuilder: (context, edge) => Text(
    '${edge.data.source} → ${edge.data.target}',
  ),
);

Customization

  • Adjust layout parameters via ForceGraphController (iterations, repulsion, attraction).
  • Provide custom control bar widgets using customControlBarBuilder.
  • Listen for selection changes with onSelectionChanged.

Example

See the example directory for a full Flutter app using this package.

License

See LICENSE for details.

Contributing

Feel free to open issues or pull requests. For questions, contact the maintainer.

Libraries

force_graph