How to scale and center a graph so that the whole graph is visible

[CaptainDario]

Thank you for the great package!

I am trying to show a graph and I want that it is centered and scaled to a size so that the whole graph is visible. Is this possible?

This is what I have:

This is what I would like to have:

[marcusrohden]

have you found a solution by any chance?

[shaheer-ahmed-dev]

is this answered?

[CaptainDario]

I did it like this

https://github.com/CaptainDario/DaKanji/blob/main/lib/widgets/dictionary/kanji_group_widget.dart#L78

Which results in smth like this

[Masadow]

I stumbled accross the same issue and here's my solution that is more dynamic (works well when the child graph is smaller than the viewport as well as bigger)

    @override
    Widget build(BuildContext c) {
      return InteractiveViewer(
        constrained: false,
        boundaryMargin: const EdgeInsets.all(100),
        minScale: 0.01,
        maxScale: 5.6,
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minWidth: MediaQuery.of(context).size.width,
            minHeight: MediaQuery.of(context).size.height,
          ),
          child: Center(
            child: GraphView(
              graph: graph,
              algorithm: BuchheimWalkerAlgorithm(builder, TreeEdgeRenderer(builder)),
              paint: Paint()
                ..color = Constant.primaryColor
                ..strokeWidth = 1
                ..style = PaintingStyle.stroke,
              builder: (Node node) => (node as MNode).builder(context, draggedTarget),
            ),
          ),
        ),
      );
    }