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

Question

我对这两个都不熟悉

在我所有的表单中，textField的下划线都显示为蓝色。我想把它换成其他颜色。我使用的代码就像。。。

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

),

无法理解如何实现这一点。

注意：我知道这里有一个类似的问题，在flifter中更改TextField的下划线。但是，在那里也没有完全解决。另外，还有一个链接看起来与我的类似，它在这里使用appcompat v7更改EditText底线颜色，但实际上是属于Android开发的，它使用的是JAVA，而不是我在Android应用开发中使用的DART（flatter）。所以，请不要对这些链接感到困惑。

Answer 1

要更改整个应用程序的颜色，请使用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),
      ),
    )
  )
)

Answer 2

**见下文更新或见@GJJ2019的答案**

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

实际的颜色是基于主题-从来源：

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

刚刚使用-：

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

它适用于我：）