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: [ 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().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( 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, ), ), ], ), ), ); }