How to show hierarchal data in a Flutter App (e.g. TreeView)

[Steven McDowall]

We have data (legacy) that is a pure directed graph (i.e. a tree) -- and want to show this in our new cool Flutter App.  Everywhere else we utilize a TreeView type thing (Web/iOS native, etc.)  with nested levels that can open and close etc.  Pretty common.  Except -- not in Flutter?  I have googled and tried dozens of "widget" things but I can't find anything like a TreeView... 

Now, it doesn't have to be a tree view per se -- but I'll be the first to indicate I'm a rotten UI/UX person -- so the TreeView is basically all I keep coming back to..

Anyway -- does anyone have any great ideas on how to show N levels (say 5 max although in theory it can be "infinite") of nested data where we have folders (and sub-folders, etc) and node items at any layer of that.. I.e. a Folder could have both node items and sub-folders... 

Maybe there is some cool Widget library out there I missed?!  :) 

TIA!

/Steve

[Belokotov]

Interesting. Can you explain what exactly you are looking for tree as nested lists or just model and separate listviews for each node with node?

[Steven McDowall]

Here is an image (assuming it works) from the current 4 year old + native iOS app that we're trying to convert to Flutter (and make it more awesome and sexier, etc).

The general idea is that our users can create a "library" of resources of various MIME types / URLS .. and have nested Folders etc. 

So we want to be able to show the users the Hierarchy of folders (and the ability to open/close them etc) and the "resources" at each level -- it doesn't have to be a TreeView as in the image .. but .. that seems a reasonable approach? 

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Belokotov]

For this functionality you can use listview with ExpansionTile items and listview as nested list in their children.

[Steven McDowall]

That sounds promising -- is there an example layout thing that shows how this can be done?? I didn't see anything in the flutter example widget thing.. but maybe I missed it or someone else has an example ??

> On Oct 11, 2018, at 11:52 PM, Belokotov <yost...@gmail.com> wrote:
>
> For this functionality you can use listview with ExpansionTile items and listview as nested list in their children.
>

[Yourii Ostrokon]

There is an example from the flutter site

https://flutter.io/catalog/samples/expansion-tile-sample/

and video with similar things on youtube

https://www.youtube.com/watch?v=akmBjgvP6Js

[Steven McDowall]

LOL -- I hate getting old!  How in the world did I miss this!!  :) 

Thanks Youril !!!

[Yourii Ostrokon]

Heh, nobody safe, you are welcome and have a nice coding)

пт, 12 окт. 2018 г., 15:20 Steven McDowall <s...@hawoods.org>:

[Steven McDowall]

OK -- I am ALMOST on the home stretch -- 

We are using a dark theme .. but I can't for the life of me figure out how to get the open/close (trailing) icon to be a different color... 

I tried setting what I THOUGHT were the right theme elements like the code below -- but -- they are insistent on staying a dark grey .. which on a dark background is not very good to see ..

Here is my attempt in the code... 

If anyone has ideas on how to change just the color of the trailing icon .. I would be very very appreciative .. and learn something too!  

TIA!!

/Steve

    _returnTile = Theme(

        data: Theme.of(context).copyWith(

            dividerColor: Colors.yellow,

            unselectedWidgetColor: Colors.white,

            accentColor: Colors.pink),

        child: ExpansionTile(

          key: PageStorageKey<ResourceEntry>(resourceEntry),

          title: Text(

            resourceEntry.resource.displayName,

            style: TextStyle(color: Colors.white),

          ),

          // trailing: RotationTransition(

          //   turns: _iconTurns,

          //   child: const Icon(Icons.expand_more),

          // ),

          children:

              resourceEntry.children.map<Widget>(_buildResourceTile).toList(),

[Yourii Ostrokon]

https://docs.flutter.io/flutter/widgets/Icon-class.html

Icon(IconData icon, { Key key, double size, Color color, String semanticLabel, TextDirection textDirection })

color attribute

may be would be better not to setup a const, but use an app accent color Theme.of(context).accentColor and have app more adaptive for the changes in the future

[Steven McDowall]

Hi Yourii! 

Yes, I see that information -- but -- I am not sure how to apply that to the ExpansionTile open/close Icon that is used and buried inside the Component itself and not lose the automation / etc.  

Looking at the code it does something (well, it does THIS) ... 

trailing: widget.trailing ?? RotationTransition(
	turns: _iconTurns,
	child: const Icon(Icons.expand_more),
	),

If I supply a "trailing" it appears I lose the RotationTransition stuff .. 

It also has this logic

children: <Widget>[
	IconTheme.merge(
	data: IconThemeData(color: _iconColor.value),

And _iconColor is some Animation stuff that I honestly don't understand either.. 

_iconColor = _controller.drive(_iconColorTween.chain(_easeInTween));

final ColorTween _iconColorTween = ColorTween();

_iconColorTween
	..begin = theme.unselectedWidgetColor
	..end = theme.accentColor;

The above code is why I tried to set the unselectedWidgetColor and accentColor .. but .. that didn't appear to do anything..

Cheers!