焦点上的抖动文本字段背景色

时间:2019-01-22 11:49:26

标签: android dart flutter

我有一个四舍五入的文本字段。效果很好,但是当用户点击它时,会出现灰色背景。如何禁用该飞溅效果?

这是我的代码和结果:

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

code

4 个答案:

答案 0 :(得分:15)

要做到这一点,您应该将 filled 设置为 true

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

答案 1 :(得分:5)

它看起来像是由文本字段上的飞溅效果引起的。我找不到为该特定窗口小部件禁用它的方法,但是您可以通过将TextField包装在Theme小窗口中并将splashColor设置为透明来使其透明:

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

答案 2 :(得分:0)

尝试使关注的边框与启用的边框相同,如下所示:

focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.white),
    borderRadius: BorderRadius.circular(25.7),
  ),
  enabledBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.white),
    borderRadius: BorderRadius.circular(25.7),
  ),

答案 3 :(得分:0)

将BorderSide.none用作:

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