syncrow-web/lib/pages/home/view/tree_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:graphview/GraphView.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_event.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';

class TreeWidget extends StatelessWidget {
  const TreeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
    String firstNodeName = '';
    String secondNodeName = '';

    return SafeArea(
      child: Container(
        padding: const EdgeInsets.all(24),
        width: MediaQuery.sizeOf(context).width,
        height: MediaQuery.sizeOf(context).height,
        alignment: AlignmentDirectional.center,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
              if (state is HomeInitial) {
                return Wrap(
                  children: [
                    Container(
                      width: 100,
                      child: TextFormField(
                        decoration:
                            InputDecoration(labelText: "Subtree separation"),
                        onChanged: (text) {
                          firstNodeName = text;
                        },
                      ),
                    ),
                    const SizedBox(
                      width: 8,
                    ),
                    Container(
                      width: 100,
                      child: TextFormField(
                        decoration: InputDecoration(labelText: "Node Name"),
                        onChanged: (text) {
                          secondNodeName = text;
                        },
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        final node1 = Node.Id(firstNodeName);
                        final node2 = Node.Id(secondNodeName);

                        context.read<HomeBloc>().add(CreateNewNode(
                            sourceNode: node1, destinationNode: node2));
                      },
                      child: Text("Add"),
                    )
                  ],
                );
              }
              if (state is HomeUpdateTree) {
                return Expanded(
                  child: InteractiveViewer(
                      constrained: false,
                      boundaryMargin: const EdgeInsets.all(100),
                      minScale: 0.01,
                      maxScale: 5.6,
                      child: GraphView(
                        graph: state.graph,
                        algorithm: BuchheimWalkerAlgorithm(
                            state.builder, TreeEdgeRenderer(state.builder)),
                        paint: Paint()
                          ..color = Colors.green
                          ..strokeWidth = 1
                          ..style = PaintingStyle.stroke,
                        builder: (Node node) {
                          // I can decide what widget should be shown here based on the id
                          var nodeName = node.key!.value;
                          return rectangleWidget(nodeName, node, context);
                        },
                      )),
                );
              } else {
                return Container();
              }
            })
          ],
        ),
      ),
    );
  }
}

Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
  String nodeName = '';

  return InkWell(
    onTap: () {
      showDialog(
        context: blocContext,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('Add a child'),
            content: TextField(
              decoration:
                  const InputDecoration(hintText: 'Enter your text here'),
              onChanged: (value) {
                nodeName = value;
              },
            ),
            actions: <Widget>[
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('Close'),
              ),
              TextButton(
                onPressed: () {
                  if (nodeName.isNotEmpty) {
                    final newNode = Node.Id(nodeName);
                    blocContext.read<HomeBloc>().add(CreateNewNode(
                        sourceNode: node, destinationNode: newNode));
                  }
                  Navigator.of(context).pop();
                },
                child: Text('Add'),
              ),
            ],
          );
        },
      );
    },
    child: Container(
        padding: EdgeInsets.all(16),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          boxShadow: [
            BoxShadow(color: Colors.blue[100]!, spreadRadius: 1),
          ],
        ),
        child: Text(text)),
  );
}