feat(controls): add dropdown control implementation

apps/example/lib/main.dart

@@ -59,6 +59,22 @@ var settingControls = <SettingsControlConfig>[
       ),
     ],
   ),
+  ControlConfig.group(
+    title: "Dropdowns",
+    children: [
+      ControlConfig.dropdown(
+          key: "dropdown_test",
+          title: "Dropdown Example",
+          description: "Described",
+          hintText: "Select an item",
+          options: ["Item 1", "Item 2", "Item 3", "Item 4"],
+          inputDecoration: const InputDecoration(
+            icon: Icon(Icons.abc),
+            fillColor: Colors.red,
+            filled: true,
+          )),
+    ],
+  ),
   ControlConfig.group(
     title: "Pages",
     children: [

packages/flutter_settings/lib/src/config/controls/controls.dart

@@ -1,4 +1,7 @@
+import "package:flutter/material.dart";
 import "package:flutter_settings/flutter_settings.dart";
+import "package:flutter_settings/src/config/controls/checkbox.dart";
+import "package:flutter_settings/src/config/controls/dropdown.dart";
 import "package:flutter_settings/src/config/controls/radio.dart";
 import "package:settings_repository/settings_repository.dart";
 
@@ -28,6 +31,26 @@ abstract final class ControlConfig {
         wrapperBuilder: wrapperBuilder ?? defaultDescriptionTitleControlWrapper,
       );
 
+  ///
+  static DropdownControlConfig dropdown({
+    required String key,
+    required String title,
+    required List<String> options,
+    String? description,
+    String? hintText,
+    Widget? suffixIcon,
+    InputDecoration? inputDecoration,
+    ControlWrapperBuilder<String, DropdownControlConfig>? wrapperBuilder,
+  }) =>
+      DropdownControlConfig(
+        title: title,
+        description: description,
+        hintText: hintText,
+        options: options,
+        initialValue: SettingsControl(key: key),
+        wrapperBuilder: wrapperBuilder ?? defaultDescriptionTitleControlWrapper,
+      );
+
   ///
   static SettingsControlConfig toggle({
     required String key,

packages/flutter_settings/lib/src/config/controls/dropdown.dart

@@ -0,0 +1,97 @@
+import "package:flutter/material.dart";
+import "package:flutter_settings/flutter_settings.dart";
+import "package:settings_repository/settings_repository.dart";
+
+/// Dropdown Control Configuration
+class DropdownControlConfig
+    extends DescriptiveTitleControlConfig<String, DropdownControlConfig> {
+  /// Constructor for Dropdown Control Config
+  DropdownControlConfig({
+    required super.title,
+    required super.description,
+    required super.initialValue,
+    required this.options,
+    this.hintText,
+    this.suffixIcon,
+    this.inputDecoration, // Custom decoration parameter
+    super.wrapperBuilder = defaultDescriptionTitleControlWrapper,
+  });
+
+  /// List of items for the dropdown control
+  final List<String> options;
+
+  /// Optional hint text displayed in the dropdown
+  final String? hintText;
+
+  /// Suffix icon for the dropdown
+  final Widget? suffixIcon;
+
+  /// Optional custom `InputDecoration` for the dropdown
+  final InputDecoration? inputDecoration;
+
+  @override
+  Widget buildSetting(
+    BuildContext context,
+    SettingsControl<String> control,
+    SettingsControlController controller,
+  ) {
+    var theme = Theme.of(context);
+    return Expanded(
+      child: DropdownButtonFormField<String>(
+        icon: const Icon(
+          Icons.keyboard_arrow_down_rounded,
+        ),
+        items: options
+            .map(
+              (String item) => DropdownMenuItem<String>(
+                value: item,
+                child: Text(item),
+              ),
+            )
+            .toList(),
+        onChanged: (String? value) async {
+          if (value != null) {
+            await controller.updateControl(control.update(value));
+          }
+        },
+        value: control.value,
+        hint: Text(hintText ?? ""),
+        decoration: inputDecoration ??
+            InputDecoration(
+              fillColor: theme.colorScheme.surface,
+              filled: true,
+              contentPadding: const EdgeInsets.symmetric(
+                horizontal: 20,
+                vertical: 10,
+              ),
+              suffixIcon: suffixIcon,
+              enabledBorder: OutlineInputBorder(
+                borderSide: BorderSide.none,
+                borderRadius: BorderRadius.circular(12),
+              ),
+              errorBorder: OutlineInputBorder(
+                borderSide: BorderSide(
+                  color: theme.colorScheme.error,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              focusedErrorBorder: OutlineInputBorder(
+                borderSide: BorderSide(
+                  color: theme.colorScheme.error,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              focusedBorder: OutlineInputBorder(
+                borderSide: BorderSide(
+                  color: theme.colorScheme.primary,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(12),
+              ),
+            ),
+      ),
+    );
+  }
+}