2

I'm quite new to flutter and dart. I'm trying to draw a tree view using the GraphView library. I'm able to generate the tree and also the panning is working very well. The main problem is that tree nodes have to be clickable, but once the tree expands over the main window size the "outside" nodes are no more clickable.

To better explain this is the tree. After panning to the right the green line is the on initState view right margin. All the nodes on the left of this line are touchable, while on the right they are not touchable. enter image description here

The code I produced to show this view is the following:

Widget build(BuildContext context) {
    return InteractiveViewer(
      clipBehavior: Clip.none,
      panEnabled: true,
      minScale: 0.35,
      maxScale: 1,
      boundaryMargin: EdgeInsets.all(double.infinity),
      child: OverflowBox(
        alignment: Alignment.center,
        minWidth: 0.0,
        minHeight: 0.0,
        maxWidth: double.infinity,
        maxHeight: double.infinity,
        child: GraphView(
            algorithm: BuchheimWalkerAlgorithm(
              builder,
              TreeEdgeRenderer(builder),
            ),
            graph: graph,
            paint: Paint()
              ..color = Colors.green
              ..strokeWidth = 1
              ..style = PaintingStyle.stroke,
            builder: (Node node) {
              int a = node.key!.value;
              if (a == 0) {
                return rectangleWidget("ROOT", a, NodeType.ROOT, 99);
              } else {
                AttackTreeNode attackTreeNode =
                    dataManager.rootNode.findNode(a);
                return rectangleWidget(
                    attackTreeNode.name, a, attackTreeNode.nodeType, attackTreeNode.score);
              }
            }),
      ),
    );
  }

Thank you in advice for your help!

Andrea Ciccotelli
  • 41
  • 3

1 Answers1

0

I don't know whether you still need help for this or not and I also don't know if this fixes your issue for sure. I had a pretty similar behavior as the one you described and perhaps it's because of the same reason. Please don't be to harsh with me though because I am also a Flutter newbie.

In my code I used the Table widget inside of the InteractiveViewer but because the behavior is the same or quite the same I believe this doesn't matter.

I fixed this issue by placing my Table widget as a direct child. Earlier I had it wrapped inside another widget which seemed to cause the bug. Perhaps you need to remove your OverflowBox and put your GraphView there. Like this:

Widget build(BuildContext context) {
    return InteractiveViewer(
      clipBehavior: Clip.none,
      panEnabled: true,
      minScale: 0.35,
      maxScale: 1,
      boundaryMargin: EdgeInsets.all(double.infinity),
      child: GraphView(
            algorithm: BuchheimWalkerAlgorithm(
              builder,
              TreeEdgeRenderer(builder),
            ),
            graph: graph,
            paint: Paint()
              ..color = Colors.green
              ..strokeWidth = 1
              ..style = PaintingStyle.stroke,
            builder: (Node node) {
              int a = node.key!.value;
           if (a == 0) {
            return rectangleWidget("ROOT", a, NodeType.ROOT, 99);
           } else {
             AttackTreeNode attackTreeNode =
                dataManager.rootNode.findNode(a);
            return rectangleWidget(
                attackTreeNode.name, a, attackTreeNode.nodeType, attackTreeNode.score);
           }
        }),
    );
  }

Sorry for the poor formatting of the code. If this doesn't work I sadly do not have any other options for you to try since this fixed it for me. If you have any further questions you can ask them but I don't know if I can answer them correctly.

Nevertheless, Thanks for reading and Happy Coding ✌

SeamonDev
  • 26
  • 4