with generate_tree you can create a tree structure with checkbox option inside your app. It needs less code, you just need a List map to create this tree.

Usage

To use this package, add generate_tree as a dependency in your pubspec.yaml file.

Features

• Single tick checkbox
  • set 'selectOneToAll' property 'false' to select only one at a time
• Multi select checkbox
  • set 'selectOneToAll' property 'true' to select all children
  • get all node details in onChecked()
• change the colors of checkbox
• change the colors of text
• onChecked function provides the value
  • node: all child values and current selected node values
  • checked: provides the bool value that the checkbox is checked or not
  • commonID: returns the common id when selectOneToAll is true

Getting started

Follow this steps to use this package

Install

generate_tree: ^2.2.3

Import package

import 'generate_tree/generate_tree.dart';

first you will need a data list:

final List data = [
      {
        "checked": true,
        "children": [
          {
            "checked": true,
            "show": false,
            "children": [],
            "id": 11,
            "pid": 1,
            "commonID": 1,
            "title": "Child title 11"
          }
        ],
        "id": 1,
        "pid": 0,
        "commonID": 1,
        "show": false,
        "title": "Parent title 1"
      },
      {
        "checked": true,
        "show": false,
        "children": [],
        "id": 2,
        "commonID": 2,
        "pid": 0,
        "title": "Parent title 2"
      },
      {
        "checked": true,
        "children": [
          {
            "checked": true,
            "children": [],
            "id": 31,
            "commonID": 3,
            "pid": 3,
            "show": false,
            "title": "Parent title 3.1"
          },
          {
            "checked": true,
            "children": [
              {
                "checked": true,
                "children": [],
                "id": 311,
                "commonID": 3,
                "pid": 31,
                "show": false,
                "title": "Parent title 3.1.1"
              },
              {
                "checked": true,
                "children": [],
                "id": 312,
                "commonID": 3,
                "pid": 31,
                "show": false,
                "title": "Parent title 3.1.2"
              }
            ],
            "id": 32,
            "commonID": 3,
            "pid": 2,
            "show": false,
            "title": "Parent title 3.2"
          }
        ],
        "id": 3,
        "commonID": 3,
        "pid": 0,
        "show": false,
        "title": "Parent title 3"
      }
    ];

then pass the data to TreeNode.fromJson() to get the List

final List<TreeNode> treeNodes =
        data.map((item) => TreeNode.fromJson(item)).toList();

Now pass this treeNodes to GenerateTree(data: treeNodes) to generate the tree

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Generate Tree'),
    ),
    body: GenerateTree(
      data: treeNodes,
      selectOneToAll: false,
      textColor: Colors.blue,
      onChecked: (node, checked, commonID) {
        print('isChecked : $checked');
        print('common Node ID : ${commonID}');
        print(
            'children node data : ${node.children.map((e) => '${e.title}')}');
      },
      checkBoxColor: Colors.blue,
      childrenPadding: EdgeInsets.only(left: 40, top: 0, right: 0, bottom: 0),
    ),
  );
}

Developer

Gajendra Somawat

Instagram: gajendra_menaria9

Additional Details

for more details visit example page or contact on Instagram