如何更改textField下划线颜色？ [英] How to change textField underline color?

问题描述

我对颤振和镖。目前，在我的个人项目之一中使用它。

I'm new to both flutter & dart. Currently, using this in one of my personal projects.

在我的所有表格中， textField显示为蓝色。我想将其更改为其他颜色。我正在使用的一段代码就像...

In all of my form, the underline of textField is showing in blue color. I want to change that to some other color. The piece of code which I'm using is like...

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

),

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

Can't able to understand how to achieve this.

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

Note: I know there is a similar question at here Change TextField's Underline in Flutter. But, at there also it has not completely solved. Also, one more link which looks similar to mine at here Changing EditText bottom line color with appcompat v7 but, that actually belong to Android development by using JAVA not DART(flutter) which I'm using for my android app development. So, please don't get confused about those links.

推荐答案

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

** See update below or see the answer by @GJJ2019 **

逻辑答案是使用InputBorder，尤其是 UnderlineInputDecorator ，并将其作为边框传递到inputdecorator中。但是，所有这些操作都会告诉InputDecorator是否应使用下划线或您指定的其他任何内容。

The logical answer would be to use an InputBorder, particularly an UnderlineInputDecorator, 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.

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

The actual color is based on the theme - from the source:

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

因此要更改颜色，请执行以下操作（或为您的主题指定主题整个应用程序）：

So to change the colour do something like this (or specify the theme for your entire application):

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

更新：

现在可以用期望的方式进行操作它可以正常工作。

This is now possible to do in the way you'd expect it to work.

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

这篇关于如何更改textField下划线颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！