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'),
        ],
      ),
    ),
  ],
);

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close