Checkable TreeView
A checkable and customizable tree view widget for Flutter.
Screenshot
Features
- Hierarchical data display
- Node selection with multi-select support
- Expandable/collapsible nodes
- Filtering and sorting capabilities
- Customizable node appearance
- "Select All" functionality
- Expand/Collapse all nodes option
Getting Started
To use the TreeView widget in your Flutter project, follow these steps:
flutter pub add checkable_treeview
Usage
Here's a basic example of how to use the TreeView widget:
import 'package:flutter/material.dart';
import 'package:checkable_treeview/checkable_treeview.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('TreeView Example'),
),
body: TreeView<String>(
nodes: [
TreeNode(
label: 'Root',
value: 'root',
icon: Icons.folder,
children: [
TreeNode(label: 'Child 1', value: 'child1'),
TreeNode(label: 'Child 2', value: 'child2'),
],
),
],
onSelectionChanged: (selectedValues) {
print('Selected values: $selectedValues');
},
),
),
);
}
}
Customization
The TreeView widget offers various customization options:
showSelectAll
: Enable/disable the "Select All" checkboxselectAllWidget
: Custom widget for the "Select All" optionshowExpandCollapseButton
: Show/hide expand/collapse buttonsinitialExpandedLevels
: Set the initial number of expanded levels
For more advanced customization, refer to the API documentation.
Advanced Features
Filtering
To implement filtering, use the filter
method of the TreeViewState
:
final treeViewKey = GlobalKey<TreeViewState<String>>();
treeViewKey.currentState?.filter('search keyword');
Sorting
To implement sorting, use the sort
method of the TreeViewState
:
final treeViewKey = GlobalKey<TreeViewState<String>>();
treeViewKey.currentState?.sort((a, b) => a.label.compareTo(b.label));
Set Select All
To set the select all state, use the setSelectAll
method of the TreeViewState
:
final treeViewKey = GlobalKey<TreeViewState<String>>();
treeViewKey.currentState?.setSelectAll(true);
Expand/Collapse All
To expand or collapse all nodes, use the expandAll
and collapseAll
methods of the TreeViewState
:
final treeViewKey = GlobalKey<TreeViewState<String>>();
treeViewKey.currentState?.expandAll();
treeViewKey.currentState?.collapseAll();
Get Selected Nodes
To get the selected nodes, use the getSelectedNodes
method of the TreeViewState
:
final treeViewKey = GlobalKey<TreeViewState<String>>();
final selectedNodes = treeViewKey.currentState?.getSelectedNodes();
Get Selected Values
To get the selected values, use the getSelectedValues
method of the TreeViewState
:
final treeViewKey = GlobalKey<TreeViewState<String>>();
final selectedValues = treeViewKey.currentState?.getSelectedValues();
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Libraries
- checkable_treeview
- A customizable tree view widget for Flutter.