MIKA Tree View
A treeview based on flutter_simple_treeview, adding several useful features.
Features
- Can accept an alternative widget to render if the tree is empty.
- Single or multiple nodes can be toggled as selected.
- The tree can be sorted alphabetically.
- The tree can be searched.
- A trailing widget can be attached to the nodes to provide for use cases such as providing a pop-up menu or a button to take action on a particular node.
Getting started
Add mika_treeview
as a dependency in your pubspec.yaml file.
dependencies:
mika_treeview: ^0.1.0
Add the following import to your .dart file:
import 'package:mika_treeview/mika_treeview.dart';
Usage
The tree input must be provided as a List<Map<String, dynamic>>
, for example:
Tree tree = [
{
'id': '1',
'name': 'Sales',
},
{
'id': '2',
'name': 'Accounting',
'children': [
{
'id': '5',
'name': 'Payroll',
},
{
'id': '3',
'name': 'Accounts Payable',
},
{
'id': '4',
'name': 'Accounts Receivable',
},
]
},
{
'id': '6',
'name': 'Manufacturing',
'children': [
{
'id': '7',
'name': 'Product Design',
'children': [
{
'id': '8',
'name': 'Research & Development',
}
],
},
]
},
];
NOTE: Often when pulling hierarchical data from a database table, it will look something like this:
id | name | parent_id |
---|---|---|
1 | Accounting | null |
2 | Accounts Receivable | 1 |
3 | Accounts Payable | 1 |
4 | Manufacturing | null |
5 | Product Design | 4 |
6 | Research & Development | 5 |
To save from having to convert this into the structure required by TreeView, there is a factory method Tree.fromFlat
that accepts this format and converts it to the required Tree
structure. See the API documentation for more information.
Example tree view (all options enabled):
TreeView(
tree: tree,
treeController: _controller,
selectMode: SelectMode.multiple,
values: const {'1', '3'},
onChanged: _onChangedHandler,
emptyTreeNotice: const EmptyTreeWidget(),
trailingBuilder: _trailingBuilder,
isSearchable: true,
isSorted: true,
indent: 20.0,
),
See the API documentation for more information.
Additional information
This is my very first package on pub.dev, so I'd love to hear your feedback. If you find it useful, please like it - it'll help keep me motivated. If you have any suggestions or problems, please start a discussion or submit an issue to my GitHub repo and I'll do my very best to address it promptly.