Flutter中如何在文本输入框标签添加红色星号(*)?

你之前用自定义CTextField的isMandate属性出错，大概率是这个自定义组件没实现星号的渲染逻辑。给你两种靠谱的实现方式：

方法一：用原生TextField + RichText直接实现 #

直接借助原生TextField的label属性传入RichText，混合普通文本和红色星号的样式：

Container(
  width: 310,
  child: TextField(
    decoration: InputDecoration(
      label: RichText(
        text: TextSpan(
          // 正常标签文本
          text: 'First Name',
          style: GoogleFonts.lato(
            color: Color(0xffb0b0b0),
            fontSize: 19,
            letterSpacing: 0.5,
          ),
          // 红色星号
          children: const [
            TextSpan(
              text: ' *',
              style: TextStyle(
                color: Colors.red,
                fontSize: 19,
                letterSpacing: 0.5,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
)

方法二：修复自定义CTextField的CInputDecoration #

如果一定要用你自己的CTextField，需要在CInputDecoration的实现里，针对isMandate属性处理星号渲染。比如修改自定义装饰类：

class CInputDecoration extends InputDecoration {
  final bool isMandate;
  final String? labelText;
  final TextStyle? labelStyle;

  CInputDecoration({
    required this.isMandate,
    this.labelText,
    this.labelStyle,
    // 其他需要的参数...
  }) : super(
    label: isMandate && labelText != null
        ? RichText(
            text: TextSpan(
              text: labelText,
              style: labelStyle ?? GoogleFonts.lato(
                color: Color(0xffb0b0b0),
                fontSize: 19,
                letterSpacing: 0.5,
              ),
              children: [
                TextSpan(
                  text: ' *',
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: labelStyle?.fontSize ?? 19,
                    letterSpacing: labelStyle?.letterSpacing ?? 0.5,
                  ),
                ),
              ],
            ),
          )
        : null,
    // 传递其他父类InputDecoration的属性...
  );
}

修改后再用你原来的调用方式，就能正常显示红色星号了。

内容的提问来源于stack exchange，提问作者Priya