2

I need to change textfield border color while changing characters based on email or phone validation.

For Example :

  1. When typing an incomplete email at the time border color is set to RED, after completing typing the email at that time border color is set to WHITE.

  2. Set the Red color of the border when textfiled character length is less than 10 at ongoing typing AND set the WHITE color when the character length is rich to 10.

Quick words: change border color while changing character using Getx, Bloc, Provider etc...

Furkan
  • 306
  • 4
  • 17

1 Answers1

1

I have Try it Normal way, but have try it using BLOC State Management this video on You Tube in my Project its to please refer this Video its very helpful to you

E-mail Validation function

  emailValidation(emailValue) {
    return RegExp(
      r'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$',
    ).hasMatch(emailValue);
  }

Your Widget Using TextFormField:

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) => value!.isEmpty
      ? 'Field Not Empty'
      : !emailValidation(value)
          ? 'Enter Valid Email Address'
          : null,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter Email Address',
    labelText: 'Email',
  ),
),

Variable Declaration

final text = TextEditingController();
bool validate = false;

Dispose Method:

  void dispose() {
    text.dispose();
    super.dispose();
  }

Your Widget Using TextField:

 TextField(
          onChanged: (value) {
            setState(() {
              text.text.isEmpty || !emailValidation(text.text)
                  ? validate = true
                  : validate = false;
            });
          },
          controller: text,
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            labelText: 'Enter Email Address',
            errorText: validate ? 'Enter Valid Email' : null,
          ),
        ),
Ravindra S. Patil
  • 11,757
  • 3
  • 13
  • 40
  • 1
    using any state management for ui validation purposes is not an effective approach. why did you choose to refer to blok video here? while i find the answer correct, the video seems unnecessary and not relevant – Olga Jan 12 '23 at 08:15
  • Appreciate your answer but my question is to change border-color not for hint text or validator @ravindra S. Patil – Furkan Jan 12 '23 at 08:31
  • @Furkan you want to change border color only? please run my answer hope you understand what I exact perform – Ravindra S. Patil Jan 12 '23 at 08:34
  • @ravindra S. Patil this is fine for TextFormField, do you have any good example for Textfileld? – Furkan Jan 12 '23 at 08:45
  • @Furkan please check my updated answer using `TextField` hope its help to you – Ravindra S. Patil Jan 12 '23 at 09:46
  • @Furkan Glad to help you, If its helpful to please accept/mark my answer. – Ravindra S. Patil Jan 12 '23 at 10:21