Merge pull request #1239 from flutter-form-builder-ecosystem/fix-687

Fix 687 and 1231

Author: deandreamatias

example/lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:example/sources/conditional_fields.dart';
 import 'package:example/sources/dynamic_fields.dart';
+import 'package:example/sources/related_fields.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:form_builder_validators/form_builder_validators.dart';
@@ -123,6 +124,23 @@ class _HomePage extends StatelessWidget {
               );
             },
           ),
+          const Divider(),
+          ListTile(
+            title: const Text('Related Fields'),
+            trailing: const Icon(Icons.arrow_right_sharp),
+            onTap: () {
+              Navigator.of(context).push(
+                MaterialPageRoute(
+                  builder: (context) {
+                    return const CodePage(
+                      title: 'Related Fields',
+                      child: RelatedFields(),
+                    );
+                  },
+                ),
+              );
+            },
+          ),
         ],
       ),
     );

example/lib/sources/related_fields.dart

@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+
+class RelatedFields extends StatefulWidget {
+  const RelatedFields({Key? key}) : super(key: key);
+
+  @override
+  State<RelatedFields> createState() => _RelatedFieldsState();
+}
+
+class _RelatedFieldsState extends State<RelatedFields> {
+  final _formKey = GlobalKey<FormBuilderState>();
+  String country = '';
+  String city = '';
+  List<String> cities = [];
+
+  @override
+  void initState() {
+    country = _allCountries.first;
+    city = _allUsaCities.first;
+    cities = _allUsaCities;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FormBuilder(
+      key: _formKey,
+      child: Column(
+        children: <Widget>[
+          const SizedBox(height: 20),
+          FormBuilderDropdown<String>(
+            name: 'country',
+            decoration: const InputDecoration(
+              label: Text('Countries'),
+            ),
+            initialValue: country,
+            onChanged: (value) {
+              setState(() {
+                country = value ?? '';
+                city = '';
+                changeCities();
+              });
+            },
+            items: _allCountries
+                .map((e) => DropdownMenuItem(
+                      value: e,
+                      child: Text(e),
+                    ))
+                .toList(),
+          ),
+          const SizedBox(height: 10),
+          FormBuilderDropdown<String>(
+            name: 'city',
+            decoration: const InputDecoration(
+              label: Text('Cities'),
+            ),
+            initialValue: city,
+            items: cities
+                .map((e) => DropdownMenuItem(
+                      value: e,
+                      child: Text(e),
+                    ))
+                .toList(),
+          ),
+          const SizedBox(height: 10),
+          MaterialButton(
+            color: Theme.of(context).colorScheme.secondary,
+            child: const Text(
+              "Submit",
+              style: TextStyle(color: Colors.white),
+            ),
+            onPressed: () {
+              _formKey.currentState!.saveAndValidate();
+              debugPrint(_formKey.currentState?.instantValue.toString() ?? '');
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
+  void changeCities() {
+    switch (country) {
+      case 'France':
+        cities = _allFranceCities;
+        break;
+      case 'United States':
+        cities = _allUsaCities;
+        break;
+      default:
+        cities = [];
+    }
+  }
+}
+
+const _allCountries = [
+  'United States',
+  'France',
+];
+
+const _allUsaCities = [
+  'California',
+  'Another city',
+];
+
+const _allFranceCities = [
+  'Paris',
+  'Another city',
+];

lib/src/fields/form_builder_dropdown.dart

@@ -254,47 +254,39 @@ class FormBuilderDropdown<T> extends FormBuilderFieldDecoration<T> {
           builder: (FormFieldState<T?> field) {
             final state = field as _FormBuilderDropdownState<T>;
 
-            void changeValue(T? value) {
-              state.didChange(value);
-            }
-
-            return InputDecorator(
+            final hasValue = items.map((e) => e.value).contains(field.value);
+            return DropdownButtonFormField<T>(
+              isExpanded: isExpanded,
               decoration: state.decoration,
-              isEmpty: state.value == null,
-              child: DropdownButtonHideUnderline(
-                child: DropdownButton<T>(
-                  isExpanded: isExpanded,
-                  items: items,
-                  value: field.value,
-                  style: style,
-                  isDense: isDense,
-                  disabledHint: field.value != null
-                      ? (items
-                              .firstWhereOrNull((dropDownItem) =>
-                                  dropDownItem.value == field.value)
-                              ?.child ??
-                          Text(field.value.toString()))
-                      : disabledHint,
-                  elevation: elevation,
-                  iconSize: iconSize,
-                  icon: icon,
-                  iconDisabledColor: iconDisabledColor,
-                  iconEnabledColor: iconEnabledColor,
-                  onChanged:
-                      state.enabled ? (value) => changeValue(value) : null,
-                  onTap: onTap,
-                  focusNode: state.effectiveFocusNode,
-                  autofocus: autofocus,
-                  dropdownColor: dropdownColor,
-                  focusColor: focusColor,
-                  itemHeight: itemHeight,
-                  selectedItemBuilder: selectedItemBuilder,
-                  menuMaxHeight: menuMaxHeight,
-                  borderRadius: borderRadius,
-                  enableFeedback: enableFeedback,
-                  alignment: alignment,
-                ),
-              ),
+              items: items,
+              value: hasValue ? field.value : null,
+              style: style,
+              isDense: isDense,
+              disabledHint: field.value != null
+                  ? (items
+                          .firstWhereOrNull((dropDownItem) =>
+                              dropDownItem.value == field.value)
+                          ?.child ??
+                      Text(field.value.toString()))
+                  : disabledHint,
+              elevation: elevation,
+              iconSize: iconSize,
+              icon: icon,
+              iconDisabledColor: iconDisabledColor,
+              iconEnabledColor: iconEnabledColor,
+              onChanged:
+                  state.enabled ? (T? value) => state.didChange(value) : null,
+              onTap: onTap,
+              focusNode: state.effectiveFocusNode,
+              autofocus: autofocus,
+              dropdownColor: dropdownColor,
+              focusColor: focusColor,
+              itemHeight: itemHeight,
+              selectedItemBuilder: selectedItemBuilder,
+              menuMaxHeight: menuMaxHeight,
+              borderRadius: borderRadius,
+              enableFeedback: enableFeedback,
+              alignment: alignment,
             );
           },
         );
@@ -305,4 +297,12 @@ class FormBuilderDropdown<T> extends FormBuilderFieldDecoration<T> {
 }
 
 class _FormBuilderDropdownState<T>
-    extends FormBuilderFieldDecorationState<FormBuilderDropdown<T>, T> {}
+    extends FormBuilderFieldDecorationState<FormBuilderDropdown<T>, T> {
+  @override
+  void didUpdateWidget(covariant FormBuilderDropdown<T> oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.items != oldWidget.items) {
+      setValue(initialValue);
+    }
+  }
+}