如何更改textField下划线颜色？

Question

我是崭新的扑克和飞镖.目前,在我的一个个人项目中使用它.

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

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

),

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

注意:我知道这里有一个类似的问题更改TextField在Flutter中的下划线.但是,在那里它还没有完全解决.此外,还有一个看起来类似于我的链接在这里使用appcompat v7更改EditText底线颜色,但实际上属于Android开发使用JAVA而不是DART(颤动),我用于我的Android应用程序开发.所以,请不要对这些链接感到困惑.

Answer 1

刚使用 - :

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

这个对我有用 :)

Answer 2

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

逻辑上的答案是使用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
        )
      )
    ),
  ),
),

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

) )