How to add red asterisk in label of TextFormField In Flutter

问题

As we are not able to make widget like RichText/Text Span For styling TextFormField, How we can achieve a result like this? Can anyone help me out regarding this... thanks in advance.

Now Getting:-

Expected Result:-

回答1:

Simplest way, but not exactly equals:

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

Or create a custom TextField to use hint as Widget instead of String

You can use my two customized files:

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),
                  ),
                ),
              ),

回答2:

Achieved this in hard fast way. Replace input_decorator.dart with below code:

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

In your InputDecoration scope add a property "isMandatoryField: true"

Worked for me on temporary basis.

回答3:

Try these two files I had same requirement. Just add attribute isMandate: true in CInputDecoration and use 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

来源：https://stackoverflow.com/questions/58850122/how-to-add-red-asterisk-in-label-of-textformfield-in-flutter

标签

Flutter

flutter-layout