如何在 flutter 的 onChanged(更改字符)处更改 TextField 边框 colored颜色

发布于01月12日

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

例如:

当此时输入不完整的邮箱时，边框 colored颜色设置为红色，此时完成输入邮箱后，边框 colored颜色设置为白色.
在正在进行的打字中，当文本文件的字符长度小于10时，设置边框的红色；当字符长度丰富到10时，设置白色.

Quick words:在使用Getx、Block、Provider等更改字符时更改边框 colored颜色 ...

推荐答案

我已经try 了正常的方式，但有try 使用BLOC State Management this视频在您管在我的项目它的请参考这个视频它对你很有帮助

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,
          ),
        ),