焦点上的颤动文本域背景颜色

我有一个圆形的文本字段。它工作得很好，但当用户点击它，灰色背景出现。我怎样才能禁用溅射效果？

这是我的代码和结果:

        new Container(
margin: const EdgeInsets.only(left: 30.0, top: 60.0, right:
30.0),
height: 40.0,
decoration: new BoxDecoration(


color: Colors.white,


borderRadius: new BorderRadius.all(new Radius.circular(25.7))
),


child: new Directionality(


textDirection: TextDirection.ltr,
child: new TextField(
controller: null,
autofocus: false,


style:
new TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
decoration: new InputDecoration(
filled: true,


fillColor: Colors.white,
hintText: 'Username',
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 8.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white),
borderRadius: new BorderRadius.circular(25.7),
),
enabledBorder: UnderlineInputBorder(
borderSide: new BorderSide(color: Colors.white),
borderRadius: new BorderRadius.circular(25.7),
),
),
))),

enter image description here

169659 次浏览
小开
最佳答案

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),
),
),
),
);
小开

use BorderSide.none as:

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

“Flutter Textfield background color”

*Change border color of TextField in flutter

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

text fieldform color flutter

TextField(
style: TextStyle(color: Colors.red),
decoration: InputDecoration(fillColor: Colors.orange, filled: true),
)

Flutter TextFormField background color

TextFormField(
decoration: InputDecoration(
labelText: "Resevior Name",
fillColor: Colors.white,
filled: true, // dont forget this line
...
)
...
)

Flutter textfield label color

labelStyle: TextStyle(
color: Colors.white,
)

Color textfield text flutter

TextField(
style: TextStyle(color: Colors.white),
...
)

提交答案