在Flutter中更改TextField的下划线 [英] Change TextField's Underline in Flutter

问题描述

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

I'm working on an application using Flutter SDK. When I use a TextField widget, and I focus it, the underline becomes blue. I need to change this color to red, how can I do it?

我需要更改的屏幕快照。我只想更改下划线，而不更改标签颜色。

Screenshot of what I need to change. I want just the underline to change, not the label color.

推荐答案

尽管这些其他答案可能会起作用，但您绝对应该不使用它。
这不是在Flutter中获得自定义主题的正确方法。

While these other answers may somehow work, you should definitely not use it. That's not the proper way to get a custom theme in Flutter.

一种更为优雅的解决方案如下：

A much more elegant solution is as followed :

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

同时，如果您只想显示错误（红色），请使用<$ c改为 InputDecoration 的$ c> errorText 。它将自动将颜色设置为红色。

At the same time, if you just want to show an error (Red), use errorText of InputDecoration instead. It will automatically set the color to red.

这篇关于在Flutter中更改TextField的下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！