Clean up settings view

tannerchiang · Sep 25, 2023 · 41a4ff8 · 41a4ff8
1 parent da8b9d5
commit 41a4ff8
Showing 1 changed file with 58 additions and 34 deletions.
diff --git a/frontend/lib/views/settings/settings_view.dart b/frontend/lib/views/settings/settings_view.dart
@@ -18,47 +18,71 @@ class SettingsView extends StatelessWidget {
         foregroundColor: Colors.black,
         title: const Text('Settings'),
       ),
-      body: ListView(
+      body: Column(
         children: [
-          // Dark Mode Toggle
-          SwitchListTile(
-            title: const Text('Dark Mode'),
-            value: viewModel.isDarkModeEnabled,
-            onChanged: viewModel.toggleDarkMode,
-          ),
-          // Developer Mode Toggle
-          SwitchListTile(
-            title: const Text('Developer Mode'),
-            value: viewModel.isDeveloperModeEnabled,
-            onChanged: viewModel.toggleDeveloperMode,
-          ),
-          // Base URL Configuration
-          ApiBaseUrlField(),
-          // Continuous Mode Steps Configuration
-          ListTile(
-            title: const Text('Continuous Mode Steps'),
-            // User can increment or decrement the number of steps using '+' and '-' buttons.
-            subtitle: Row(
+          // All settings in a scrollable list
+          Expanded(
+            child: ListView(
               children: [
-                IconButton(
-                  icon: const Icon(Icons.remove),
-                  onPressed: viewModel
-                      .decrementContinuousModeSteps, // Decrement the number of steps.
+                // Dark Mode Toggle
+                SwitchListTile(
+                  title: const Text('Dark Mode'),
+                  value: viewModel.isDarkModeEnabled,
+                  onChanged: viewModel.toggleDarkMode,
+                ),
+                const Divider(),
+                // Developer Mode Toggle
+                SwitchListTile(
+                  title: const Text('Developer Mode'),
+                  value: viewModel.isDeveloperModeEnabled,
+                  onChanged: viewModel.toggleDeveloperMode,
                 ),
-                Text('${viewModel.continuousModeSteps} Steps'),
-                IconButton(
-                  icon: const Icon(Icons.add),
-                  onPressed: viewModel
-                      .incrementContinuousModeSteps, // Increment the number of steps.
+                const Divider(),
+                // Base URL Configuration
+                const ListTile(
+                  title: Center(child: Text('Agent Base URL')),
                 ),
+                ApiBaseUrlField(),
+                const Divider(),
+                // Continuous Mode Steps Configuration
+                ListTile(
+                  title: const Center(child: Text('Continuous Mode Steps')),
+                  // User can increment or decrement the number of steps using '+' and '-' buttons.
+                  subtitle: Row(
+                    mainAxisAlignment:
+                        MainAxisAlignment.center, // Centers the Row's content
+                    children: [
+                      IconButton(
+                        icon: const Icon(Icons.remove),
+                        onPressed: viewModel
+                            .decrementContinuousModeSteps, // Decrement the number of steps.
+                      ),
+                      Text('${viewModel.continuousModeSteps} Steps'),
+                      IconButton(
+                        icon: const Icon(Icons.add),
+                        onPressed: viewModel
+                            .incrementContinuousModeSteps, // Increment the number of steps.
+                      ),
+                    ],
+                  ),
+                ),
+                const Divider(),
               ],
             ),
           ),
-          ListTile(
-            title: Text('Sign Out'),
-            onTap: () {
-              viewModel.signOut();
-            },
+          // Sign out button fixed at the bottom
+          Container(
+            width: double.infinity,
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: ElevatedButton.icon(
+              icon: const Icon(Icons.logout, color: Colors.black),
+              label:
+                  const Text('Sign Out', style: TextStyle(color: Colors.black)),
+              style: ElevatedButton.styleFrom(
+                backgroundColor: Colors.white,
+              ),
+              onPressed: viewModel.signOut,
+            ),
           ),
         ],
       ),