Add gender dropdown to learning settings

lib/pangea/learning_settings/gender_dropdown.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:dropdown_button2/dropdown_button2.dart';
+
+import 'package:fluffychat/l10n/l10n.dart';
+import 'package:fluffychat/pangea/common/widgets/dropdown_text_button.dart';
+import 'package:fluffychat/pangea/learning_settings/gender_enum.dart';
+
+class GenderDropdown extends StatelessWidget {
+  final GenderEnum initialGender;
+  final Function(GenderEnum)? onChanged;
+  final FormFieldValidator<Object>? validator;
+  final bool enabled;
+  final Color? backgroundColor;
+
+  const GenderDropdown({
+    super.key,
+    this.initialGender = GenderEnum.unselected,
+    this.onChanged,
+    this.validator,
+    this.enabled = true,
+    this.backgroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = L10n.of(context);
+
+    return DropdownButtonFormField2<GenderEnum>(
+      customButton:
+          CustomDropdownTextButton(text: initialGender.title(context)),
+      menuItemStyleData: const MenuItemStyleData(
+        padding: EdgeInsets.zero,
+      ),
+      decoration: InputDecoration(
+        labelText: l10n.gender,
+      ),
+      isExpanded: true,
+      dropdownStyleData: DropdownStyleData(
+        maxHeight: kIsWeb ? 500 : null,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(14.0),
+          color: Theme.of(context).colorScheme.surfaceContainerHigh,
+        ),
+      ),
+      items: GenderEnum.values.map((GenderEnum genderOption) {
+        return DropdownMenuItem(
+          enabled: genderOption != GenderEnum.unselected,
+          value: genderOption,
+          child: Container(
+            color: Colors.transparent,
+            padding: const EdgeInsets.symmetric(
+              vertical: 8,
+              horizontal: 12,
+            ),
+            child: Text(
+              genderOption.title(context),
+              style: const TextStyle().copyWith(
+                color: Theme.of(context).textTheme.bodyLarge!.color,
+                fontSize: 14,
+              ),
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        );
+      }).toList(),
+      onChanged: enabled
+          ? (value) {
+              if (value != null) onChanged?.call(value);
+            }
+          : null,
+      value: initialGender,
+      validator: validator,
+    );
+  }
+}

lib/pangea/learning_settings/settings_learning.dart

@@ -15,6 +15,7 @@ import 'package:fluffychat/pangea/instructions/instruction_settings.dart';
 import 'package:fluffychat/pangea/languages/language_model.dart';
 import 'package:fluffychat/pangea/languages/language_service.dart';
 import 'package:fluffychat/pangea/languages/p_language_store.dart';
+import 'package:fluffychat/pangea/learning_settings/gender_enum.dart';
 import 'package:fluffychat/pangea/learning_settings/language_level_type_enum.dart';
 import 'package:fluffychat/pangea/learning_settings/settings_learning_view.dart';
 import 'package:fluffychat/pangea/learning_settings/tool_settings_enum.dart';
@@ -165,6 +166,11 @@ class SettingsLearningController extends State<SettingsLearning> {
     if (mounted) setState(() {});
   }
 
+  void setGender(GenderEnum? gender) {
+    _profile.userSettings.gender = gender ?? GenderEnum.unselected;
+    if (mounted) setState(() {});
+  }
+
   void setPublicProfile(bool isPublic) {
     _profile.userSettings.publicProfile = isPublic;
     if (mounted) setState(() {});
@@ -282,6 +288,8 @@ class SettingsLearningController extends State<SettingsLearning> {
           ? PLanguageStore.byLangCode(_profile.userSettings.targetLanguage!)
           : null;
 
+  GenderEnum get gender => _profile.userSettings.gender;
+
   bool getToolSetting(ToolSetting toolSetting) {
     final toolSettings = _profile.toolSettings;
     switch (toolSetting) {

lib/pangea/learning_settings/settings_learning_view.dart

@@ -9,6 +9,7 @@ import 'package:fluffychat/pangea/common/widgets/full_width_dialog.dart';
 import 'package:fluffychat/pangea/instructions/reset_instructions_list_tile.dart';
 import 'package:fluffychat/pangea/languages/language_model.dart';
 import 'package:fluffychat/pangea/learning_settings/country_picker_tile.dart';
+import 'package:fluffychat/pangea/learning_settings/gender_dropdown.dart';
 import 'package:fluffychat/pangea/learning_settings/p_language_dropdown.dart';
 import 'package:fluffychat/pangea/learning_settings/p_settings_switch_list_tile.dart';
 import 'package:fluffychat/pangea/learning_settings/settings_learning.dart';
@@ -137,6 +138,10 @@ class SettingsLearningView extends StatelessWidget {
                                     initialLevel: controller.cefrLevel,
                                     onChanged: controller.setCefrLevel,
                                   ),
+                                  GenderDropdown(
+                                    initialGender: controller.gender,
+                                    onChanged: controller.setGender,
+                                  ),
                                   Container(
                                     decoration: BoxDecoration(
                                       border: Border.all(