Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,

Can anyone help me out regarding this...

Now Getting:-

enter image description here

Expected Result:-

enter image description here

How we can achieve a result like this?

like image 376
Zeeshan Ansari Avatar asked Nov 14 '19 05:11

Zeeshan Ansari


People also ask

How do you give a label a color in Flutter?

Step 1: Locate the MaterialApp widget. Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned. Step 3: Inside the ThemeData add the inputDecorationTheme parameter and then assign the InputDecorationTheme .

How do you add hints in TextFormField Flutter?

Hint is not available as its direct available attribute or function but it was under the decorations you can select in the menu you have. Under that you can find label and hint.


2 Answers

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

like image 26
Sumit Avatar answered Sep 19 '22 16:09

Sumit


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),
                  ),
                ),
              ),
like image 175
andrea689 Avatar answered Sep 20 '22 16:09

andrea689