Flutter - 如何更改 TextField 提示颜色？

Posted 2023-02-23

【中文标题】Flutter - 如何更改 TextField 提示颜色？

【英文标题】：Flutter - How to change TextField hint color?

【发布时间】：2019-05-09 18:50:23

【问题描述】：

我有点困惑如何更改文本字段的提示颜色。有人可以指导我怎么做。谢谢

child: TextField(
   style: TextStyle(fontSize: 20),
   decoration: InputDecoration(
                  hintText: "Password",
                  border: new OutlineInputBorder(
                            borderSide: new BorderSide(
                              color: Colors.teal,
                            ),
                          ),
                   prefixIcon: const Icon(
                            Icons.security,
                            color: Colors.white,
                          ),
                ),
   ),

【参考方案1】：

您可以使用hintStyle: 在InputDecoration

TextField(
        style: TextStyle(fontSize: 20),
        decoration: InputDecoration(
          hintText: "Password",
          hintStyle: TextStyle(fontSize: 20.0, color: Colors.redAccent),
          border: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.teal,
            ),
          ),
          prefixIcon: const Icon(
            Icons.security,
            color: Colors.white,
          ),
        ),
      ),

【讨论】：

输入聚焦的时候呢？将提示文本颜色更改为其他颜色？

@VincentJ.Michuki 请参阅下面的答案。

【参考方案2】：

作为已接受答案的补充，要更新重点提示装饰，您必须更新应用程序的主题。

@override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primaryColor: Colors.white,
          inputDecorationTheme: const InputDecorationTheme(
            labelStyle: TextStyle(color: Colors.black),
            hintStyle: TextStyle(color: Colors.grey),
          )),
      home: MainScreen(),
    );
  

【讨论】：

另一种方法，可以使用像这样的焦点节点hintStyle: TextStyle(color: focusNode.hasFocus ? Color(0xff7FBBCA) : Colors.black45)

【参考方案3】：

在挖掘了用于确定标签颜色的 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;

简而言之，要更改提示颜色，请使用 Theme 和 ThemeData 设置 hintColor。

另一个提示：要更改标签颜色，请设置primaryColor浅色主题，或为深色主题设置accentColor。

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

【参考方案4】：

同时更改提示样式和标签样式

TextFormField(
              decoration: InputDecoration(
                hintText: '[e-mail]',
                labelText: 'Email',
               hintStyle: TextStyle(color: Colors.white), # change to your color
                labelStyle: TextStyle(color: Colors.white), # change color
             ))

【参考方案5】：

TextField(
   decoration: InputDecoration(
   hintText: 'your hint',
   hintStyle: Theme.of(context).textTheme.caption.copyWith(
   fontSize: 20,
   fontWeight: FontWeight.w600,
   color: ColorConstants.kTextColor,  <--- // Set Your Own Color
   ),

【讨论】：

另外，您可以查看此页面以获取更多示例。 medium.com/flutter-community/…

【参考方案6】：

如果你想改变应用中所有TextField Widget的hintColor，你可以在Theme中应用。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light().copyWith(
        hintColor: Colors.orange,
      ),
      home: Scaffold(
        body: Column(children: [
          TextField(
            decoration: InputDecoration(
              hintText: "Email",
            ),
          ),
          TextField(
            decoration: InputDecoration(
              hintText: "Password",
            ),
          ),
        ]),
      ),
    );