A Flutter package for creating interactive progression tree maps

Progression TreeMap

Progression TreeMap is an open source Flutter package, that is used to display a tree list, to the ui, you can use it to interpret any complex tree or progression map to the ui of your app and customize it to your liking.

Example Usages:

Add Dependency

Install and import the package. Then just customize its parameters.

dependencies:
  flutter:
    sdk: flutter
  progression_tree_map: ^0.5.0

How to use

Create a list of nodes, as well as its sublist as below:

  Map<TreeNode?, List<TreeNode>> nodes =
{TreeNode():[
  TreeNode(nodes: [
    TreeNode(),
    TreeNode(nodes: [
      TreeNode(nodes: [
        TreeNode(nodes: [
          TreeNode(), TreeNode()])
      ])])])]
};

Screenshots & Implementations

Example 1 – Colored Nodes & Outlines

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryColor: Colors.grey.shade300,
circleBoundaryShade: false,
nodeSeparationAngleFac: 1.3,
globalNodeSize: 20,
centerNodeSize: 40,
circleBoundaryStrokeWidth: 1.5,
linesStrokeWidth: 2,
linesStrokeColor: Colors.blueAccent,
nodeDecoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.blueAccent))

Example 2 – Colored Nodes & Icons

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryPaintingStyle: PaintingStyle.fill,
circleBoundaryColor: Colors.deepPurpleAccent,
nodePlacement: NodesPlacement.border,
nodeSeparationAngleFac: 3,
globalNodeSize: 30,
centerNodeSize: 60,
linesStartFromOrigin: true,
linesStrokeWidth: 2,
linesStrokeColor: Colors.cyanAccent,
nodeDecoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.cyanAccent))

Example 3 – Glowing Nodes & Background Text

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryPaintingStyle: PaintingStyle.fill,
circleBoundaryColor: Colors.red,
nodePlacement: NodesPlacement.centerOut,
nodeSeparationAngleFac: 1.2,
globalNodeSize: 20,
centerNodeSize: 40,
linesStrokeWidth: 3,
nodeDecoration: const BoxDecoration(
shape: BoxShape.circle, gradient:
RadialGradient(
colors: [Colors.white, Colors.white30])))

Example 4 – Collection & Ui Items

ProgressionTreeMap(
treeNodes: nodes,
circleBoundaryPaintingStyle: PaintingStyle.fill,
circleBoundaryColor: Colors.deepOrangeAccent,
nodePlacement: NodesPlacement.centerIn,
nodeSeparationAngleFac: 1.3,
centerNodeSize: 60,
linesStartFromOrigin: false,
linesStrokeWidth: 3,
linesStrokeColor: Colors.white10)),

More info

A TreeNode can have several properties, you can customize each individually as below:

TreeNode(
child: Icon(
Icons.restaurant_menu,
color: Colors.black,
size: 32,
),
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
size: 30)

Must be added to ProgressionTreeMap as a map of Map<TreeNode?, List<TreeNode>>

Map<TreeNode?, List<TreeNode>>  nodes =
{
  const TreeNode(): [
    const TreeNode(nodes: [
      TreeNode(
        child: Icon(Icons.lunch_dining_rounded),
      ),
      TreeNode(
        child: Icon(Icons.ramen_dining),
      )
    ])]
}

Adding to the tree as follows:

ProgressionTreeMap(
treeNodes: nodes
),

Very customizable, feel free to customize however you like! 😎

GitHub

View Github