在Flutter中更改TextField的下划线

Question

我正在使用Flutter SDK开发应用程序。当我使用TextField小部件时，我将其聚焦，下划线变为蓝色。我需要将此颜色更改为红色，我该怎么办？

我需要改变的截图。我只想更改下划线，而不是标签颜色。

Answer 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。它会自动将颜色设置为红色。

Answer 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),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

如果这回答了你的问题，请告诉我:)

Answer 3

我还没有尝试过，但我看了你的文档。

看看TextField类你可以设置一个InputDecoration，而InputBorder又有一个UnderlineInputBorder。用你自己的BorderSide将它设置为InputDecorationTheme应该是我猜的伎俩。您可以设置BorderSide的颜色。

如果希望所有文本字段具有相同的样式，也可以在全局qazxswpoi中设置InputBorder。