Flutter textfield background color on focus Flutter textfield background color on focus dart dart

Flutter textfield background color on focus


It looks like it's caused by the splash effect on the textfield. I couldn't find a way to disable it for that specific widget but you can make it transparent by wrapping your TextField in a Theme widget and setting the splashColor to transparent:

Theme(  data: Theme.of(context).copyWith(splashColor: Colors.transparent),  child: TextField(    autofocus: false,    style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),    decoration: InputDecoration(      filled: true,      fillColor: Colors.white,      hintText: 'Username',      contentPadding:          const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),      focusedBorder: OutlineInputBorder(        borderSide: BorderSide(color: Colors.white),        borderRadius: BorderRadius.circular(25.7),      ),      enabledBorder: UnderlineInputBorder(        borderSide: BorderSide(color: Colors.white),        borderRadius: BorderRadius.circular(25.7),      ),    ),  ),);


To do it you should set filled to true.

TextField(decoration: InputDecoration( fillColor: Colors.red, filled: true)),


use BorderSide.none as:

border: OutlineInputBorder(    borderRadius: BorderRadius.circular(10.0),    borderSide: BorderSide.none,),