I want to change the borderColor of the TextFormField to a green color on successfull validation. The color should not fade on losing focus though. Is there something like successBorder similar to 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;
    }
  }

CodePudding user response：

In the TextFormField, there is a parameter called enabledBorder to display when the InputDecorator is enabled and is not showing an error.

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

CodePudding user response：

create a variables to check whether the TextField is validated or not, then use enabledBorder: within decoration property of TextField.

bool _validated = false;

After validating a field make the _validated = true;

Here's the TextField Code

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

                ),
              ),