如何在 Flutter 中的 TextFormField 标签中添加红色星号

Posted

技术标签:

【中文标题】如何在 Flutter 中的 TextFormField 标签中添加红色星号【英文标题】:How to add red asterisk in label of TextFormField In Flutter 【发布时间】:2020-03-10 00:27:10 【问题描述】:

由于我们无法制作像 RichText/Text Span 这样的小部件来设置 TextFormField 的样式,

谁能帮我解决这个问题...

现在得到:-

预期结果:-

我们怎样才能达到这样的结果?

【问题讨论】:

【参考方案1】:

最简单的方法,但不完全等于:

              TextField(
                decoration: InputDecoration(
                  hintText: 'Ciao',
                  suffixText: '*',
                  suffixStyle: TextStyle(
                    color: Colors.red,
                  ),
                ),
              ),

或者创建一个自定义的TextField 以将提示用作小部件而不是字符串

您可以使用我的两个自定义文件:

input_decorator.dart text_field_custom.dart
              TextFieldCustom(
                hintText: Text.rich(
                  TextSpan(
                    text: 'FIRST NAME',
                    children: <InlineSpan>[
                      TextSpan(
                        text: '*',
                        style: TextStyle(color: Colors.red),
                      ),
                    ],
                    style: TextStyle(color: Colors.black54),
                  ),
                ),
              ),

【讨论】:

但是当我使用你的两个自定义文件时,TextFiled 的验证器消失了? 你能分享空安全文件吗【参考方案2】:

试试这两个我有相同要求的文件。 只需在 CInputDecoration 中添加属性 isMandate: true 并使用 CTextField。

CTextField(
...
  decoration: new CInputDecoration(
     isMandate: true,
...
))

https://github.com/sumit1954/Flutter/blob/master/CInputDecorator.dart https://github.com/sumit1954/Flutter/blob/master/CTextField.dart

【讨论】:

你能分享空安全文件吗【参考方案3】:

以非常快的方式实现了这一目标。将 input_decorator.dart 替换为以下代码:

https://github.com/neal786y/InputDecoratorForMandatoryFields/blob/master/input_decorator.dart

在您的 InputDecoration 范围内添加一个属性“isMandatoryField: true”

临时为我工作。

【讨论】:

欢迎来到 ***。虽然您的回答可能有助于实现原始发帖人想要的,但您的帖子没有提供任何可能帮助其他寻求类似解决方案的人的指导或解释。请在您的回复中包含更多上下文,请参阅How do I write a good answer? 你能分享空安全文件吗

以上是关于如何在 Flutter 中的 TextFormField 标签中添加红色星号的主要内容,如果未能解决你的问题,请参考以下文章