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(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(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().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: [ TextButton( onPressed: () { Navigator.of(context).pop(); }, child: Text('Close'), ), TextButton( onPressed: () { if (nodeName.isNotEmpty) { final newNode = Node.Id(nodeName); blocContext.read().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)), ); }