Skip to content

Latest commit

 

History

History
255 lines (209 loc) · 6.37 KB

README.md

File metadata and controls

255 lines (209 loc) · 6.37 KB

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

property type default description required
data List<TreeNodeData> [] Tree data true
lazy bool false Lazy load node data false
icon Widget Icons.expand_more Tree icon false
offsetLeft double 24.0 Item padding left false
showFilter bool false Show tree filter false
showActions bool false Show node actions false
showCheckBox bool false Show node checkbox false
onTap Function(TreeNodeData) null Node tap callback false
onExpand Function(TreeNodeData) null Node expaned callback false
onLoad Function(TreeNodeData) null Node lazy load callback false
onCollapse Function(TreeNodeData) null Node collapse callback false
onCheck Function(bool, TreeNodeData) null Node check callback false
onAppend Function(TreeNodeData, TreeNodeData) null Node append callback false
onRemove Function(TreeNodeData, TreeNodeData) null Node remove callback false
append Function(TreeNodeData) null Append node data function false
load Future<List<TreeNodeData>> Function(TreeNodeData) null Load node data function false

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