如何更改文本字段下划线颜色？

Question

我是 flutter 和 dart 的新手。目前，在我的一个个人项目中使用它。

在我的所有表单中，textField 的下划线都显示为蓝色。 我想将其更改为其他颜色。 我正在使用的这段代码就像......

new TextField(
  controller: this._emailController,
  decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(
          color: const Color(0xFF424242)
      )
  ),

),

无法理解如何实现这一目标。

注意：我知道这里有一个类似的问题Change TextField's Underline in Flutter 。 但是，那里也没有完全解决。 此外，还有一个看起来与我的链接相似的链接Changing EditText bottom line color with appcompat v7但实际上属于 Android 开发，使用的是 JAVA 而不是 DART(flutter)，我正在使用它来开发我的 android 应用程序。 所以，请不要对这些链接感到困惑。

Answer 1

刚刚使用-：

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

它对我有用:)

Answer 2

** 请参阅下面的更新或查看@GJJ2019 的答案**

合乎逻辑的答案是使用 InputBorder，尤其是UnderlineInputDecorator ，并将其作为边框传递给 inputdecorator。 然而，这一切只是告诉 InputDecorator 是否应该使用下划线或您指定的任何其他内容。

实际颜色基于主题 - 来自来源：

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

Answer 3

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

• 仅在输入处于焦点时使用颜色（即单击并准备输入）：

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

• 要始终使用颜色（即使不在焦点上）， enabledBorder设置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), ), ) ) )

Answer 4

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

Answer 5

通过使用 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),
              ),
            

) )

Answer 6

需要更改三个边框。

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

Answer 7

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

Answer 8

@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))));
  }