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: [
                    SizedBox(
                      width: 100,
                      child: TextFormField(
                        decoration: const 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(
      width: MediaQuery.of(blocContext).size.width * 0.2,
      margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
      padding: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10.0),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 5,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: Row(
        children: [
          const SizedBox(
            child: Icon(
              Icons.location_on,
              color: Colors.blue,
              size: 40.0,
            ),
          ),
          const SizedBox(width: 10.0),
          SizedBox(
            child: Text(
              text,
              style: const TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          const Spacer(),
          Container(
            child: const Icon(
              Icons.add_circle_outline,
              color: Colors.grey,
              size: 24.0,
            ),
          ),
        ],
      ),
    ),
  );
}