How to center tree on the canvas ?

[olzii]

I am using this plugin to display Family tree. And it does not center when displayed.

I need to center horizontally like this on small tree and big family tree when first displayed :

How to do it ?

[nabil6391]

Hm it should have worked, can you give me a short sample to show what you did?

[olzii]

Widget tree_view_graph(FTreeHomeController model){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded(
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(),
            child: InteractiveViewer(
              constrained: false,
              scaleEnabled: true,
              boundaryMargin: EdgeInsets.all(100),
              minScale: 0.000000000001,
              maxScale: 5.6,
              child: GraphView(
                graph: model.graph,
                algorithm: BuchheimWalkerAlgorithm(model.builder, renderer),
                paint: Paint()
                  ..color = Colors.green
                  ..strokeWidth = 1
                  ..style = PaintingStyle.stroke,
              ),
            ),
          ),
        ),
      ],
    );
  }

[VengaiMovan]

Hi @olzii , In treeview it shows RenderPointerListener does not meet its constraints any idea?

[nabil6391]

@olzii I tried your code, still in my case its showing in the middle. Try to see if there are no unconnected nodes. Also see if the first node is the first one you are adding.

[sjimbonator]

@olzii if you set constrained to true on your InteractiveViewer and wrap its child with an OverflowBox with Alignment.center it will center the tree. This way you can also put your InteractiveViewer directly on the body of your scaffold without the Column and Container etc.

Example:

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
      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 = Theme.of(context).primaryIconTheme.color
            ..strokeWidth = 1
            ..style = PaintingStyle.stroke,
        ),
      ),
    );
  }

This is because if you set constrained to false on InteractiveViewer Flutter will wrap the Interactive viewer with:

    if (!widget.constrained) {
      child = OverflowBox(
        alignment: Alignment.topLeft,
        minWidth: 0.0,
        minHeight: 0.0,
        maxWidth: double.infinity,
        maxHeight: double.infinity,
        child: child,
      );
    }

So by doing this wrapping yourself and changing the alignment you can get the behaviour you want.

[olzii]

@sjimbonator It is working now, thank you very much.

[xiaobingcaicai]

@olzii if you set constrained to true on your InteractiveViewer and wrap its child with an OverflowBox with Alignment.center it will center the tree. This way you can also put your InteractiveViewer directly on the body of your scaffold without the Column and Container etc.

Example:

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
      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 = Theme.of(context).primaryIconTheme.color
            ..strokeWidth = 1
            ..style = PaintingStyle.stroke,
        ),
      ),
    );
  }

This is because if you set constrained to false on InteractiveViewer Flutter will wrap the Interactive viewer with:

    if (!widget.constrained) {
      child = OverflowBox(
        alignment: Alignment.topLeft,
        minWidth: 0.0,
        minHeight: 0.0,
        maxWidth: double.infinity,
        maxHeight: double.infinity,
        child: child,
      );
    }

So by doing this wrapping yourself and changing the alignment you can get the behaviour you want.

but this will not show all the tree node widget if i have much node,how to resolve it?

[saiypafateme]

hello, How can we implement the opening and closing of nodes in package?

[shaheer-ahmed-dev]

Hey!, I wanted to ask if we could make tree like the normal Family tree in which there are two parents of the node. and the parents and the children are on different depth levels.