Как изменить цвет подчеркивания textField?

Я новичок в трепетании и дротике. В настоящее время использую это в одном из моих личных проектов.

Во всех моих формах подчеркивание textField отображается синим цветом. Я хочу изменить это на другой цвет. Кусок кода, который я использую, похож на...

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

),

Не могу понять, как этого добиться.

Примечание: я знаю, что здесь есть похожий вопрос. Изменить подчеркивание TextField во флаттере. Но и там это еще не полностью решено. Кроме того, еще одна ссылка, похожая на мою, здесь: Изменение цвета нижней строки EditText с помощью appcompat v7, но на самом деле это относится к разработке под Android с использованием JAVA, а не DART (трепетание), которое я использую для разработки приложений для Android. Поэтому, пожалуйста, не запутайтесь в этих ссылках.

Ответы

Ответ 1

Логический ответ был бы использовать 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
        )
      )
    ),
  ),
),

Ответ 2

Просто использовал -:

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

меня устраивает :)

Ответ 3

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

Ответ 4

нужно изменить три границы.

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

Ответ 5

Вы можете использовать свойство ThemeData inputDecorationTheme чтобы изменить цвет всего приложения:

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