Unable to switch expander icon(arrow) form expanded to collapse or vice versa on expansion change

Issue #46 resolved
suvit sharma created an issue

First of all thank you for this wonderful flutter package !

but somehow I’m unable to toggle arrow states, I’m using Bloc architecture and on state change I’m rebuilding the whole tree view with withExapndToNode(key) to expand the selected node, but the problem is when I’m toggling one node from expanded to collapsed or vice versa the node expands as usual but the arrow remains the same.

for reference I’m attaching a screen shot.

(screen shot) - even though the “jee main | past years” Node is collapsed, still the arrow is pointing downwards.

Looking forward for your reply.

thank you in advance 🙂

Comments (7)

  1. Kevin Armstrong

    Hi Suvit. If you are toggling a node based on a user tapping the expander icon, you should do this using the onExpansionChanged method of the TreeView. You use something like this:

    TreeView(
        onExpansionChanged: (key, state) {
            var node = _treeViewController.getNode(key);
            if (node != null) {
              var updatedNodes = _treeViewController.updateNode(key, node.copyWith(expanded: expanded));
              // use the updatedNodes variable to update your BLoC state
            }
        }
    );
    

    Let me know if this helps or if you need more assistance.

  2. suvit sharma reporter

    Hii Kevin, it worked 🙂 thanks a lot.

    but now I’m unable to collapse the previously selected node, and if I’m using withCollapseAll().withExpandToNode(key) {I’m having access to pressed key through Bloc states} chained on TreeViewController then arrows are not refreshing.

    Is there anyway to use updateNode(…) method in chain formation on _treeViewController so that I can make previously selected node expanded property to false and at the same time currently to true/false ?

    thank you in advance 😀

  3. suvit sharma reporter

    also I tried to manually edit the nodes json like this :-

    updatedNodes.firstWhere((element) => element.key == previousSelected).expanded = false;
    

    but its prompting - > 'expanded' can't be used as a setter because it's final.

  4. suvit sharma reporter

    Hii @Kevin Armstrong ,

    sorry to bother you, but can you please spare some time and answer this query, it’ll be be very helpful for me.
    thank you and again sorry to disturb you.

  5. Kevin Armstrong

    @Suvit, chaining won’t work because the convenience methods perform operations on the internal list of children. That means the children property of the TreeViewController would have to be updated prior to using another method.

    Try the following:

    String _previousKey;
    TreeView(
        onExpansionChanged: (key, state) {
            var node = _treeViewController.getNode(key);
            if (node != null) {
              _treeViewController = _treeViewController.withUpdateNode(key, node.copyWith(expanded: expanded));
              if(previousKey != null){
                var previousNode = _treeViewController.getNode(previousKey);
                if (previousNode != null) {
                  _treeViewController = _treeViewController.withUpdateNode(previousKey, previousNode.copyWith(expanded: false));
                }
              }
              previousKey = key;
              setState((){})
            }
        }
    );
    

    Of course, this example uses setState. You can apply whatever is needed for your BLoC implementation.

  6. Log in to comment