Ad

How To Center A Graph View Or Tree View In Flutter?

InteractiveViewer(
            constrained: false,
            boundaryMargin: const EdgeInsets.all(20),
            child: Container(
              child: GraphView(
                graph: graph,
                algorithm:
                    BuchheimWalkerAlgorithm(builder, TreeEdgeRenderer(builder)),
                paint: Paint()
                  ..color = Colors.black
                  ..strokeWidth = 1.5
                  ..style = PaintingStyle.stroke,
                builder: (Node node) {
                  var a = node.key?.value as int;

                  
                  var nodeValue =
                      _nodeData.firstWhere((element) => element.id == a);
                  //print('node Value : $nodeValue');
                  var _eid = (nodeValue.id).toString(); 
                  var _id = (nodeValue.uid).toString(); 
                  var _name = (nodeValue.name).toString(); 
                  return Center(child: rectangleWidget(_id, _name, _eid));
                },
              ),
            ),
          ),

I want to center the above GraphView widget. I have tried column, Row centering, and even Container and Center Widget...

Ad

Answer

I'm just relaying what I found in an closed issue but sjimbonator says

if you set constrained to true on your InteractiveViewer and wrap its child with an OverflowBox with Alignment.center it will center the tree.

and they follow it up with this 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,
      ),
    ),
  );
}
Ad
source: stackoverflow.com
Ad