progression_tree_map

Description:

progression tree map

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.
How to use #
Add Dependency #
Add this to your pubspec.yaml dependencies:
dependencies:

progression_tree_map: ^1.1.0
copied to clipboard
Then make sure to call the import
import 'package:progression_tree_map/progression_tree_map.dart';
copied to clipboard
The package examines the left-side tree diagram and generates the user interface (UI) on the right.

Example Usages: #
Create a variable with 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()])
])
])
])
]
};
copied to clipboard
Then call the ProgressionTreeMap as below
ProgressionTreeMap(treeNodes: nodes);
copied to clipboard

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)
)
copied to clipboard

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)
)
copied to clipboard

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])
)
)
copied to clipboard

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)
),
copied to clipboard


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
)
copied to clipboard
Very customizable, feel free to customize however you like! 😎

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter