Flutter Tree

cover

GitHub stars pub package Run Test

Version1

Online Example

Install

dependencies:
  flutter_tree: ^2.0.0

Uasge

First Step

/// Your server data
final serverData = [
  {
    "checked": true,
    "children": [
      {
        "checked": true,
        "show": false,
        "children": [],
        "id": 11,
        "pid": 1,
        "text": "Child title 11",
      },
    ],
    "id": 1,
    "pid": 0,
    "show": false,
    "text": "Parent title 1",
  },
  {
    "checked": true,
    "show": false,
    "children": [],
    "id": 2,
    "pid": 0,
    "text": "Parent title 2",
  },
  {
    "checked": true,
    "children": [],
    "id": 3,
    "pid": 0,
    "show": false,
    "text": "Parent title 3",
  },
];

/// Map server data to tree node data
TreeNodeData mapServerDataToTreeData(Map data) {
  return TreeNodeData(
    extra: data,
    title: data['text'],
    expaned: data['show'],
    checked: data['checked'],
    children:
        List.from(data['children'].map((x) => mapServerDataToTreeData(x))),
  );
}

/// Generate tree data
List<TreeNodeData> treeData = List.generate(
  serverData.length,
  (index) => mapServerDataToTreeData(serverData[index]),
);

Basic

TreeView(data: treeData)

basic

Show Filter

TreeView(
  data: treeData,
  showFilter: true,
),

filter

Checked

TreeView(
  data: treeData,
  showCheckBox: true,
),

checked

Show Actions

/// Make sure pass `append` function.

TreeView(
  data: treeData,
  showActions: true,
  showCheckBox: true,
  append: (parent) {
    print(parent.extra);
    return TreeNodeData(
      title: 'Appended',
      expaned: true,
      checked: true,
      children: [],
    );
  },
),

actions

Bind Events

TreeView(
  data: treeData,
  showActions: true,
  showCheckBox: true,
  append: (parent) {
    return TreeNodeData(
      title: 'Appended',
      expaned: true,
      checked: true,
      children: [],
    );
  },
  onTap: (node) {
    print(node.extra);
  },
  onCheck: (checked, node) {
    print(checked);
    print(node.extra);
  },
  onCollapse: (node) {
    print(node.extra);
  },
  onExpand: (node) {
    print(node.extra);
  },
  onAppend: (node, parent) {
    print(node.extra);
    print(parent.extra);
  },
  onRemove: (node, parent) {
    print(node.extra);
    print(parent.extra);
  },
),

Lazy load

/// Create your load function, return list of TreeNodeData

Future<List<TreeNodeData>> _load(TreeNodeData parent) async {
  await Future.delayed(const Duration(seconds: 1));
  final data = [
    TreeNodeData(
      title: 'load1',
      expaned: false,
      checked: true,
      children: [],
      extra: null,
    ),
    TreeNodeData(
      title: 'load2',
      expaned: false,
      checked: false,
      children: [],
      extra: null,
    ),
  ];

  return data;
}

TreeView(
  data: treeData,
  lazy: true,
  load: _load,
  onLoad: (node) {
    print('onLoad');
    print(node.extra);
  },
),

load

All Props

propertytypedefaultdescriptionrequired
dataList<TreeNodeData>[]Tree datatrue
lazyboolfalseLazy load node datafalse
iconWidgetIcons.expand_moreTree iconfalse
offsetLeftdouble24.0Item padding leftfalse
showFilterboolfalseShow tree filterfalse
showActionsboolfalseShow node actionsfalse
showCheckBoxboolfalseShow node checkboxfalse
onTapFunction(TreeNodeData)nullNode tap callbackfalse
onExpandFunction(TreeNodeData)nullNode expaned callbackfalse
onLoadFunction(TreeNodeData)nullNode lazy load callbackfalse
onCollapseFunction(TreeNodeData)nullNode collapse callbackfalse
onCheckFunction(bool, TreeNodeData)nullNode check callbackfalse
onAppendFunction(TreeNodeData, TreeNodeData)nullNode append callbackfalse
onRemoveFunction(TreeNodeData, TreeNodeData)nullNode remove callbackfalse
appendFunction(TreeNodeData)nullAppend node data functionfalse
loadFuture<List<TreeNodeData>> Function(TreeNodeData)nullLoad node data functionfalse

TODO

  • Draggable tree
  • Custom filter function

Contribute

  1. Fork it (https://github.com/xrr2016/flutter_tree.git)
  2. Create your feature branch (git checkout -b feature/foo)
  3. Commit your changes (git commit -am 'Add some foo')
  4. Push to the branch (git push origin feature/foo)
  5. Create a new Pull Request

License

MIT

Stargazers over time

Stargazers over time

Libraries

flutter_tree