Added login screen and Tree page screen to test graph view package

lib/pages/auth/bloc/login_bloc.dart

@@ -0,0 +1,19 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/auth/bloc/login_event.dart';
+import 'package:syncrow_web/pages/auth/bloc/login_state.dart';
+
+class LoginBloc extends Bloc<LoginEvent, LoginState> {
+  LoginBloc() : super(LoginInitial()) {
+    on<LoginButtonPressed>(_onPress);
+  }
+
+  void _onPress(LoginButtonPressed event, Emitter<LoginState> emit) async {
+    emit(LoginLoading());
+    await Future.delayed(const Duration(seconds: 2));
+    if (event.username == 'admin' && event.password == 'password') {
+      emit(LoginSuccess());
+    } else {
+      emit(const LoginFailure(error: 'Invalid credentials'));
+    }
+  }
+}

lib/pages/auth/bloc/login_event.dart

@@ -0,0 +1,18 @@
+import 'package:equatable/equatable.dart';
+
+abstract class LoginEvent extends Equatable {
+  const LoginEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class LoginButtonPressed extends LoginEvent {
+  final String username;
+  final String password;
+
+  const LoginButtonPressed({required this.username, required this.password});
+
+  @override
+  List<Object> get props => [username, password];
+}

lib/pages/auth/bloc/login_state.dart

@@ -0,0 +1,23 @@
+import 'package:equatable/equatable.dart';
+
+abstract class LoginState extends Equatable {
+  const LoginState();
+
+  @override
+  List<Object> get props => [];
+}
+
+class LoginInitial extends LoginState {}
+
+class LoginLoading extends LoginState {}
+
+class LoginSuccess extends LoginState {}
+
+class LoginFailure extends LoginState {
+  final String error;
+
+  const LoginFailure({required this.error});
+
+  @override
+  List<Object> get props => [error];
+}

lib/pages/auth/view/login_page.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/auth/bloc/login_bloc.dart';
+import 'package:syncrow_web/pages/auth/bloc/login_event.dart';
+import 'package:syncrow_web/pages/auth/bloc/login_state.dart';
+import 'package:syncrow_web/pages/home/view/home_page.dart';
+
+class LoginPage extends StatelessWidget {
+  const LoginPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Login'),
+      ),
+      body: BlocProvider(
+        create: (context) => LoginBloc(),
+        child: BlocConsumer<LoginBloc, LoginState>(
+          listener: (context, state) {
+            if (state is LoginSuccess) {
+              // Navigate to home screen after successful login
+              Navigator.pushReplacement(
+                context,
+                MaterialPageRoute(builder: (context) => const HomePage()),
+              );
+            } else if (state is LoginFailure) {
+              // Show error message
+              ScaffoldMessenger.of(context).showSnackBar(
+                SnackBar(
+                  content: Text(state.error),
+                ),
+              );
+            }
+          },
+          builder: (context, state) {
+            if (state is LoginLoading) {
+              return const Center(child: CircularProgressIndicator());
+            } else {
+              return _buildLoginForm(context);
+            }
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _buildLoginForm(BuildContext context) {
+    final loginBloc = BlocProvider.of<LoginBloc>(context);
+    final TextEditingController _usernameController = TextEditingController();
+    final TextEditingController _passwordController = TextEditingController();
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(20.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            SizedBox(
+              width: MediaQuery.sizeOf(context).width * 0.4,
+              child: TextField(
+                controller: _usernameController,
+                decoration: const InputDecoration(
+                  labelText: 'Username',
+                ),
+              ),
+            ),
+            const SizedBox(height: 20.0),
+            SizedBox(
+              width: MediaQuery.sizeOf(context).width * 0.4,
+              child: TextField(
+                controller: _passwordController,
+                obscureText: true,
+                decoration: const InputDecoration(
+                  labelText: 'Password',
+                ),
+              ),
+            ),
+            const SizedBox(height: 20.0),
+            ElevatedButton(
+              onPressed: () async {
+                // Trigger login event
+                loginBloc.add(
+                  LoginButtonPressed(
+                    username: _usernameController.text,
+                    password: _passwordController.text,
+                  ),
+                );
+              },
+              child: const Text('Login'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/home/bloc/home_bloc.dart

@@ -0,0 +1,33 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:graphview/GraphView.dart';
+import 'package:syncrow_web/pages/home/bloc/home_event.dart';
+import 'package:syncrow_web/pages/home/bloc/home_state.dart';
+
+class HomeBloc extends Bloc<HomeEvent, HomeState> {
+  final Graph graph = Graph()..isTree = true;
+  final BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();
+  List<Node> sourcesList = [];
+  List<Node> destinationsList = [];
+
+  HomeBloc() : super((HomeInitial())) {
+    on<CreateNewNode>(_createNode);
+  }
+
+  void _createNode(CreateNewNode event, Emitter<HomeState> emit) async {
+    emit(HomeInitial());
+    sourcesList.add(event.sourceNode);
+    destinationsList.add(event.destinationNode);
+
+    for (int i = 0; i < sourcesList.length; i++) {
+      graph.addEdge(sourcesList[i], destinationsList[i]);
+    }
+
+    builder
+      ..siblingSeparation = (100)
+      ..levelSeparation = (150)
+      ..subtreeSeparation = (150)
+      ..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
+
+    emit(HomeUpdateTree(graph: graph, builder: builder));
+  }
+}

lib/pages/home/bloc/home_event.dart

@@ -0,0 +1,19 @@
+import 'package:equatable/equatable.dart';
+import 'package:graphview/GraphView.dart';
+
+abstract class HomeEvent extends Equatable {
+  const HomeEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class CreateNewNode extends HomeEvent {
+  final Node sourceNode;
+  final Node destinationNode;
+  const CreateNewNode(
+      {required this.sourceNode, required this.destinationNode});
+
+  @override
+  List<Object> get props => [sourceNode, destinationNode];
+}

lib/pages/home/bloc/home_state.dart

@@ -0,0 +1,26 @@
+import 'package:equatable/equatable.dart';
+import 'package:graphview/GraphView.dart';
+
+abstract class HomeState extends Equatable {
+  const HomeState();
+
+  @override
+  List<Object> get props => [];
+}
+
+class HomeInitial extends HomeState {}
+
+class HomeCounterState extends HomeState {
+  final int counter;
+  const HomeCounterState(this.counter);
+}
+
+class HomeUpdateTree extends HomeState {
+  final Graph graph;
+  final BuchheimWalkerConfiguration builder;
+
+  const HomeUpdateTree({required this.graph, required this.builder});
+
+  @override
+  List<Object> get props => [graph, builder];
+}

lib/pages/home/view/home_page.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
+import 'package:syncrow_web/pages/home/view/tree_page.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        body: BlocProvider(
+      create: (context) => HomeBloc(),
+      child: const TreeWidget(),
+    ));
+  }
+}

lib/pages/home/view/tree_page.dart

@@ -0,0 +1,150 @@
+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)),
+  );
+}