Flutter Widget to show a nested tree structure?

Question

We have an N level (max is probably around 10 or so) nested data structure that basically resembles a folder layout ..

Each node at any level is a Mime type of something to show or a URL ..

My question is actually very simple .. is there any available Fluter Widget that can show this type of stucture -- allowing the common "open/close" at any parent level, etc. ??

This seems like a pretty fundamental UI element not be had in the stock toolbox but I haven't had any luck finding one ..

TIA!

/Steve

Answer 1

Over the past few weeks I have been working on a TreeView widget and have come up with a basic structure. It is now available in the pub for use. Working on it is easy enough once you really know how to do it. I've got to admit that documentation has never been my strong point, but if someone has any trouble with this just add an issue on the Github page.

Any suggestions to improve the project are also welcome.

Sample Code

Let's assume this is the directory structure we want to implement using the TreeView widget

Desktop
|-- documents
|   |-- Resume.docx
|   |-- Billing-Info.docx
|-- MeetingReport.xls
|-- MeetingReport.pdf
|-- Demo.zip

In this example

1. Resume.docx and Billing-Info.docx are Child widgets with documents as the Parent.
2. documents, MeetingReport.xls, MeetingReport.xls and Demo.zip are Child widgets with Desktop as a Parent widget.

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

This will not generate anything fancy at all. But instead of all the Text widgets you can pass any complex widget and it will still work.

A screen grab of an application using TreeView

Answer 2

Bit late to the party.I have also been searching for a treeview structure to use for my flutter project but i couldn't find any that suits my needs.So, I created a package dynamic_treeview .It uses a parent/child relationship to build a treeview.See if this suits your needs.Let me know what you guys think.Thanks