Flutter：验证后更改边框颜色

Question

我想在验证成功时将 TextFormField 的 borderColor 更改为绿色。 虽然失去焦点时颜色不应该褪色。有没有类似successBorder类似error/focusedBorder.

的东西

class FormLayout extends StatelessWidget {
  FormLayout({Key? key}) : super(key: key);

  final _nameController = TextEditingController();
  final _ageController = TextEditingController();

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Form(
        key: _formKey,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(
          children: [
            TextFormField(
              validator: validateName,
              controller: _nameController,
              decoration: InputDecoration(
                filled: true,
                fillColor: const Color.fromARGB(0, 255, 255, 255),
                labelText: "Name",
                labelStyle:
                    const TextStyle(color: Color.fromARGB(255, 90, 98, 104)),
                contentPadding: const EdgeInsets.only(left: 10),
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8),
                  ),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.red),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(height: 10),
            TextFormField(
              validator: validateAge,
              controller: _ageController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                filled: true,
                fillColor: const Color.fromARGB(0, 255, 255, 255),
                labelText: "Age",
                labelStyle:
                    const TextStyle(color: Color.fromARGB(255, 90, 98, 104)),
                contentPadding: const EdgeInsets.only(left: 10),
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8),
                  ),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.red),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all(Colors.deepPurple[700]),
                  minimumSize: MaterialStateProperty.all(
                    const Size.fromHeight(30),
                  ),
                ),
                onPressed: () {
                  //createRecord();
                },
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 15, horizontal: 25),
                  child: Text(
                    "Add",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                )),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );

    String? validateName(String? name) {
      if (name == null || name.isEmpty) {
        return "*required";
      } else if (name.length > 10) {
        return "Name should not be longer than 10 characters";
      }
      return null;
    }

    String? validateAge(String? age) {
      if (age == null || age.isEmpty) {
        return "*required";
      } else if (age.length > 3) {
        return "Invalid age";
      }
      return null;
    }
  }

Answer 1

在 TextFormField 中，有一个名为 enabledBorder 的参数，当启用 InputDecorator 且未显示错误时显示。

TextFormField(
  decoration: InputDecoration(
    labelText: "Resevior Name",
    fillColor: Colors.white,
    enabledBorder:OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.white, width: 2.0),
        borderRadius: BorderRadius.circular(25.0),
      ),
    ),
  )

Answer 2

创建一个变量来检查 TextField 是否经过验证，然后在 TextField.

的 decoration 属性中使用 enabledBorder:

bool _validated = false;

验证字段后，_validated = true;

这是 TextField 代码

TextFormField(
               validator: validateAge,
                controller: _ageController,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color.fromARGB(0, 255, 255, 255),
                  labelText: "Age",
                  labelStyle:
                  const TextStyle(color: Color.fromARGB(255, 90, 98, 104)),
                  contentPadding: const EdgeInsets.only(left: 10),
                  border: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.red),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderSide:  BorderSide(color: _validated? Colors.green :Colors.grey),
                    borderRadius: BorderRadius.circular(12),
                  ),

                ),
              ),

Answer 3

感谢 and

的回答

这是我在验证后 更改 TextFormField 的 borderColor 所做的 :

1 - Create a Stateful widget

2 - Declare varibles for each TextFormField to hold the Validation state

3 - Create a formKey to track the formState and set autovalidateMode: AutovalidateMode.onUserInteraction

4 - Use validator to validate TextFormFields

5 - Use onChanged to update the state of each TextFormField by validation variables declared earlier

6 - Set the border color based on the value of the validation variable

工作代码：

class FormLayout extends StatefulWidget {
  const FormLayout({Key? key}) : super(key: key);

  @override
  State<FormLayout> createState() => _FormLayoutState();
}

class _FormLayoutState extends State<FormLayout> {
  final _nameController = TextEditingController();

  final _ageController = TextEditingController();

  final _formKey = GlobalKey<FormState>();

  bool _isNameValidated = false;

  bool _isAgeValidated = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Form(
        key: _formKey,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(
          children: [
            TextFormField(
              validator: validateName,
              onChanged: (val) {
                setState(() {
                  _isNameValidated = true;
                });
              },
              controller: _nameController,
              decoration: InputDecoration(
                filled: true,
                fillColor: const Color.fromARGB(0, 255, 255, 255),
                labelText: "Name",
                labelStyle:
                    const TextStyle(color: Color.fromARGB(255, 90, 98, 104)),
                contentPadding: const EdgeInsets.only(left: 10),
                border: const OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.amber),
                  borderRadius: BorderRadius.all(
                    Radius.circular(8),
                  ),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.red),
                  borderRadius: BorderRadius.circular(12),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: BorderSide(
                      color: _isNameValidated ? Colors.green : Colors.amber),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: BorderSide(
                      color: _isNameValidated ? Colors.green : Colors.grey),
                ),
              ),
            ),
            const SizedBox(height: 10),
            TextFormField(
              validator: validateAge,
              onChanged: (val) {
                setState(() {
                  _isAgeValidated = true;
                });
              },
              controller: _ageController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                filled: true,
                fillColor: const Color.fromARGB(0, 255, 255, 255),
                labelText: "Age",
                labelStyle:
                    const TextStyle(color: Color.fromARGB(255, 90, 98, 104)),
                contentPadding: const EdgeInsets.only(left: 10),
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8),
                  ),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.red),
                  borderRadius: BorderRadius.circular(12),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: BorderSide(
                      color: _isNameValidated ? Colors.green : Colors.amber),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: _isAgeValidated ? Colors.green : Colors.grey),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all(Colors.deepPurple[700]),
                  minimumSize: MaterialStateProperty.all(
                    const Size.fromHeight(30),
                  ),
                ),
                onPressed: () {
                  //createRecord();
                },
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 15, horizontal: 25),
                  child: Text(
                    "Add",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                )),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );
  }


  //Validator Functions

  String? validateName(String? name) {
    if (name == null || name.isEmpty) {
      return "*required";
    } else if (name.length > 10) {
      return "Name should not be longer than 10 characters";
    }
    return null;
  }

  String? validateAge(String? age) {
    if (age == null || age.isEmpty) {
      return "*required";
    } else if (age.length > 3) {
      return "Invalid age";
    }
    return null;
  }

Flutter：验证后更改边框颜色

Flutter : change bordercolor after validation

flutter

flutter-layout

textformfield