Best Tree View Packages for Flutter

In Flutter, we use a tree view as a graphical control widget that presents a hierarchical view of its children. Here are the best packages to display tree view in Flutter

flutter_treeview 

fluttre_treeview provides a variety of options for customizing the tree’s theme and handling user interaction with controller. It allows user to customize child and parent labels and icons, four different expander icons, data source with Map, events.

List<Node> nodes = [
 Node(
   label: 'Documents',
   key: 'docs',
   expanded: true,
   icon: NodeIcon(
     codePoint:
         docsOpen ? Icons.folder_open.codePoint : Icons.folder.codePoint,
     color: "blue",
   ),
   children: [
     Node(
         label: 'Job Search',
         key: 'd3',
         icon: NodeIcon.fromIconData(Icons.input),
         children: [
           Node(
               label: 'Resume.docx',
               key: 'pd1',
               icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
           Node(
               label: 'Cover Letter.docx',
               key: 'pd2',
               icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
         ]),
     Node(
       label: 'Inspection.docx',
       key: 'd1',
     ),
     Node(
         label: 'Invoice.docx',
         key: 'd2',
         icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
   ],
 ),
 Node(
     label: 'MeetingReport.xls',
     key: 'mrxls',
     icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
 Node(
     label: 'MeetingReport.pdf',
     key: 'mrpdf',
     icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
 Node(
     label: 'Demo.zip',
     key: 'demo',
     icon: NodeIcon.fromIconData(Icons.archive)),
];
TreeViewController _treeViewController = TreeViewController(children: nodes);
TreeView(
  controller: _treeViewController,
  allowParentSelect: false,
  supportParentDoubleTap: false,
  onExpansionChanged: _expandNodeHandler,
  onNodeTap: (key) {
    setState(() {
      _treeViewController = _treeViewController.copyWith(selectedKey: key);
    });
  },
  theme: treeViewTheme
),

dynamic_treeview

The treeview provides UI for dynamic parent/child relationship with indefinite category/subcategory lists with horizontal and vertical scrolling.

  DynamicTreeView(
        data: fetchBaseModelData(), // pass here List<BaseModel>
        config: Config(
            parentTextStyle:
                TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
            rootId: "1",
            parentPaddingEdgeInsets:
                EdgeInsets.only(left: 16, top: 0, bottom: 0)),
        onTap: (m) {
        //action on tap
        },
        width: MediaQuery.of(context).size.width,
    )

tree_view

tree_view package helps you build nested tree view with the possibility of making each child widget a parent.

var treeView = TreeView(
  parentList: [
    Parent(
      parent: Text('Desktop'),
      childList: ChildList(
        children: <Widget>[
          Parent(
            parent: Text('documents'),
            childList: ChildList(
              children: <Widget>[
                Text('Resume.docx'),
                Text('Billing-Info.docx'),
              ],
            ),
          ),
          Text('MeetingReport.xls'),
          Text('MeetingReport.pdf'),
          Text('Demo.zip'),
        ],
      ),
    ),
  ],
);