Get values from separate TextFormField widget in flutter

Question

I have separated my TextFormField Widget from the editing page to clear the clutter.

This is inside my CustomFormField:

class CustomFormField extends StatefulWidget {
  String? val;
  bool? isNumberPadRequired;
  CustomFormField({
    Key? key,
    this.val = '',
    this.isNumberPadRequired = false,
  }) : super(key: key);

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

class _CustomFormFieldState extends State<CustomFormField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      child: Center(
        child: TextFormField(
          initialValue: widget.val!,
          onSaved: (val) {
            print(val);
            if (val!.isNotEmpty) {
              setState(() {
                widget.val = val;
              });
            }
          },
          keyboardType: widget.isNumberPadRequired!
              ? TextInputType.number
              : TextInputType.text,
          textAlign: TextAlign.left,
          decoration: InputDecoration(
            isDense: true,
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(
              vertical: 25.0,
              horizontal: 10.0,
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: CustomColors.secondary,
                width: 2,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

And inside my EditProfilePage I have some string values like name, email and number with the current values:

String email = user.email; // john@john.com
String name = user.name; // John Doe

And inside the Form:

return Form(
  key: _formKey,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      _buildName(),
      ....
    ],
  ),
);

Widget _buildName() {
  return FormFieldWrapper(
    label: "Name",
    child: CustomFormField(
      val: firstName, // newly typed name: Jane Monroe
    ),
  );
}

But when I try to call the _handleUpdate():

  _updateProfile() async {
    (_formKey.currentState as FormState).save();
    print(name);
  }

I am getting the old values i.e John Doe.

Answer 1

You should add the String Function argument to your custom textfield. When call saves method you should call this argument, for the update name or whatever variable.

Example;

class CustomFormField extends StatefulWidget {
  String? val;
  bool? isNumberPadRequired;
  final Fuction(String savedValue) onSaved;

  CustomFormField({
    Key? key,
    this.val = '',
    required this.onSaved,
    this.isNumberPadRequired = false,
  }) : super(key: key);

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

class _CustomFormFieldState extends State<CustomFormField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      child: Center(
        child: TextFormField(
          initialValue: widget.val!,
          onSaved: (val) {
            print(val);
            if (val!.isNotEmpty) {
              widget.onSaved(val);
            }
          },
          keyboardType: widget.isNumberPadRequired!
              ? TextInputType.number
              : TextInputType.text,
          textAlign: TextAlign.left,
          decoration: InputDecoration(
            isDense: true,
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(
              vertical: 25.0,
              horizontal: 10.0,
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: CustomColors.secondary,
                width: 2,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

and should implement inside Form widget;

return Form(
  key: _formKey,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      _buildName(),
      ....
    ],
  ),
);

Widget _buildName() {
  return FormFieldWrapper(
    label: "Name",
    child: CustomFormField(
      val: firstName, // newly typed name: Jane Monroe
      onSaved: (String savedValue){
         name = savedValue;
      },
    ),
  );
}