Question

我试图在聚焦时更改labelText颜色。我可以更改文本颜色，但不能更改焦点颜色。

我尝试了所有提示文本颜色和标签文本颜色，但是没有帮助。

Container(
                padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
                child: TextFormField(
                    cursorColor: Colors.lightGreen,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                      labelText: 'Phone Number',
                      hintText: 'Enter a Phone Number',
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Colors.lightGreen
                        )
                    ),
                    border: OutlineInputBorder(
                        borderSide: BorderSide(
                        )),
                    )
                ),
              ),

以下是正在发生的事情的图像。

Answer 1

摘要

您可能想查看escaping食谱。

本质上，我们必须：

创建一个FocusNode属性。
向其中添加初始化和处置。
将其添加到TextFormField。
在TextFormField上的每次轻击上添加焦点请求。

1。创建一个FocusNode属性

class CustomTextFormFieldState extends State<CustomTextFormField> {
  FocusNode _focusNode;
  ...

2。向其中添加初始化和处置

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

@override
void dispose() {
  _focusNode.dispose();
  super.dispose();
}

3。将其添加到TextFormField

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    ...

4。每次点击TextFormField

时都会添加焦点请求

别忘了使用setState

void _requestFocus(){
  setState(() {
    FocusScope.of(context).requestFocus(_focusNode);
  });
}

将该方法添加到TextFormField的{{1}}属性中：

onTap

Answer 2

我用 Focus 小部件解决了这个问题。首先，我为每个字段定义了一个颜色变量：

final _lowColor = Colors.amber[50];   // use your own colors
final _highColor = Colors.amber[200];

Color _field1Color = _lowColor;
Color _field2Color = _lowColor;
...

然后我用 Focus Widget 包裹每个 TextFormField 并更改 fieldColor：

child: Focus(
  onFocusChange: (hasFocus) {
    setState(() => _field1Color = hasFocus ? _highColor : _lowColor);
  },
  child: TextFormField(
    ...
      color: _field1Color,
    ...
    ),
  ), 
),

Answer 3

一种快速的解决方案是从小部件primarySwatch的{{1}}更改theme。唯一的缺点是需要MaterialApp。

Answer 4

您需要有一种方法来确定其聚焦状态，然后根据该状态为其颜色创建条件。这是focusNode会有所帮助的地方。从小部件创建中构造一个新的FocusNode，将其用作TextFormField中的focusNode属性。然后，在TextFormField的TextStyle属性的color属性中，可以添加如下内容：

  FocusNode myFocusNode = new FocusNode();

    return TextFormField(
      focusNode: myFocusNode,
      decoration: InputDecoration(
        labelText: 'test',
        labelStyle: TextStyle(
          color: myFocusNode.hasFocus ? Colors.blue : Colors.black
        )
      ),
    );

编辑：简要说明一下，您可能需要确保它在StatefulWidget中，然后将侦听器添加到您创建的focusNode中，并在该focusNode上的任何事件上调用setState。否则，您将看不到任何更改。

Answer 5

在找到用于确定标签颜色的InputDecorator的源代码之后，这就是我所发现的。

TextStyle _getFloatingLabelStyle(ThemeData themeData) {
  final Color color = decoration.errorText != null
    ? decoration.errorStyle?.color ?? themeData.errorColor
    : _getActiveColor(themeData);
  final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
  return style
    .copyWith(color: decoration.enabled ? color : themeData.disabledColor)
    .merge(decoration.labelStyle);
}

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

简而言之，要更改标签颜色，请将primaryColor设置为浅色主题，将accentColor设置为深色主题。

另一个提示：要在标签未聚焦时更改标签颜色，请设置hintColor。

ThemeData.dark().copyWith(
  primaryColor: Colors.red,
  accentColor: Colors.white,
  hintColor: Colors.pink,
)

Answer 6

当文本字段处于焦点位置并且文本字段错误（由于未遵循验证所致）时，您也可以使用labelStyle

labelText: 'Password',
     labelStyle: TextStyle(
        color: Colors.black54,
          ),
//when error has occured
     errorStyle: TextStyle(
       color: Colors.black,
         ),

Answer 7

这是不使用有状态小部件的快速方法

 return Theme( // 1) wrap with theme widget
   data: Theme.of(context).copyWith(primaryColor: //2) color you want here)
   child: TextFormField(
     focusNode: myFocusNode,
     decoration: InputDecoration(
    labelText: 'test',      
    ),
   ),
  );

Answer 8

如果您想更改原色。只需简单地定义添加 Widget MaterialApp 的 primaryColor

const appPrimaryColor = Color(0xFF746DF7);

ThemeData theme() {
  return ThemeData(
    scaffoldBackgroundColor: Colors.white,
    fontFamily: "Inter",
    appBarTheme: appBarTheme(),
    textTheme: textTheme(),
    inputDecorationTheme: inputDecorationTheme(),
    visualDensity: VisualDensity.adaptivePlatformDensity,
    primaryColor: appPrimaryColor // <------ HERE
  );
}

MaterialApp(
   title: 'Flutter Demo',
   theme: theme(), // <------ HERE
   home: SplashScreen(),
   routes: routes,
)

Answer 9

我使用 StatefulWidget 和 Focus 小部件解决了这个问题。我使用 StatefulWidget 是因为你需要使用 setState 来通知输入时的颜色变化

class InputEmail extends StatefulWidget {
  @override
  _InputEmailState createState() => _InputEmailState();
}

class _InputEmailState extends State<InputEmail> {
  Color _colorText = Colors.black54;

  @override
  Widget build(BuildContext context) {
    const _defaultColor = Colors.black54;
    const _focusColor = Colors.purple;

    return Container(
      padding: EdgeInsets.symmetric(vertical: 15),
      child: Focus(
        onFocusChange: (hasFocus) {
          // When you focus on input email, you need to notify the color change into the widget.
          setState(() => _colorText = hasFocus ? _focusColor : _defaultColor);
        },
        child: TextField(
          // Validate input Email
          keyboardType: TextInputType.emailAddress,
          
          decoration: InputDecoration(
            hintText: 'example@domain.com',
            labelText: 'Email',
            labelStyle: TextStyle(color: _colorText),
            
            // Default Color underline
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.black26),
            ),

            // Focus Color underline
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.purple),
            ),
            icon: Icon(
              Icons.mail,
              color: Colors.deepPurpleAccent,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 10

您可以使用Theme包裹文本字段，并将原色设置为您想要标签颜色的任何颜色

Answer 11

“装饰”中有一个“ lableStyle”，就像：

labelText: 'Description',
labelStyle: TextStyle(
  color: Colors.lightBlueAccent,
)),

Flutter-textFormField更改labelColor焦点

11 个答案:

摘要