1  import 'package:flutter/material.dart'; // This line imports the Material Design library from Flutter, enabling the use of various UI components like Scaffold, AppBar, and Text widgets.
 2  import 'main.dart'; // This import statement brings in the main.dart file, allowing for navigation to the MyApp widget which serves as the entry point of the application.
 3  import 'settings.dart'; // This line imports the settings.dart file, making the SettingsPage widget accessible for navigation purposes.
 4  
 5  // The StatusPage widget is defined below as a stateless widget, meaning its properties cannot change over time. It is used to display the application's status information.
 6  class StatusPage extends StatelessWidget {
 7    // The constructor for StatusPage, which optionally accepts a Key object named 'key' for widget identification and management within the Flutter framework.
 8    const StatusPage({super.key});
 9  
10    // The build method is overridden here to construct the UI of the StatusPage widget. It takes a BuildContext object as an argument, which holds the location of this widget within the widget tree.
11    @override
12    Widget build(BuildContext context) {
13      // The ValueListenableBuilder widget is used here to listen for changes to the isDarkMode ValueNotifier defined in main.dart. It rebuilds its child widget whenever isDarkMode's value changes.
14      return ValueListenableBuilder<bool>(
15        valueListenable: isDarkMode, // Specifies the ValueNotifier object to listen to, in this case, isDarkMode.
16        builder: (context, isDark, _) { // The builder function defines the widget to be rebuilt in response to value changes. It receives the current value of isDarkMode as 'isDark'.
17          // The Scaffold widget provides a high-level structure for the StatusPage, including an AppBar at the top and a body section for content.
18          return Scaffold(
19            appBar: AppBar(
20              title: const Text('Status Page'), // Sets the text displayed in the AppBar.
21              backgroundColor: isDark ? Colors.black : Colors.white, // Dynamically sets the AppBar's background color based on the current theme mode (dark or light).
22            ),
23            body: Center(
24              // The Center widget centers its child within itself.
25              child: Column(
26                // The Column widget arranges its children vertically.
27                mainAxisAlignment: MainAxisAlignment.center, // Centers the Column's children along the main axis.
28                children: <Widget>[
29                  const Text(
30                    'Uptime 99%', // Displays a text indicating the uptime percentage.
31                    style: TextStyle(fontSize: 25, color: Colors.red), // Sets the style of the text, including font size and color.
32                  ),
33                  const SizedBox(height: 10), // Provides vertical spacing between widgets.
34                  LinearProgressIndicator(
35                    value: 0.99, // Sets the current value of the progress indicator to represent 99% uptime.
36                    backgroundColor: isDark ? Colors.grey : Colors.white, // Dynamically sets the background color of the progress bar.
37                    valueColor: const AlwaysStoppedAnimation<Color>(Colors.red), // Sets the color of the progress indicator to red.
38                  ),
39                ],
40              ),
41            ),
42            bottomNavigationBar: BottomNavigationBar(
43              backgroundColor: isDark ? Colors.black : Colors.white, // Dynamically sets the background color of the BottomNavigationBar.
44              selectedItemColor: Colors.red, // Sets the color of the selected item in the BottomNavigationBar.
45              unselectedItemColor: Colors.grey, // Sets the color of unselected items in the BottomNavigationBar.
46              items: const <BottomNavigationBarItem>[
47                BottomNavigationBarItem(
48                  icon: Icon(Icons.chat), // Defines an icon for the chat item.
49                  label: 'Chat', // Sets the label for the chat item.
50                ),
51                BottomNavigationBarItem(
52                  icon: Icon(Icons.assessment), // Defines an icon for the status item.
53                  label: 'Status', // Sets the label for the status item.
54                ),
55                BottomNavigationBarItem(
56                  icon: Icon(Icons.settings), // Defines an icon for the settings item.
57                  label: 'Settings', // Sets the label for the settings item.
58                ),
59              ],
60              currentIndex: 1, // Sets the currently selected index to 1, corresponding to the Status item.
61              onTap: (index) { // Defines a callback function to handle taps on the BottomNavigationBar items.
62                // Conditional navigation based on the tapped item's index.
63                if (index == 0) {
64                  // Navigates to the MyApp widget if the first item (Chat) is tapped.
65                  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const MyApp()));
66                } else if (index == 2) {
67                  // Navigates to the SettingsPage widget if the third item (Settings) is tapped.
68                  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const SettingsPage()));
69                }
70              },
71            ),
72          );
73        },
74      );
75    }
76  }