how to change background color textformfield in flutter when error condition?

Question

how to change background color textformfield in flutter when error condition?

i want to build textfield like this

this is my code

class FormData extends StatefulWidget{

@override

FormDataState createState() => FormDataState();

}

class FormDataState extends State{

  final formKey = GlobalKey<FormState>();

  TextEditingController _accidentCtrl = TextEditingController();

  TextEditingController _passCtrl = TextEditingController();

  bool kondisiObscure = true;

  bool inputteks  = false;


 void validateAndSave() {
final FormState form = formKey.currentState;
if (form.validate()) {
  inputteks  = false;

} else {
  inputteks  = true;

}

}

Padding(
                        padding: const EdgeInsets.only(top: 25, right: 25, left: 25),
                        child: Container(

                          width: 315,
                          decoration: BoxDecoration(
                            color: Color(0xffF2F3F5),
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: TextFormField(

                            validator: (value) {
                              if (value.isEmpty) {
                               return 'Harap diisi';
                              }
                              else{
                                inputteks = false;

                              }
                            },
                            textAlign: TextAlign.start,
                            decoration: InputDecoration(

                                fillColor: Color(0xfffaebeb),
                                filled: inputteks,
                                contentPadding: EdgeInsets.all(12),
                                border: InputBorder.none,
                                focusedBorder: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(10.0),
                                  borderSide:  BorderSide(color: Color(0xff3F8AE0) ),

                                ),
                                enabledBorder: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(10.0),
                                  borderSide:  BorderSide(color: Colors.black12, width: 1),
                                ),
                                errorBorder: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(10.0),
                                  borderSide:  BorderSide(color: Color(0xffE64646) ),

                                ),
                                disabledBorder: InputBorder.none,),

                            autofocus: true,
                            controller: _accidentCtrl,
                            onChanged: (String value) {
                              formProvider.namatext(value);
                              _accidentCtrl.selection = TextSelection.fromPosition(TextPosition(offset: _accidentCtrl.text.length));
                              },
                          ),
                        ),
                      ),

 Container(
            width: 200,
            height: 40,
            child: RaisedButton(
                onPressed: validateAndSave,
                color: ungu,
                shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(17),
                  ),
              child: Text(
                'Submit', style: putihstyle.copyWith(
                  fontSize: 16,),
                ),
            ),
          ),],
        ),

      ),
    ),

is it right or not? because in textfield not showing backgroundcolor

Answer 1

I get some referencee about this case, you can look at here,

you can look my code at here, i hope that will help you ^_^

Answer 2

You need to use setState when you set the inputteks. Just change your validateAndSave method as:

void validateAndSave() {
   final FormState form = formKey.currentState;
   setState(() {
      inputteks = !form.validate()
   });
}

You need to also use the setState in your TextFormField's onChanged.