Изменить подчеркивание текстового поля во Flutter

Хотя эти другие ответы могут каким-то образом работать, вам определенно не следует использовать их. Это неправильный способ получить кастомную тему во Flutter.

Гораздо более элегантное решение выглядит следующим образом:

final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.red),
  child: new TextField(
    decoration: new InputDecoration(
      labelText: "Hello",
      labelStyle: theme.textTheme.caption.copyWith(color: theme.primaryColor),
    ),
  ),
);

В то же время, если вы просто хотите показать ошибку (красный), используйте вместо этого errorText из InputDecoration. Он автоматически установит красный цвет.

Вы также можете изменить его цвет следующими способами.

1. Оберните свой TextField в Theme и предоставьте accentColor

   Theme(
     data: Theme.of(context).copyWith(accentColor: Colors.red),
     child: TextField(),
   )
   

2. Использование свойства inputDecoration.

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

Я использовал InputDecoration.collapsed для удаления разделителя и меняю цвет нижней границы.

При вводе имени цвет нижней границы будет синим, а при вводе числа или других специальных символов цвет нижней границы будет красный.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const EdgeInsets _padding = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0);
  Color borderColor = Colors.blue;
  bool nameFlag = false;

  @override
  void initState() {
    super.initState();
  }

  void validateName(String value) {
    final RegExp nameExp = new RegExp(r'^[A-Za-z ]+$');
    if (!nameExp.hasMatch(value) || value.isEmpty)
      borderColor = Colors.red;
    else
      borderColor = Colors.blue;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(children: <Widget>[
        new Flexible(
          child: new Container(
            margin: _padding,
            padding: _padding,
            child: new TextField(
              decoration: new InputDecoration.collapsed(
                hintText: "Enter Name",
              ),
              onChanged: (s) {
                setState(() => validateName(s));
              },
            ),
            decoration: new BoxDecoration(
              color: Colors.white,
              border: new Border(
                bottom: new BorderSide(color: borderColor, style: BorderStyle.solid),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

Дайте мне знать, если это ответит на ваш вопрос :)

Мы можем сделать это, используя свойство украшения enabledBorder: UnderlineInputBorder() в виджете TextField. Включенная граница имеет вложенное свойство borderSide: BorderSide(color), которое используется для определения цвета подчеркивания. Итак, в этом руководстве мы изменим цвет нижнего подчеркивания текстового поля ввода текста в примере приложения Flutter для Android iOS. Мы также изменили бы цвет подчеркивания TextField в фокусе.

Создайте виджет TextField в центральном обтекателе виджета в виджете «Контейнер».

enabledBorder - ›borderSide: BorderSide (цвет): используется для установки цвета подчеркивания ввода текста без фокуса. FocusBorder - ›borderSide: BorderSide (цвет): используется для установки цвета подчеркивания ввода текста в фокусе.

import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Center(
              child : Container(
                width: 290,
                padding: EdgeInsets.all(10.0),
                child : TextField(
                        autocorrect: true,
                        decoration: InputDecoration(
                          hintText: 'Type Text Here',        
                          enabledBorder: UnderlineInputBorder(      
                            borderSide: BorderSide(color: Colors.red),   
                            ),  
                          focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                      ),  
                    )
                )
              )
            )
        )
      ));
    }
  }

Я еще не пробовал, но просмотрел для вас документацию.

Взглянув на класс TextField, вы можете установить InputDecoration, который, в свою очередь, имеет InputBorder. Установите для этого UnderlineInputBorder свой собственный BorderSide, я думаю, должен помочь. Вы можете установить цвет BorderSide.

Вы также можете установить InputBorder в глобальной InputDecorationTheme, если хотите, чтобы все текстовые поля должны иметь одинаковый стиль.