简体   繁体   English

Flutter - 如何更改 TextField 边框颜色?

[英]Flutter - how to change TextField border color?

I've tried everything to try and change the border color of textfield but it seems to be ignored.我已经尝试了一切尝试更改文本字段的边框颜色,但它似乎被忽略了。

I've tried sideBorder(even width is ignored too), hintStyle, applying a specific theme to only this widget and they all seem to be ignored.我试过 sideBorder(甚至宽度也被忽略),hintStyle,仅将特定主题应用于此小部件,它们似乎都被忽略了。

child: new Theme(
      data: ThemeData(
      primaryColor: Colors.white,
      accentColor: Colors.white,
      hintColor: Colors.white //This is Ignored,
      inputDecorationTheme: InputDecorationTheme(
               border: OutlineInputBorder(
               borderSide: BorderSide(color: Colors.white) //This is Ignored
                    ),
                  ),
              ),
      child: new TextField(
             style: TextStyle(color: Colors.white, decorationColor: Colors.white),
             cursorColor: Colors.white,
             decoration: InputDecoration(
             border: new OutlineInputBorder(
             //borderRadius: const BorderRadius.all(Radius.circular(30.0)),
             borderSide: BorderSide(color: Colors.white, width: 0.0) //This is Ignored,
                      ),
                      hintText: "Search people",
                    ),
                  ),
                  //new Divider(color: Colors.white, height: 20),

          )

I'd like to change that hairline looking black border and alter its color and its width.我想改变看起来很细的黑色边框并改变它的颜色和宽度。

Image of what it currently is目前的形象

Use enabledBorder and focusedBorder (when the textfield is focused) 使用enabledBorderfocusedBorder (当文本字段为焦点时)

InputDecoration(
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.red, width: 5.0),
                  ),
              focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.blue, width: 3.0),
                  ),
              hintText: "Search people",
            ),

I agree with the other answers, but if you only use the lower bound, then use this code:我同意其他答案,但如果您只使用下限,则使用此代码:

    TextField(
          decoration: InputDecoration(
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.black)),
          ),
        )

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM