updated app commit

app/lib/main.dart

@@ -1,6 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'Screens/splash_screen.dart';
+import 'Screens/login_screen.dart';
+import 'Screens/device_connection_page.dart';
+import 'Screens/home_page.dart';
+import 'Screens/create_room.dart';
+import 'Screens/join_room.dart';
+import 'Screens/avatar_setting_page.dart';
+import 'Screens/game_setting_page.dart';
+import 'Screens/help_page.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
@@ -23,7 +31,18 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.teal,
       ),
-      home: SplashScreen(),
+      initialRoute: '/splash',
+      routes: {
+        '/splash': (context) => SplashScreen(),
+        '/login': (context) => LoginScreen(),
+        '/deviceConnection': (context) => DeviceConnectionPage(),
+        '/home': (context) => HomePage(),
+        '/createRoom': (context) => CreateRoomPage(),
+        '/joinRoom': (context) => JoinRoomPage(),
+        '/avatarSettings': (context) =>  AvatarSettingPage(),
+        '/gameSettings': (context) => GameSettingPage(),
+        '/help': (context) => HelpPage(),
+      },
     );
   }
 }

app/lib/screens/create_room.dart

@@ -24,66 +24,77 @@ class _CreateRoomPageState extends State<CreateRoomPage> {
         iconTheme: const IconThemeData(color: Colors.white),
       ),
       body: Center(
-        child: Container(
+        child: SingleChildScrollView(
           padding: const EdgeInsets.all(20),
-          width: 400,
-          decoration: BoxDecoration(
-            color: Colors.teal.shade700,
-            borderRadius: BorderRadius.circular(20),
-          ),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              const Text(
-                "Create Room",
-                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
-              ),
-              const SizedBox(height: 20),
+          child: Container(
+            padding: const EdgeInsets.all(20),
+            width: 400,
+            decoration: BoxDecoration(
+              color: Colors.teal.shade700,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Text(
+                  "Create Room",
+                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
+                ),
+                const SizedBox(height: 20),
+
+                // Dropdown for Filters
+                _buildDropdown("Filter", ['Beginner', 'Intermediate', 'Advanced'], selectedFilter, (value) {
+                  setState(() => selectedFilter = value);
+                }),
 
-              _buildDropdown("Filters", ['Beginner', 'Intermediate', 'Advanced'], selectedFilter, (value) {
-                setState(() => selectedFilter = value);
-              }),
+                // Dropdown for Game Type
+                _buildDropdown("Game Type", ['Beginner', 'Intermediate', 'Advanced'], selectedGameType, (value) {
+                  setState(() => selectedGameType = value);
+                }),
 
-              _buildDropdown("Game Type", ['Beginner', 'Intermediate', 'Advanced'], selectedGameType, (value) {
-                setState(() => selectedGameType = value);
-              }),
+                // Dropdown for Courses
+                _buildDropdown("Course", ['Beginner', 'Intermediate', 'Advanced'], selectedCourse, (value) {
+                  setState(() => selectedCourse = value);
+                }),
 
-              _buildDropdown("Courses", ['Beginner', 'Intermediate', 'Advanced'], selectedCourse, (value) {
-                setState(() => selectedCourse = value);
-              }),
+                const SizedBox(height: 10),
 
-              const SizedBox(height: 10),
-              _buildMaxPlayersSelection(),
+                // Player Selection
+                _buildMaxPlayersSelection(),
 
-              const SizedBox(height: 20),
-              ElevatedButton(
-                style: ElevatedButton.styleFrom(
-                  backgroundColor: Colors.teal.shade900,
-                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 30),
-                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                const SizedBox(height: 20),
+
+                // Confirm Button
+                ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Colors.teal.shade900,
+                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 30),
+                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                  ),
+                  onPressed: () {
+                    Navigator.push(
+                      context,
+                      MaterialPageRoute(builder: (context) => const CodeCreatePage()),
+                    );
+                  },
+                  child: const Text("Confirm", style: TextStyle(color: Colors.white, fontSize: 16)),
                 ),
-                onPressed: () {
-                  Navigator.push(
-                    context,
-                    MaterialPageRoute(builder: (context) => const CodeCreatePage()),
-                  );
-                },
-                child: const Text("Confirm", style: TextStyle(color: Colors.white, fontSize: 16)),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ),
     );
   }
 
