Resetting TextfieldController for all textfields, using provider

Question

I'm having a problem trying to figuring out the proper way on how to do this. Basically in my app, I want to reset all the fields for "cleanup" by the user. I can reset everything, but the TextFields. The only way that I found to solve the problem is by using the if that you can see inside the Consumer. I don't think though it's the proper way on how to handle this type of thing.

I also thought to push inside my provider class all the controller and then reset them, but I think it's still too heavy. I'm trying to find the cleanest and lightest solution, even to learn what's the best practice in these situations.

Thanks in advance!

return Provider.of<Provider_Class>(context, listen: false).fields[_label] != null ? SizedBox(
      height: 57.5,
      child: Consumer<Provider_Class>(builder: (context, provider, child) {
        if (provider.resetted == true) {
          _controller.text = "";
        }
        return Material(
          elevation: this.elev,
          shadowColor: Colors.black,
          borderRadius: new BorderRadius.circular(15),
          animationDuration: new Duration(milliseconds: 500),
          child: new TextField(
            focusNode: _focusNode,
            keyboardAppearance: Brightness.light,
            style: Theme.of(context).textTheme.headline5,
            controller: _controller,
            keyboardType: TextInputType.number,
            textAlign: TextAlign.end,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(8),
              _whichLabel(widget.label),
            ],
            decoration: new InputDecoration(
              enabledBorder: new OutlineInputBorder(
                borderRadius: new BorderRadius.circular(15),
                borderSide: new BorderSide(width: 1.2, color: CliniLiliac300),
              ),
              focusedBorder: new OutlineInputBorder(
                borderRadius: new BorderRadius.circular(15),
                borderSide: new BorderSide(width: 2.5, color: CliniLiliac300),
              ),
              filled: true,
              fillColor: Colors.white,
              hintText: "0.0",
              hintStyle: new TextStyle(fontSize: 15, color: Colors.black, fontFamily: "Montserrat"),
            ),
            onChanged: (val) {
              var cursorPos = _controller.selection;
              val = val.replaceAll(",", ".");
              if (val == "") {
                provider.fields[_label] = 0.0;
              } else if (double.parse(val) > provider.measure[_label] &&
                  provider.measure[_label] != 0) {
                provider.fields[_label] % 1 == 0
                    ? _controller.text = provider.fields[_label].toString().split(".")[0]
                    : _controller.text = provider.fields[_label].toString();

                if (cursorPos.start > _controller.text.length) {
                  cursorPos = new TextSelection.fromPosition(
                    new TextPosition(offset: _controller.text.length),
                  );
                }
                _controller.selection = cursorPos;
              } else {
                provider.fields[_label] = double.parse(val);
              }
              provider.calculateResultRA();
            },
          ),
        );
      }),
    ) : SizedBox();
  }

Navaneeth P · Answer 1 · 2020-08-02T16:32:25.990

Use TextFormField instead of TextField. TextFormField has several callbacks like validator, onSaved, onChanged, onEditingComplete, onSubmitted, ...

You can connect all your TextFormFields by wrapping it in a Form. This form should be given a GlobalKey so that you can identify the Form and call methods on FormState.

final _form = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  // ...

    return Form(
      key: _form,
      child: // build Material with TextFormFields
    );
}

Now to call onSaved on each TextFormField, you can call _form.currentState().save(). To reset every TextFormField you can call _form.currentState().reset().

You can get more information about how to build a Form and the functions you can call on FomState here:

https://flutter.dev/docs/cookbook/forms/validation

https://api.flutter.dev/flutter/widgets/FormState-class.html

Yes it makes sense to actually switch to Form, but i'm resetting from my provider class, how shall i manage this? And btw TextFormFields acts weird when clicked. I have to double click to be able to write, while with textField this wasn't the case. Also even though Form makes sense, I prefer to have something that changes constantly. I'm not saving anything, i'm listening to changes constantly, since it's not needed to save the data. — Nindo, Aug 02 '20 at 17:16

Resetting TextfieldController for all textfields, using provider

1 Answers1