Flutter onChanged and onSaved together for Text Inputs

Question

I've been trying to implement a small form in Flutter and found that the onChanged and onSaved events are not available together on either of the 2 TextInput widgets.

onChanged is defined in TextField widget and onSaved is defined in TextFormField widget. One workaround is to use the TextEditingController to watch for changes but that adds a bunch of additional lines of code to add listeners, remove listeners and dispose. Is there a better solution to address this issue?

Answer 1

You can create your own widget to support that method, like this :

    import 'package:flutter/material.dart';

    class MyTextField extends StatefulWidget {
      final Key key;
      final String initialValue;
      final FocusNode focusNode;
      final InputDecoration decoration;
      final TextInputType keyboardType;
      final TextInputAction textInputAction;
      final TextStyle style;
      final TextAlign textAlign;
      final bool autofocus;
      final bool obscureText;
      final bool autocorrect;
      final bool autovalidate;
      final bool maxLengthEnforced;
      final int maxLines;
      final int maxLength;
      final VoidCallback onEditingComplete;
      final ValueChanged<String> onFieldSubmitted;
      final FormFieldSetter<String> onSaved;
      final FormFieldValidator<String> validator;
      final bool enabled;
      final Brightness keyboardAppearance;
      final EdgeInsets scrollPadding;
      final ValueChanged<String> onChanged;

      MyTextField(
          {this.key,
          this.initialValue,
          this.focusNode,
          this.decoration = const InputDecoration(),
          this.keyboardType = TextInputType.text,
          this.textInputAction = TextInputAction.done,
          this.style,
          this.textAlign = TextAlign.start,
          this.autofocus = false,
          this.obscureText = false,
          this.autocorrect = true,
          this.autovalidate = false,
          this.maxLengthEnforced = true,
          this.maxLines = 1,
          this.maxLength,
          this.onEditingComplete,
          this.onFieldSubmitted,
          this.onSaved,
          this.validator,
          this.enabled,
          this.keyboardAppearance,
          this.scrollPadding = const EdgeInsets.all(20.0),
          this.onChanged});

      @override
      _MyTextFieldState createState() => _MyTextFieldState();
    }

    class _MyTextFieldState extends State<MyTextField> {
      final TextEditingController _controller = new TextEditingController();

      _onChangedValue() {
        if (widget.onChanged != null) {
          widget.onChanged(_controller.text);
        }
      }

      @override
      void initState() {
        _controller.addListener(_onChangedValue);
        super.initState();
      }

      @override
      void dispose() {
        _controller.removeListener(_onChangedValue);
        _controller.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return TextFormField(
          key: widget.key,
          controller: _controller,
          initialValue: widget.initialValue,
          focusNode: widget.focusNode,
          decoration: widget.decoration,
          keyboardType: widget.keyboardType,
          textInputAction: widget.textInputAction,
          style: widget.style,
          textAlign: widget.textAlign,
          autofocus: widget.autofocus,
          obscureText: widget.obscureText,
          autocorrect: widget.autocorrect,
          autovalidate: widget.autovalidate,
          maxLengthEnforced: widget.maxLengthEnforced,
          maxLines: widget.maxLines,
          onEditingComplete: widget.onEditingComplete,
          onFieldSubmitted: widget.onFieldSubmitted,
          onSaved: widget.onSaved,
          validator: widget.validator,
          enabled: widget.enabled,
          keyboardAppearance: widget.keyboardAppearance,
          scrollPadding: widget.scrollPadding,
        );
      }
    }

And include it in your page:

    Padding(
              padding: EdgeInsets.all(20.0),
              child: Center(child: MyTextField(
                onChanged: (value) {
                  print("testing onchanged $value");
                },
              )),
            )