Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 ..

/Steve

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
Resume.docx and Billing-Info.docx are Child widgets with documents as the Parent.
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
                This looks pretty promising -- once I am at a decent pausing state I will take a look.  I like how the layout is generated .. although until I try it with dynamic data from a DB source I'll reserve judgement but I think it should work pretty good. Is there a practical limitation to the level of nesting?  What happens to the indentation when 5 or 6 levels in?
– sjmcdowall
                Jan 15, 2019 at 13:05
                The tree view by default does not add any indentation. That has to be implemented seperately. I have an example in the GitHub repo. But it is not well documented as of now
– Ajil O.
                Jan 15, 2019 at 13:13
                @Imaginativeone I haven't pushed any changes since I originally published. Try the existing version, it should fit some use cases
– Ajil O.
                May 11, 2019 at 14:34
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
                Doesn't work really much at all -- not Dart 2 compliant -- and lots of interdependencies .. but yes.. it was a good launching point..
– sjmcdowall
                Oct 18, 2018 at 21:11
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.