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

Question

我已经尝试了一切尝试更改文本字段的边框颜色，但它似乎被忽略了。

我尝试过 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),

          )

我想改变发际线的黑色边框，并改变它的颜色和宽度。

当前的图像

Answer 1

使用

enabledBorder

和

focusedBorder

（当文本字段聚焦时）

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

Answer 2

我同意其他答案，但如果您只使用下限，则使用以下代码：

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

Answer 3

您可以使用文本字段的其他边框属性来控制边框颜色。他们是：

1. disabledBorder：当enabled设置为false时激活
2. enabledBorder：当enabled设置为true时激活（默认TextField的enabled属性为true）
3. errorBorder：出现错误（即验证失败）时激活
4. focusedBorder：当我们单击/聚焦文本字段时激活。 FocusedErrorBorder：当出现错误并且我们当前关注该 TextField 时激活。

下面给出了代码片段：

TextField(
enabled: false, // to trigger disabledBorder
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFF2F2F2),
focusedBorder: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(4)),
 borderSide: BorderSide(width: 1,color: Colors.red),
 ),
 disabledBorder: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(4)),
 borderSide: BorderSide(width: 1,color: Colors.orange),
 ),
 enabledBorder: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(4)),
 borderSide: BorderSide(width: 1,color: Colors.green),
 ),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(4)),
 borderSide: BorderSide(width: 1,)
 ),
 errorBorder: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(4)),
 borderSide: BorderSide(width: 1,color: Colors.black)
 ),
 focusedErrorBorder: OutlineInputBorder(
 borderRadius: BorderRadius.all(Radius.circular(4)),
 borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
 ),
 hintText: "HintText",
 hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
 errorText: snapshot.error,
 ),
 controller: _passwordController,
 onChanged: _authenticationFormBloc.onPasswordChanged,
 obscureText: false,
 ),