Изменение TextField Подчеркивание в Flutter

Ответ 1

Хотя эти другие ответы могут как-то работать, вы определенно не должны их использовать. Это не правильный способ получить пользовательскую тему в 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. Он автоматически установит красный цвет.

Ответ 2

Я использовал 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),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Я решил с помощью:

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