1 files changed, 92 insertions, 0 deletions
diff --git a/frontend/lib/views/settings/settings_view.dart b/frontend/lib/views/settings/settings_view.dart
new file mode 100644
index 000000000..b0b46151c
--- /dev/null
+++ b/frontend/lib/views/settings/settings_view.dart
@@ -0,0 +1,92 @@
+import 'package:auto_gpt_flutter_client/viewmodels/settings_viewmodel.dart';
+import 'package:auto_gpt_flutter_client/views/settings/api_base_url_field.dart';
+import 'package:flutter/material.dart';
+
+/// [SettingsView] displays a list of settings that the user can configure.
+/// It uses [SettingsViewModel] for state management and logic.
+class SettingsView extends StatelessWidget {
+  final SettingsViewModel viewModel;
+
+  /// Constructor for [SettingsView], requiring an instance of [SettingsViewModel].
+  const SettingsView({Key? key, required this.viewModel}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.grey,
+        foregroundColor: Colors.black,
+        title: const Text('Settings'),
+      ),
+      body: Column(
+        children: [
+          // All settings in a scrollable list
+          Expanded(
+            child: ListView(
+              children: [
+                // TODO: Add back dark mode toggle
+                // 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,
+                ),
+                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(),
+              ],
+            ),
+          ),
+          // 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,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}