Custom Input Text

This package facilitates the validation of emails, password with button to view the content, blocking of special characters when the text field is destined for a name or a telephone number, etc.

Example

email

in this example we can validate the email with a bool emailValidation inside a StatefulWidget

final emailCtrl = TextEditingController();
bool emailValidation;

 CustomInputTextState(
           placeholder: 'Correo Electrónico',
           keyboardType: TextInputType.emailAddress, // if keyboarType is emailAddress, validation will be applied else default is Text
           icon: Icons.alternate_email_outlined, //is optional
           textController: emailCtrl,
           validation: emailValidation, //in this case is optional
           onChanged: (value) {
             setState(() {
               emailValidation = validateEmail(value);
             });
           },
       );

password

In this example we can make the password visible just by typing isPassword: true and sending validations through onChange

final passwordCtrl = TextEditingController();
bool passwordValidation;

CustomInputTextState(
                  placeholder: 'contraseña',
                  icon: Icons.lock_outline_rounded,
                  textController: passwordCtrl,
                  isPassword: true,
                  validation: passwordValidation, // if is true, the border of input will be color green else red
                  onChanged: (value) {
                    if (passwordCtrl.text.length >= 8 &&
                        passwordCtrl.text == passCtrl.text) {
                      setState(() {
                        passwordValidation = true;
                      });
                    } else {
                      setState(() {
                        passwordValidation = false;
                      });
                    }
                  },
                );

Available customizations

  • placeholder = is required
  • textController = is required
  • icon = is the prefixIcon but is optional
  • keyboardType = default is a TextInputType.text
  • isPassword = default is false
  • isAName = default is false, but when is true only allow characters from a-z
  • isAPhone = default is false, but when is true only allow numbers 0-9
  • onChanged = this is a function that can be used to validate or get the value of the text field
  • validation = this is a property to visually show if what the user wrote is ok or not
  • enabled = default is true, when it is false it does not allow writing
  • backgroundColor = defalut is Colors.white
  • onfocusColor = defalutl is Colors.blue
  • shadow = default is true
  • borderRadius = default hava a radius of 30.0 but it can change to other value

Libraries

custom_input_text