Flutter : GraphView flickers when there are many nodes

154 views Asked by At

If there are only a few nodes, my code works fine, however if there are more nodes, more than 10 or 15 nodes, there will be flickering as shown.

enter image description here

https://youtube.com/shorts/Z0njMOP340Y?feature=share

Here is my code:

class _GraphScreenState extends State<GraphScreen> {
      final graph = Graph();
      Node nodeMain = Node.Id('');
    
      @override
      void initState() {
        super.initState();
        nodeMain = Node.Id(widget._listNode.first.nodeName);
        for (final e in widget._listClientInfo) {
          graph.addEdge(nodeMain, Node.Id(e.hostName));
        }    
      }
    
      @override
      Widget build(BuildContext context) {
        return AppScaffold(
          body:
            child: GraphView(
              graph: graph,
              algorithm: FruchtermanReingoldAlgorithm(),
              builder: (Node node) {
                final a = node.key!.value as String;
                return rectangWidget(a, node, widget._listNode);
              },
            
          ),
        );
      }
    
      Widget rectangWidget(String? i, Node node, List<OLMeshTopologyResult> topoList) {
        final isNodeMain = node == Node.Id(widget._listNode.first.nodeName);
        return Row(
          children: [
            Container( padding: EdgeInsets.all(isNodeMain ? 30 : 20))
            Text(i ?? ''),
          ],
        )
      }
    }

What is the solution to this problem? Thanks a lot.

0

There are 0 answers