How to change textField underline color?

小开

最佳答案

* * 请参阅下面的更新或参阅 the answer by @GJJ2019 * *

The logical answer would be to use an InputBorder, particularly an 下划线 InputDecorator, and pass it in to the inputdecorator as the border. However, all this does is tell the InputDecorator whether is should use an underline or whatever else you specify.

实际的颜色是基于主题——来源:

Color _getActiveColor(ThemeData themeData) {
if (isFocused) {
switch (themeData.brightness) {
case Brightness.dark:
return themeData.accentColor;
case Brightness.light:
return themeData.primaryColor;
}
}
return themeData.hintColor;
}

因此，要改变颜色，可以这样做(或者为整个应用程序指定主题) :

new Theme(
data: new ThemeData(
primaryColor: Colors.red,
accentColor: Colors.orange,
hintColor: Colors.green
),
child: new TextField(
decoration: new InputDecoration(
hintText: "Enter your email",
labelText: "Email",
labelStyle: new TextStyle(color: const Color(0xFF424242)),
border: new UnderlineInputBorder(
borderSide: new BorderSide(
color: Colors.red
)
)
),
),
),

更新:

这是现在可能做的方式，你会期待它的工作。

decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: theColor),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: theColor),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: theColor),
),
)

小开

刚用过的-:

decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.cyan),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.cyan),
),
),

这对我很有用:)

小开

    decoration: new InputDecoration(
labelText: "Email",
suffixIcon: Icon(Icons.email),
labelStyle: TextStyle(color: Colors.red),
enabledBorder: new UnderlineInputBorder(
borderSide: new BorderSide(color: Colors.red)
)
)

小开

若要更改 整个应用程序的颜色，请使用 ThemeData的 inputDecorationTheme属性。

使用颜色 只有当输入是在焦点(即点击并准备输入) :

MaterialApp(
...
theme: ThemeData(
inputDecorationTheme: InputDecorationTheme(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red)
),
)
)
)

为了使用 一直都是的颜色(即使不在焦点上) ，也要设置 enabledBorder和 border:

MaterialApp(
...
theme: ThemeData(
inputDecorationTheme: InputDecorationTheme(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red)
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
)
)
)

小开

需要更改三个边框。

  enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: _type.color),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: _type.color),
),
border:
OutlineInputBorder(borderSide: BorderSide(color: _type.color)),

小开

使用 TextField 中的 focus edEdge 属性可以更改下划线颜色，如: focusedBorder: new UnderlineInputBorder( borderSide: new BorderSide(color: Colors.black), ),

小开

@override
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context).copyWith(
primaryColor: Colors.transparent,
appBarTheme: AppBarTheme(elevation: 0),
inputDecorationTheme: InputDecorationTheme(
border: UnderlineInputBorder(
borderSide: BorderSide(style: BorderStyle.none, width: 0))));
}

小开

通过使用 InputDecoration，您可以根据需要设置下划线颜色。

TextField(
decoration: InputDecoration(
hintText: "Enter your email",
// [enabledBorder], displayed when [TextField, InputDecoration.enabled] is true
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent),
),
//[focusedBorder], displayed when [TextField, InputDecorator.isFocused] is true
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.redAccent),
),

) )