FORMS, no further idea how to implement a TextField with a CupertinoApp

128 views Asked by At

This drives me nuts. I am trying to get a CupertinoTextField into a Form. But no matter what I try, everything turns out as a dead end.

The complication of my case is, the form in embedded into the Flushbar package, which provides kind of a snackbar to my CupertinoApp. And this is a stateless widget ;-(

 return Flushbar(
      backgroundColor: Common.inputBlue,
      userInputForm : Form(
        key: _formKey,
        child: Column(
            children: <Widget> [
              _DelayStatusFormField(
                initialValue: task.delayStatus,
                onSaved: (value) => otherFormDataSubmit.delayStatus = value,
                //onSaved: (value) => this.delayStatus = value,
              ),
              CupertinoTextField(
                controller: _delayTec,
                onChanged: (text) {
                  state.didChange(text);
                },
              ),
            ]),
         ),
 );

In the onChanged section I intend to implement some validation, so I need kind of a rebuild. But setState obviously doesn't work without a proper state.

Using TextFormField also looks kind of dodgy, because I do not only have to embed this in Material( but in loads of further localization Widgets.

The most desirable solution, is this one where I tried several variants: embed the CupertinoTextField in a FormField class

class _DelayFormField extends FormField<String> {
  _DelayFormField({
    FormFieldSetter<String> onSaved,
    String initialValue,
    bool enabled,
    GlobalKey key,
  }) : super(
      onSaved: onSaved,
      initialValue: initialValue,
      key: key,
      builder: (FormFieldState<String> state) {
        //TextEditingController inputTec = TextEditingController(text: initialValue);
        return Column(children: [
          SizedBox(
              width: 100, height: 30,
              child: CupertinoTextField(
                //controller: inputTec,
                enabled: true,
                onChanged: (text) {
                  initialValue = text;
                  state.didChange(text);
                },
              )),
        ]);
      }
  );
}

The problem here, I the TextEditingController is reinitialized on any rebuild with initialVale, loosing my input. I have got around this by assigning the input to initialVale, but the cursor is then always set leading to the prefilled digits. So you type the number backwards. Since everything is in the class' initialization, I cannot find a spot where to initialize the TextEditingController outside of the build method.

Any other idea on how to solve this? Getting such a class working would be great, since one could then simply re-use this class, frequently.

0

There are 0 answers