https://github.com/melbournedeveloper/arborio
An elegant, flexible Treeview with Animation. Display hierarchical data in Flutter.
https://github.com/melbournedeveloper/arborio
dart flutter treeview widget
Last synced: 3 months ago
JSON representation
An elegant, flexible Treeview with Animation. Display hierarchical data in Flutter.
- Host: GitHub
- URL: https://github.com/melbournedeveloper/arborio
- Owner: MelbourneDeveloper
- License: bsd-3-clause
- Created: 2024-01-05T06:53:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-15T00:41:24.000Z (over 1 year ago)
- Last Synced: 2025-04-04T04:41:32.999Z (12 months ago)
- Topics: dart, flutter, treeview, widget
- Language: Dart
- Homepage: https://pub.dev/packages/arborio
- Size: 24.2 MB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Arborio
[](https://github.com/melbournedeveloper/arborio/actions/workflows/ci.yml)
[](https://github.com/melbournedeveloper/arborio/actions/workflows/ci.yml)
An elegant, flexible Treeview with Animation. Display hierarchical data in Flutter.
Check out the live sample app [here](https://melbournedeveloper.github.io/arborio/)
## Features
- 🌳 Hierarchical data display with unlimited nesting
- ✨ Smooth animations for expand/collapse operations
- 🎨 Fully customizable node and expander appearance
- 🔑 Global key support for programmatic control
- 🎯 Type-safe with generics support
- 📱 Responsive and mobile-friendly
## Basic Usage
Here's a simple example of how to create a tree view:
```dart
import 'package:arborio/tree_view.dart';
import 'package:flutter/material.dart';
enum ElementType { file, folder }
// Define your data type
class FileSystemElement {
FileSystemElement(this.name, this.type);
final String name;
final ElementType type;
}
// Create tree nodes
final nodes = [
TreeNode(
const Key('root'),
FileSystemElement('Documents', ElementType.folder),
[
TreeNode(
const Key('child1'),
FileSystemElement('report.pdf', ElementType.file),
),
],
),
];
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
body: TreeView(
nodes: nodes,
builder: (context, node, isSelected, animation, select) => Row(
children: [
Icon(
node.data.type == ElementType.folder
? Icons.folder
: Icons.file_copy,
),
Text(node.data.name),
],
),
expanderBuilder: (context, isExpanded, animation) =>
RotationTransition(
turns: animation,
child: const Icon(Icons.chevron_right),
),
),
),
debugShowCheckedModeBanner: false,
);
}
```
## Using TreeViewKey
The `TreeViewKey` allows programmatic control of the tree view:
```dart
// Create a key
const treeViewKey = TreeViewKey();
// Use it in your TreeView
TreeView(
key: treeViewKey,
nodes: nodes,
builder: (context, node, isSelected, animation, select) {
// ... node builder implementation
},
expanderBuilder: (context, isExpanded, animation) {
return RotationTransition(
turns: animation,
child: const Icon(Icons.chevron_right),
);
},
)
```
## Node Management
You can dynamically add or remove nodes using the tree's state. This example uses mutable state for simplicitly, but you can achieve the same result with immutable data classes.
```dart
// Add a new node
FloatingActionButton(
onPressed: () => setState(() {
nodes.add(
TreeNode(
const Key('newnode'),
FileSystemElement('New Folder', ElementType.folder),
),
);
}),
child: const Icon(Icons.add),
),
// Expand/collapse all nodes
FloatingActionButton(
onPressed: () => setState(() {
treeViewKey.currentState?.expandAll();
}),
child: const Icon(Icons.expand),
),
FloatingActionButton(
onPressed: () => setState(() {
treeViewKey.currentState?.collapseAll();
}),
child: const Icon(Icons.compress),
),
```
## Handling Node Events
```dart
TreeView(
onExpansionChanged: (node, expanded) {
print('Node ${node.data.name} is now ${expanded ? 'expanded' : 'collapsed'}');
},
onSelectionChanged: (node) {
print('Selected node: ${node.data.name}');
},
expanderBuilder: (context, isExpanded, animation) {
return RotationTransition(
turns: animation,
child: const Icon(Icons.chevron_right),
);
},
)
```
## Customizing Node Appearance
The `builder` parameter gives you full control over node appearance, along with an animation variable so you can respond to changes over time:
```dart
builder: (context, node, isSelected, animation, select) {
return InkWell(
onTap: () => select(node),
child: Container(
color: isSelected ? Colors.blue.withOpacity(0.1) : null,
padding: const EdgeInsets.all(8),
child: Row(
children: [
if (node.data.type == ElementType.folder)
RotationTransition(
turns: animation,
child: const Icon(Icons.folder),
)
else
const Icon(Icons.file_copy),
const SizedBox(width: 8),
Text(node.data.name),
],
),
),
);
}
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the BSD 3-Clause - see the LICENSE file for details.