Fixed erratic keyboard behavior on TextField

Author: danvick

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [4.0.0-alpha.8] - 23-Jul-2020
+* Fixed erratic keyboard behavior on `FormBuilderTextField`
+* Added documentation for `FormBuilder` & `FormBuilderField` attributes
+* Fixed issue where `FormBuilderRadioGroup` not submitting value
+
 ## [4.0.0-alpha.7] - 22-Jul-2020
 * Added new field - `FormBuilderCheckboxGroup`. Closes #188, 
 * New `FormBuilderRadioGroup` implementation similar to `FormBuilderCheckboxGroup`. Fixes issue where `FormBuilderFieldOption.child` is ignored Closes #335

example/lib/sources/complete_form.dart

@@ -19,15 +19,16 @@ class CompleteFormState extends State<CompleteForm> {
   bool readOnly = false;
   bool showSegmentedControl = true;
   final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();
-  final GlobalKey<FormFieldState> _specifyTextFieldKey =
-      GlobalKey<FormFieldState>();
+  final GlobalKey<FormBuilderFieldState> _genderKey = GlobalKey();
+  final GlobalKey<FormBuilderFieldState> _ageKey = GlobalKey();
+  bool _ageHasError = false;
+  bool _genderHasError = false;
 
   final ValueChanged _onChanged = (val) => print(val);
   var genderOptions = ['Male', 'Female', 'Other'];
 
   @override
   Widget build(BuildContext context) {
-    print(Localizations.localeOf(context));
     return Padding(
       padding: EdgeInsets.all(10),
       child: SingleChildScrollView(
@@ -223,9 +224,22 @@ class CompleteFormState extends State<CompleteForm> {
                     ]),
                   ),
                   FormBuilderTextField(
+                    key: _ageKey,
+                    autovalidate: true,
                     attribute: 'age',
-                    decoration: InputDecoration(labelText: 'Age'),
-                    onChanged: _onChanged,
+                    decoration: InputDecoration(
+                      labelText: 'Age',
+                      suffixIcon: _ageHasError
+                          ? Icon(Icons.error, color: Colors.red)
+                          : Icon(Icons.check, color: Colors.green),
+                    ),
+                    onChanged: (val) {
+                      setState(() {
+                        print(val);
+                        _ageHasError = !_ageKey.currentState.validate();
+                        // _genderHasError = !_fbKey.currentState.fields['gender'].currentState.validate();
+                      });
+                    },
                     // valueTransformer: (text) => num.tryParse(text),
                     validator: FormBuilderValidators.compose([
                       FormBuilderValidators.required(context),
@@ -237,9 +251,14 @@ class CompleteFormState extends State<CompleteForm> {
                     textInputAction: TextInputAction.next,
                   ),
                   FormBuilderDropdown(
+                    key: _genderKey,
+                    // autovalidate: true,
                     attribute: 'gender',
                     decoration: InputDecoration(
                       labelText: 'Gender',
+                      suffix: _genderHasError
+                          ? Icon(Icons.error)
+                          : Icon(Icons.check),
                     ),
                     // initialValue: 'Male',
                     allowClear: true,
@@ -252,6 +271,13 @@ class CompleteFormState extends State<CompleteForm> {
                               child: Text('$gender'),
                             ))
                         .toList(),
+                    onChanged: (val) {
+                      print(val);
+                      setState(() {
+                        _genderHasError = !_genderKey.currentState.validate();
+                        // _genderHasError = _genderKey.currentState.hasError;
+                      });
+                    },
                   ),
                   FormBuilderTypeAhead(
                     decoration: InputDecoration(
@@ -357,57 +383,6 @@ class CompleteFormState extends State<CompleteForm> {
                       color: Colors.red,
                     ),
                   ),
-                  FormBuilderField(
-                    attribute: 'custom',
-                    valueTransformer: (val) {
-                      if (val == 'Other') {
-                        return _specifyTextFieldKey.currentState.value;
-                      }
-                      return val;
-                    },
-                    builder: (FormFieldState<String> field) {
-                      var languages = ['English', 'Spanish', 'Somali', 'Other'];
-                      return InputDecorator(
-                        decoration: InputDecoration(
-                          labelText: 'What\'s your preferred language?',
-                        ),
-                        child: Column(
-                          children: languages
-                              .map(
-                                (lang) => Row(
-                                  children: <Widget>[
-                                    Radio<dynamic>(
-                                      value: lang,
-                                      groupValue: field.value,
-                                      onChanged: (dynamic value) {
-                                        field.didChange(lang);
-                                      },
-                                    ),
-                                    lang != 'Other'
-                                        ? Text(lang)
-                                        : Expanded(
-                                            child: Row(
-                                              children: <Widget>[
-                                                Text(
-                                                  lang,
-                                                ),
-                                                SizedBox(width: 20),
-                                                Expanded(
-                                                  child: TextFormField(
-                                                    key: _specifyTextFieldKey,
-                                                  ),
-                                                ),
-                                              ],
-                                            ),
-                                          ),
-                                  ],
-                                ),
-                              )
-                              .toList(growable: false),
-                        ),
-                      );
-                    },
-                  ),
                   FormBuilderSignaturePad(
                     decoration: InputDecoration(
                       labelText: 'Signature',

lib/src/fields/form_builder_text_field.dart

@@ -140,19 +140,16 @@ class FormBuilderTextField extends FormBuilderField {
           decoration: decoration,
           builder: (FormFieldState field) {
             final _FormBuilderTextFieldState state = field;
-            final effectiveDecoration = (decoration ?? const InputDecoration())
-                .applyDefaults(Theme.of(field.context).inputDecorationTheme);
+            /*final effectiveDecoration = (decoration ?? const InputDecoration())
+                .applyDefaults(Theme.of(field.context).inputDecorationTheme);*/
             void onChangedHandler(String value) {
-              if (onChanged != null) {
-                onChanged(value);
-              }
-              field.didChange(value);
+              state.didChange(value);
             }
 
             return TextField(
               controller: state._effectiveController,
               focusNode: focusNode,
-              decoration: effectiveDecoration.copyWith(
+              decoration: decoration.copyWith(
                 errorText: decoration?.errorText ?? field.errorText,
               ),
               keyboardType: keyboardType,
@@ -217,32 +214,11 @@ class _FormBuilderTextFieldState extends FormBuilderFieldState {
     super.initState();
     if (widget.controller == null) {
       _controller = TextEditingController(text: initialValue);
-    } else {
-      widget.controller.addListener(_handleControllerChanged);
-    }
-  }
-
-  @override
-  void didUpdateWidget(FormBuilderTextField oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (widget.controller != oldWidget.controller) {
-      oldWidget.controller?.removeListener(_handleControllerChanged);
-      widget.controller?.addListener(_handleControllerChanged);
-
-      if (oldWidget.controller != null && widget.controller == null) {
-        _controller =
-            TextEditingController.fromValue(oldWidget.controller.value);
-      }
-      if (widget.controller != null) {
-        setValue(widget.controller.text);
-        if (oldWidget.controller == null) _controller = null;
-      }
     }
   }
 
   @override
   void dispose() {
-    widget.controller?.removeListener(_handleControllerChanged);
     _controller?.dispose();
     super.dispose();
   }
@@ -254,17 +230,4 @@ class _FormBuilderTextFieldState extends FormBuilderFieldState {
       _effectiveController.text = initialValue ?? '';
     });
   }
-
-  void _handleControllerChanged() {
-    // Suppress changes that originated from within this class.
-    //
-    // In the case where a controller has been passed in to this widget, we
-    // register this change listener. In these cases, we'll also receive change
-    // notifications for changes originating from within this class -- for
-    // example, the reset() method. In such cases, the FormField value will
-    // already have been set.
-    if (_effectiveController.text != value) {
-      didChange(_effectiveController.text);
-    }
-  }
 }

lib/src/utils.dart

@@ -2,5 +2,5 @@ String enumValueToString(Object o) => o.toString().split('.').last;
 
 T enumValueFromString<T>(String key, Iterable<T> values) => values.firstWhere(
       (v) => v != null && key == enumValueToString(v),
-  orElse: () => null,
-);
+      orElse: () => null,
+    );

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_form_builder
 description: Package to build Material Form with fields like TextField, DropDown, Switches etc. with ability to create custom FormFields and composability and reuse validation functions.
-version: 4.0.0-alpha.7
+version: 4.0.0-alpha.8
 homepage: https://github.com/danvick/flutter_form_builder
 
 environment: