fix(shared): implement correct LanguagePickerFormField using showDialog

Author: fulleni

lib/shared/widgets/language_picker_form_field.dart

@@ -1,34 +1,62 @@
 import 'package:flutter/material.dart';
-import 'package:language_picker/language_picker.dart' as language_picker;
+import 'package:language_picker/language_picker.dart';
+import 'package:language_picker/languages.dart';
 
 /// A form field for selecting a language using the `language_picker` package.
 ///
 /// This widget wraps the language picker functionality in a standard
 /// [FormField], making it easy to integrate into forms for validation
 /// and state management. It presents as a read-only [TextFormField] that,
 /// when tapped, opens a language selection dialog.
-class LanguagePickerFormField extends FormField<language_picker.Language> {
+class LanguagePickerFormField extends FormField<Language> {
   /// Creates a [LanguagePickerFormField].
   ///
   /// The [onSaved], [validator], [initialValue], and [autovalidateMode] are
   /// standard [FormField] properties.
   ///
   /// The [labelText] is displayed as the input field's label.
+  /// The [onChanged] callback is invoked when a new language is selected.
   LanguagePickerFormField({
     super.key,
     super.onSaved,
     super.validator,
     super.initialValue,
     super.autovalidateMode,
     String? labelText,
+    void Function(Language)? onChanged,
   }) : super(
-          builder: (FormFieldState<language_picker.Language> state) {
+          builder: (FormFieldState<Language> state) {
             // This controller is just for displaying the text. The actual
             // value is managed by the FormField's state.
             final controller = TextEditingController(
               text: state.value?.name,
             );
 
+            // Helper to build a simple list item for the dialog.
+            Widget buildDialogItem(Language language) => Row(
+                  children: <Widget>[
+                    Text(language.name),
+                    const SizedBox(width: 8),
+                    Flexible(child: Text('(${language.isoCode})')),
+                  ],
+                );
+
+            void openLanguagePickerDialog() {
+              showDialog<void>(
+                context: state.context,
+                builder: (context) => LanguagePickerDialog(
+                  isSearchable: true,
+                  title: const Text('Select your language'),
+                  onValuePicked: (Language language) {
+                    state.didChange(language);
+                    onChanged?.call(language);
+                    controller.text = language.name;
+                  },
+                  itemBuilder: buildDialogItem,
+                ),
+              );
+            }
+
             return TextFormField(
               controller: controller,
               readOnly: true,
@@ -38,19 +66,7 @@ class LanguagePickerFormField extends FormField<language_picker.Language> {
                 errorText: state.errorText,
                 suffixIcon: const Icon(Icons.arrow_drop_down),
               ),
-              onTap: () {
-                language_picker.showLanguagePicker(
-                  context: state.context,
-                  // Provide a default if no language is selected yet.
-                  selectedLanguage:
-                      state.value ?? language_picker.Languages.english,
-                  onValuePicked: (language_picker.Language language) {
-                    state.didChange(language);
-                    // Update the text in the read-only text field.
-                    controller.text = language.name;
-                  },
-                );
-              },
+              onTap: openLanguagePickerDialog,
             );
           },
         );