TextFormField Widget – Flutterholic

The TextFormField widget in Flutter is a form input widget that allows the user to enter and edit text. It’s typically used in forms to capture information such as usernames, passwords, and email addresses.

The constructor for the TextFormField widget takes several optional parameters, including initialValue (which sets the initial value of the form field), validator (which is used to validate the input), and onSaved (which is called when the form is saved). The most important parameter is probably the decoration parameter, which is used to decorate the form field with various visual elements such as labels, borders, and icons.

Here’s an example of a simple TextFormField widget that captures a user’s email address:

TextFormField(
  decoration: InputDecoration(
    labelText: 'Email',
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your email address';
    }
    return null;
  },
  onSaved: (value) {
    // Do something with the email address
  },
)

In this example, we set the decoration parameter to include a label (“Email”) and a border. We also set the keyboardType parameter to TextInputType.emailAddress to display the appropriate keyboard on mobile devices. Finally, we set the validator parameter to check if the input value is empty, and the onSaved parameter to perform some action with the email address when the form is saved.

Example using a complex validator

In this example, the validator function checks if the value is empty, if it is less than 8 characters long, and if it meets certain complexity requirements for a password. If any of these conditions are not met, a corresponding error message is returned. If all conditions are met, null is returned to indicate that the value is valid. This validator can be used to ensure that passwords entered in the form meet certain security standards.

TextFormField(
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a value';
    }
    if (value.length < 8) {
      return 'Password must be at least 8 characters long';
    }
    if (!RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$').hasMatch(value)) {
      return 'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character (!@#\$&*~)';
    }
    return null;
  },
  decoration: InputDecoration(
    labelText: 'Password',
    border: OutlineInputBorder(),
  ),
  obscureText: true,
),

Example using more parameters of TextFormField

In this example, we are using the TextEditingController to set an initial value for the TextFormField. We are also setting some optional parameters such as the decoration, keyboardType, textCapitalization, validator, onChanged, onSaved, maxLength, maxLengthEnforcement, and obscureText. These parameters allow us to customize the behavior and appearance of the TextFormField to suit our needs.

TextEditingController _controller = TextEditingController(text: 'Initial Value');

TextFormField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    icon: Icon(Icons.person),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
  keyboardType: TextInputType.emailAddress,
  textCapitalization: TextCapitalization.words,
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your username';
    }
    return null;
  },
  onChanged: (value) {
    // Do something with the user input
  },
  onSaved: (value) {
    // Save the user input
  },
  maxLength: 20,
  maxLengthEnforcement: MaxLengthEnforcement.enforced,
  obscureText: true,
);

initialValue: This parameter sets the initial value of the field. In our example, the initial value is set to “John Doe”.
controller: This parameter sets a controller for the field, which can be used to manipulate its value or listen to changes. In our example, we have used a TextEditingController.
decoration: This parameter sets the decoration for the field, which can include labels, borders, and other visual elements. In our example, we have used a InputDecoration with a label text of “Name” and a border.
validator: This parameter sets a function to validate the input value. In our example, we have used a custom validator function that checks if the input contains at least two words.
onSaved: This parameter sets a function to save the input value when the form is saved. In our example, we have used a function that simply prints the value to the console.
textCapitalization: This parameter is used to set the capitalization behavior for the text entered in the form field. There are several options: TextCapitalization.none (default), TextCapitalization.words, TextCapitalization.sentences, and TextCapitalization.characters.
onChanged: This parameter is a callback that is called when the value of the text field changes. It takes a function that has the new value of the field as its argument.
maxLength: This parameter sets the maximum length of the input text. If the user tries to input more characters than the specified maxLength, they will be blocked from typing.
maxLengthEnforcement: This parameter determines how to enforce the maxLength limit. The options are MaxLengthEnforcement.none (default), MaxLengthEnforcement.enforced, and MaxLengthEnforcement.truncateAfterCompositionEnds. If set to enforced, the user will not be able to enter more characters than maxLength. If set to truncateAfterCompositionEnds, the text will be truncated after the user has finished composing their input, which allows certain input methods (such as voice dictation) to still work.
obscureText: This parameter is used to obscure the text entered in the form field. If set to true, the text will be replaced with asterisks or circles. This is often used for password fields.