novident_tree_view 1.1.0
novident_tree_view: ^1.1.0 copied to clipboard
A flexible internal Novident library for visualizing hierarchical structures with full control over nodes
🌳 Novident Tree View #
This package provides a flexible solution for displaying hierarchical data structures while giving developers full control over node management. Unlike traditional tree implementations that enforce controller-based architectures, this package operates on simple data types that you extend to create your node hierarchy. Nodes become self-aware of their state changes through Listenable patterns, enabling reactive updates without complex state management.
✨ Highlights #
- No controller required — nodes extend
Node/NodeContainerdirectly; the tree reacts to node changes viaListenablenotifications. - Policy‑as‑code builders — each node type gets its own
NodeComponentBuilder; the tree picks the first builder whosevalidate()returnstrue. - Full drag‑and‑drop by default — three drop zones per row (above / inside / below), real‑time border feedback, no‑op detection, auto‑expand on hover, Live error badge on the drag card.
- Scrivener-like example — complete desktop workspace shipped in
example/with a binder sidebar, sheet‑of‑paper editor, breadcrumb navigation, and structured content.
📦 Installation #
Add to your pubspec.yaml:
dependencies:
novident_tree_view: <latest>
novident_nodes: <latest>
🚀 Basic usage #
import 'package:novident_tree_view/novident_tree_view.dart';
final Widget tree = TreeView(
root: myRootContainer,
configuration: TreeConfiguration(
builders: [FolderBuilder(), FileBuilder()],
dragConfig: DraggableConfigurations.simple(
feedback: (node, ctx) => MyDragCard(node: node),
),
indent: 14,
sharedData: {'theme': myTheme},
activateDragAndDropFeature: true,
),
);
🔎 Resources #
Since there's a lot to explain and implement, we prefer to provide a separate document for each section.
| Document | Covers |
|---|---|
| 📲 Components | How NodeComponentBuilder renders nodes, the ComponentContext API, the isDragging flag, the validate() discovery system |
| 🌲 Tree Configuration | All TreeConfiguration properties: builders, dragConfig, indent, shrinkWrap, sharedData, listView, zone heights, etc. |
| 🤏 Draggable Configurations | DraggableConfigurations — feedback widget, hover expansion, long‑press mode, drag axis, child‑when‑dragging |
| 📏 Indentation Configuration | IndentConfiguration — static per‑level indentation, dynamic per‑node builders, system‑file presets |
| 📜 Drag and Drop details | NovDragAndDropDetails — drop‑position calculation, three‑zone mapping (mapDropPosition), global vs local offset |
| ✍️ Nodes Gestures | NodeDragGestures — lifecycle callbacks (onWillAcceptWithDetails, onAcceptWithDetails, onDragStart, onDragCanceled, …) |
📝 Recipes #
- 🗃️ Tree File — recreate a file tree quickly: node types (
File,Directory,Root), builders, configuration, and drag‑and‑drop wiring.
More recipes will be added later
🌳 Contributing #
We greatly appreciate your time and effort.
To keep the project consistent and maintainable, we have a few guidelines that we ask all contributors to follow.
See Contributing for more details.