9

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?

arheops
  • 15,544
  • 1
  • 21
  • 27
Zeeshan Ansari
  • 1,413
  • 12
  • 21

6 Answers6

3

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:

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

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

Sumit
  • 25
  • 1
  • 4
1

Place this code in TextFormField or TextField

this label works as an hint property

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

label parameter

look at above screenshot of label parameter holding a Widget not a String without any error

Abdul Qadir
  • 492
  • 4
  • 13
0

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.

user8253154
  • 11
  • 2
  • Welcome at Stackoverflow. While your answer may help to achieve what the original poster wants, your post offers no guidance or explanation that may help others seeking a similar solution. Please include more context in your reply, see [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Elijan9 Apr 21 '20 at 11:43
  • can you share null safety file – gowthaman C Sep 02 '21 at 07:53
0

With the latest version of flutter you can also send a widget in label parameter. So, something like this is possible

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

Use label property inside InputDecorator See this answer https://stackoverflow.com/a/72209425/8913302

Johan
  • 207
  • 4
  • 14