如何更改 textField 下划线颜色？答案

【问题标题】：How to change textField underline color?如何更改 textField 下划线颜色？
【发布时间】：2018-09-11 00:18:37
【问题描述】：

我对颤振和飞镖都是新手。目前，在我的一个个人项目中使用它。

在我的所有表单中，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 而不是我用于我的 android 应用程序开发的 DART(flutter)。所以，请不要对这些链接感到困惑。

【问题讨论】：

你可以在这里找到同样的问题：[stackoverflow.com/questions/48706884/… 和这里 [stackoverflow.com/questions/26574328/…
Change TextField's Underline in Flutter的可能重复
我已经检查了第一个链接。如果你检查那个，那么这个问题也不能完全解决。在第二个链接中，属于Android开发的JAVA not flutter(DART)。所以基本上，帮不了我。

标签： dart flutter

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

你的答案应该是最好的答案。谢谢

【解决方案4】：

** 查看下面的更新或查看the answer by @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),
  ),
)

【讨论】：

我试过 UnderlineInputDecorator 但无法为我的问题找到任何解决方案。
啊，好吧。当我有机会时，我会看看并添加一个代码示例，如果没有其他人在我之前得到它。
没问题。让我看看我还能做什么。
那里，修改它来修复它。但正如我简要提到的，您最好为整个应用程序指定主题，然后在需要的任何地方使用它 - 这样您可以根据需要更改整个主题 =)
哦，伙计，我从 Gitter 得到了一个关于将所有内容包装在主题中的答案，现在它可以工作了。不知道这么详细的所有这些。但是，逐渐学习。感谢您的帮助。

【解决方案5】：

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

【讨论】：

【解决方案6】：

刚刚用过-：

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

它对我有用:)

【讨论】：

我认为你也应该尝试 Material App 主题设置。它们可能对整个颜色系统非常有用。
@GJJ 可以给我任何资源来找到解决方案。
如何在InputDecoration.collapsed上申请enabledBorder

【解决方案7】：

需要改变三个边框。

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

【讨论】：

如何只做一个边框（上、左、右、下）