+  // Helper Widget for Dropdowns
   Widget _buildDropdown(String label, List<String> items, String selectedItem, Function(String) onChanged) {
     return Padding(
       padding: const EdgeInsets.only(bottom: 10),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Text("$label :", style: const TextStyle(fontSize: 16, color: Colors.white)),
+          Text("$label:", style: const TextStyle(fontSize: 16, color: Colors.white)),
           DropdownButton<String>(
             value: selectedItem,
             dropdownColor: Colors.teal.shade800,
@@ -105,16 +116,20 @@ class _CreateRoomPageState extends State<CreateRoomPage> {
     );
   }
 
+  // Helper Widget for Max Players Selection
   Widget _buildMaxPlayersSelection() {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        const Text("Max players: ", style: TextStyle(fontSize: 16, color: Colors.white)),
-        for (int i = 2; i <= 7; i++)
+        const Text("Max Players:", style: TextStyle(fontSize: 16, color: Colors.white)),
+        for (int i = 2; i <= 4; i++)
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: 4),
             child: ChoiceChip(
-              label: Text("$i", style: TextStyle(color: selectedPlayers == i ? Colors.white : Colors.teal.shade900)),
+              label: Text(
+                "$i",
+                style: TextStyle(color: selectedPlayers == i ? Colors.white : Colors.teal.shade900),
+              ),
               selected: selectedPlayers == i,
               selectedColor: Colors.teal.shade900,
               backgroundColor: Colors.white,

app/lib/screens/device_connection_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'home_page.dart'; // Ensure this import is correct
 
 class DeviceConnectionPage extends StatefulWidget {
   const DeviceConnectionPage({super.key});
@@ -32,6 +33,15 @@ class _DeviceConnectionPageState extends State<DeviceConnectionPage> {
       headsetConnected = true;
       allConnected = true; // All devices connected
     });
+
+    // Navigate to HomePage after a short delay
+    await Future.delayed(const Duration(seconds: 1));
+    if (mounted) {
+      Navigator.pushReplacement(
+        context,
+        MaterialPageRoute(builder: (context) => const HomePage()),
+      );
+    }
   }
 
   @override

app/lib/screens/home_page.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 
 class HomePage extends StatelessWidget {
-  const HomePage({super.key});
+  final String username;
+
+  const HomePage({super.key, this.username = "User"});
 
   @override
   Widget build(BuildContext context) {
@@ -25,20 +27,22 @@ class HomePage extends StatelessWidget {
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
-                      const Text(
-                        "Welcome  ...User1...",
-                        style: TextStyle(
+                      Text(
+                        "Welcome, $username!",
+                        style: const TextStyle(
                           fontSize: 24,
                           fontWeight: FontWeight.bold,
                           color: Colors.white,
                         ),
                       ),
                       const SizedBox(height: 30),
-                      _buildMenuButton('assets/images/create_room.png', "Create Room"),
-                      _buildMenuButton('assets/images/join_room.png', "Join Room"),
-                      _buildMenuButton('assets/images/avatar_setting.png', "Avatar Setting"),
-                      _buildMenuButton('assets/images/game_setting.png', "Game Setting"),
-                      _buildMenuButton('assets/images/help.png', "Help"),
+                      _buildMenuButton(context, 'assets/images/create_room.png', "Create Room", '/createRoom'),
+                      _buildMenuButton(context, 'assets/images/join_room.png', "Join Room", '/joinRoom'),
+                      _buildMenuButton(context, 'assets/images/avatar_setting.png', "Avatar Setting", '/avatarSettings'),
+                      _buildMenuButton(context, 'assets/images/game_setting.png', "Game Setting", '/gameSettings'),
+                      _buildMenuButton(context, 'assets/images/help.png', "Help", '/help'),
+                      const SizedBox(height: 20),
+                      _buildBackButton(context),
                     ],
                   ),
                 ),
@@ -75,8 +79,8 @@ class HomePage extends StatelessWidget {
     );
   }
 
-  // Helper Widget for Buttons
-  Widget _buildMenuButton(String imagePath, String text) {
+  // Helper Widget for Menu Buttons
+  Widget _buildMenuButton(BuildContext context, String imagePath, String text, String route) {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 8),
       child: ElevatedButton.icon(
@@ -87,7 +91,9 @@ class HomePage extends StatelessWidget {
             borderRadius: BorderRadius.circular(15),
           ),
         ),
-        onPressed: () {}, // TODO: Add navigation
+        onPressed: () {
+          Navigator.pushNamed(context, route);
+        },
         icon: Image.asset(imagePath, width: 24, height: 24),
         label: Text(
           text,
@@ -96,4 +102,25 @@ class HomePage extends StatelessWidget {
       ),
     );
   }
+
+  // Back Button
+  Widget _buildBackButton(BuildContext context) {
+    return ElevatedButton.icon(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.red.shade700,
+        padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(15),
+        ),
+      ),
+      onPressed: () {
+        Navigator.pop(context); // Goes back to the previous screen
+      },
+      icon: const Icon(Icons.arrow_back, color: Colors.white),
+      label: const Text(
+        "Back",
+        style: TextStyle(color: Colors.white, fontSize: 16),
+      ),
+    );
+  }
 }

