Question

我是崭新的两个人。镖。目前，在我的一个个人项目中使用它。

在我的所有表单中，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（颤动），我正在使用我的Android应用程序开发。所以，请不要对这些链接感到困惑。

Answer 1

仅使用-：

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

对我有用:)

Answer 2

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

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

Answer 4

需要更改三个边框。

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

Answer 5

您可以使用ThemeData的inputDecorationTheme属性来更改整个应用的颜色：

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

Answer 6

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

如何更改textField下划线颜色？

6 个答案: