Show Tree view using Flutter
Creating a tree view using Flutter involves organizing and displaying hierarchical data in a structured and interactive format. In this article, we are going to see how to show tree view in flutter. This article will guide you through all the necessary code snippet & configuration.

Configuration:
Here we are going to use flutter_simple_treeview package. It makes really easy to add tree view in flutter. Lets add its dependency inside pubspec.yaml file under dependency section.
dependencies: flutter: sdk: flutter flutter_simple_treeview: <<latest_version>>
Now lets add below import statement inside dart file wherever we want to add tree view.
import 'package:flutter_simple_treeview/flutter_simple_treeview.dart';
Create Tree View:
TreeView widget is a parent widget inside the widget tree. It is stateful widget defined in flutter_simple_treeview package. We need to first create Treeview widget to create tree view.
Nodes can be created using TreeNode widget. This widget can be used as a child of TreeView widget to create nodes in the tree view.
TreeView( nodes: [ TreeNode(content: Text("Node 1")) ] )
In the above code, we have used TreeView widget to create tree view. Here nodes can be defined inside nodes property. We have used TreeNode widget to create a node.
Multiple Nodes:
We can create multiple nodes using nodes property.
TreeView( nodes: [ TreeNode(content: Text("Node 1")), TreeNode(content: Text("Node 2")), ] )
Nested Nodes:
TreeNode widget’s children property can used to define nested nodes(node within node).
TreeView(nodes: [ TreeNode( content: Text("Node 1"), children: [ TreeNode(content: Text("Child Node 1")), TreeNode(content: Text("Child Node 2")), ], ), ]),
Manage Tree State:
You can define controller to manage the state of tree.
TreeController controller = TreeController();
Once the controller object is created, it can be attached to tree view using treeController property of TreeView widget.
TreeView( treeController: controller, nodes: [ TreeNode(content: Text("Node 1")) ] )
By using TreeController, we can manage tree state using following ways,
1) Expand & collapse all nodes of the tree.
- Collapse all node using collapseAll() method.
controller.collapseAll();
- Expand all nodes using expandAll() method.
controller.expandAll();
2) Check whether all the nodes expanded or not.
controller.allNodesExpanded;
3) Expand/collapse particular node using collapseNode() & expandNode method.
controller.collapseNode(key); controller.expandNode(key);
Here key is a Key object associated with the TreeNode.
All properties of TreeView widget:
- indent : Horizontal indent between levels.
- iconSize : Size of the expand/collapse icon.
- nodes : List of root level tree nodes.
- treeController : Tree controller to manage the tree state.
All properties of TreeNode Widget:
- content : Content of the the node. It can be text/image or any widget.
- children : List of nested nodes. Inside this list we can create nested nodes using TreeNode widget.
- key : It is key object attached to node. This key object can be used to expand or collapse particular node.
The video tutorial for this blog is also accessible.
For access to the full source code of this tutorial, please click here.
Leave a Reply