app/lib/screens/login_screen.dart

@@ -1,21 +1,42 @@
 import 'package:flutter/material.dart';
+import 'package:google_sign_in/google_sign_in.dart';
 
 class LoginScreen extends StatelessWidget {
+  const LoginScreen({super.key});
+
+  Future<void> _handleGoogleSignIn(BuildContext context) async {
+    try {
+      final GoogleSignIn googleSignIn = GoogleSignIn();
+      final GoogleSignInAccount? account = await googleSignIn.signIn();
+
+      if (account != null) {
+        // Successfully signed in, navigate to device connection page
+        Navigator.pushReplacementNamed(context, '/deviceConnection');
+      }
+    } catch (error) {
+      print("Google Sign-In Error: $error");
+      // Handle login failure (e.g., show an error message)
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text("Google Sign-In failed. Try again.")),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Color(0xFF2A6F6F), // Background color from the wireframe
+      backgroundColor: const Color(0xFF2A6F6F), // Background color from the wireframe
       body: Center(
         child: Column(
-          mainAxisSize: MainAxisSize.min,  // Important to avoid stretching
+          mainAxisSize: MainAxisSize.min, // Important to avoid stretching
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Image.asset(
               'assets/images/vr_golf_logo.png',
               width: 200,
             ),
-            SizedBox(height: 20),
-            Text(
+            const SizedBox(height: 20),
+            const Text(
               "VR GOLF\nMULTIPLAYER",
               textAlign: TextAlign.center,
               style: TextStyle(
@@ -24,25 +45,39 @@ class LoginScreen extends StatelessWidget {
                 fontWeight: FontWeight.bold,
               ),
             ),
-            SizedBox(height: 50),
+            const SizedBox(height: 50),
             ElevatedButton.icon(
-              onPressed: () {
-                // Implement Google Sign-In
-              },
+              onPressed: () => _handleGoogleSignIn(context), // Trigger sign-in
               icon: Image.asset(
                 'assets/images/google_icon.png',
                 width: 24,
                 height: 24,
               ),
-              label: Text("Sign in with Google"),
+              label: const Text("Sign in with Google"),
               style: ElevatedButton.styleFrom(
                 backgroundColor: Colors.white,
                 foregroundColor: Colors.black,
-                padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
+                padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(20),
+                ),
+              ),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () {
+                // Navigate to HomePage as Guest
+                Navigator.pushReplacementNamed(context, '/home');
+              },
+              style: ElevatedButton.styleFrom(
+                backgroundColor: Colors.teal.shade700,
+                foregroundColor: Colors.white,
+                padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(20),
                 ),
               ),
+              child: const Text("Login as Guest"),
             ),
           ],
         ),