Create a Statefule widget with a TextFormFiled inside

April 11, 2022

I have an application that has a lot of forms with lots of UI changes.
Everytime I add a TextFormField to a form, I have to add so many lines of code:

Widget usernameCodeTextFiled() {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: TextFormField(
      controller: _usernameTextController,
      keyboardType: TextInputType.text,
      onChanged: (_) => setState(() {}),
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        labelText: 'Username',
        hintText: 'Enter your username',
        errorText: _submitted
            ? usernameValidationMessage(_usernameTextController.text)
            : null,
      ),
    ),
  );
}

So I decided to create a Stateful widget with a TextFormField and its layout and use that instead of directly using TextFormField:

class TextEntry extends StatefulWidget {

//...

  @override
  State<TextEntry> createState() => _TextEntryState();
}

class _TextEntryState extends State<TextEntry> {
// ...

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        controller: _textController,
        keyboardType: _keyboardType,
        onChanged: _onChanged,
        decoration: InputDecoration(
          border: const OutlineInputBorder(),
          labelText: _labelText,
          hintText: _hintText,
          errorText: _errorMessage,
        ),
      ),
    );
  }
}

This resulted a much cleaner and more reusable code:

//...
TextEntry(
  textController: _usernameTextController,
  keyboardType: TextInputType.text,
  onChanged: (_) => setState(() {}),
  labelText: 'Username',
  hintText: 'Enter your username',
  errorMessage: _submitted
      ? usernameValidationMessage(_usernameTextController.text)
      : null,
),
//...

The only problem I have is that form validation will not work this way. How can I enable form validation for my TextEntry widget?

>Solution :

you have to define validator in textEntry like this

final String? Function(String?)? validator;

TextFormField(
 validator: validator,
)

You can use like this

 TextEntry(
validator: (value) {
                  if (value!.isEmpty) {
                       return StringProvider.pleaseEnterPass;
                   } else if (value.length < 8) {
                     return StringProvider.passwordLength;
                   }
         },
)