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

Question

因为我们无法制作像 RichText/Text Span 样式的小部件 TextFormField，

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

正在获取：-

预期结果：-

我们如何才能达到这样的结果？

Answer 1

最简单的方法，但不完全等于：

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

或者创建自定义 TextField 以将提示用作 Widget 而不是 String

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

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

Answer 2

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

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

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

临时为我工作。

Answer 3

试试这两个我有同样要求的文件。只需在 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

Answer 4

将此代码放在 TextFormField 或 TextField 中

此标签用作提示属性

label: RichText(
  text: TextSpan(
    text: 'Full Name',
    style: const TextStyle(
      color: Colors.grey),
      children: [
        TextSpan(
          text: ' *',
          style: TextStyle(
          color: Colors.red,
        )
      )
    ]
  ),
  floatingLabelBehavior:FloatingLabelBehavior.never,

查看上面的标签参数截图，其中包含 Widget 而不是 String，没有任何错误

Answer 5

使用最新版本的 flutter，您还可以在 label 参数中发送一个小部件。所以，这样的事情是可能的

 label: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(label.replaceAll('*', '')),
          label.contains('*')
              ? Text(
                  '*',
                  style: TextStyle(color: Colors.red),
                )
              : Container(),
        ],
      ),

Answer 6

在InputDecorator里面使用label属性查看此答案

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

How to add red asterisk in label of TextFormField In Flutter

textfield

flutter

flutter-layout

将此代码放在 TextFormField 或 TextField 中