Change color of focused border on email validation Flutter

Question

i'm trying to reach something like that with Flutter

Anybody has an idea how can i reach that, i was trying with getx and email validation packages but it s not working.

Getx and Email validation package

Answer 1

Widget build(BuildContext context) {
var email = false.obs;
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
  backgroundColor: Colors.black,
  body: Center(
      child: Container(
    height: height / 4,
    width: width / 1.3,
    color: Colors.transparent,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          alignment: Alignment.center,
          height: 50,
          width: width / 1.3,
          color: Colors.transparent,
          child: GestureDetector(
            onTap: () {
              setState(() {
                onTaps = !onTaps;
              });
            },
            child: Container(
              alignment: Alignment.center,
              height: 50,
              child: Form(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                child: Obx(
                  () => TextFormField(
                    onChanged: (asd) {
                      if (EmailValidator.validate(asd)) {
                        email(true);
                      } else {
                        email(false);
                      }
                    },
                    keyboardType: TextInputType.emailAddress,
                    textAlign: TextAlign.start,
                    controller: _emailcontroller,
                    decoration: InputDecoration(
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: email.value ? Colors.amber : Colors.red,
                            width: 2),
                      ),

                      suffixIcon: _emailcontroller.text.isEmpty
                          ? Container(
                              height: 0,
                              width: 0,
                            )
                          : GestureDetector(
                              onTap: () => _emailcontroller.clear(),
                              child: Icon(
                                Icons.clear,
                                size: 20,
                                color: Color.fromARGB(
                                  255,
                                  128,
                                  128,
                                  128,
                                ),
                              ),
                            ),
                      filled: true, //<-- SEE HERE
                      fillColor: Color.fromARGB(255, 164, 164, 164),
                      hintText: "Your phone number or Email",

                      hintStyle: TextStyle(
                        color: Color.fromARGB(
                          255,
                          128,
                          128,
                          128,
                        ),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          width: 0.4,
                        ),
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),