Skip to content

Commit

Permalink
Implement SettingsView for User Configurable Settings
Browse files Browse the repository at this point in the history
This commit introduces the `SettingsView` class, which is responsible for rendering the user interface for the settings feature of the app. This View is associated with the `SettingsViewModel` for state management and logic.

Features Represented in this View:
- Dark Mode: A switch to enable or disable Dark Mode.
- Developer Mode: A switch to enable or disable Developer Mode.
- Base URL: A text field to input and configure the Base URL.
- Continuous Mode Steps: User-friendly '+' and '-' buttons allowing users to configure the number of steps for continuous mode.

The `SettingsView` utilizes the Flutter `ListView` to display various settings options, providing an intuitive and user-friendly experience. It employs reactive state management using the `Provider` package, ensuring that any state changes in the associated ViewModel are reflected immediately in the View. Proper documentation and comments have been added for better code readability and maintenance.
  • Loading branch information
hunteraraujo committed Sep 22, 2023
1 parent 5d00457 commit bb62744
Showing 1 changed file with 72 additions and 0 deletions.
72 changes: 72 additions & 0 deletions frontend/lib/views/settings/settings_view.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import 'package:auto_gpt_flutter_client/viewmodels/settings_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/// [SettingsView] displays a list of settings that the user can configure.
/// It uses [SettingsViewModel] for state management and logic.
class SettingsView extends StatelessWidget {
const SettingsView({super.key});

@override
Widget build(BuildContext context) {
// [ChangeNotifierProvider] provides an instance of [SettingsViewModel] to the widget tree.
return ChangeNotifierProvider(
create: (context) => SettingsViewModel(),
child: Scaffold(
appBar: AppBar(title: const Text('Settings')),
body: Consumer<SettingsViewModel>(
builder: (context, viewModel, child) {
// A list of settings is displayed using [ListView].
return ListView(
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
ListTile(
title: const Text('Base URL'),
subtitle: TextFormField(
initialValue: viewModel.baseURL,
onChanged: viewModel.updateBaseURL,
decoration: const InputDecoration(
hintText: 'Enter Base URL',
),
),
),
// 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(
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.
),
],
),
),
],
);
},
),
),
);
}
}

0 comments on commit bb62744

Please sign in to comment.