如何更改文本字段下划線顏色？

Question

我是 flutter 和 dart 的新手。目前，在我的一個個人項目中使用它。

在我的所有表單中，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(flutter)，我正在使用它來開發我的 android 應用程序。 所以，請不要對這些鏈接感到困惑。

Answer 1

剛剛使用-：

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

它對我有用:)

Answer 2

** 請參閱下面的更新或查看@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),
  ),
)

Answer 3

要更改整個應用程序的顏色，請使用ThemeData的inputDecorationTheme屬性。

• 僅在輸入處於焦點時使用顏色（即單擊並准備輸入）：

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

• 要始終使用顏色（即使不在焦點上）， enabledBorder設置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 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),
              ),
            

) )

Answer 6

需要更改三個邊框。

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

Answer 7

TextField 中的focusedBorder 屬性可以更改下划線顏色，如： focusedBorder: new UnderlineInputBorder( borderSide: new BorderSide(color: Colors.black), ),

Answer 8

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