generate_tree 0.0.3

Create beautiful tree structure in flutter

generate_tree package provides you the facility to create a tree inside your app. you just only need a list map data or json data to generate 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

-> 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: ^0.0.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