Add mandatory(*) for labelText in Input Decoration in Flutter

Question

I want to add asteric sign in InputDecoration labelText and change color(like red) of it so that user understand easily this field is required.

TextField(
    autofocus: true,
    controller: _nameCtrlr,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
    labelText: "Name *",
   ))

Expected result like this image Sample Image

I answered this with a solution than can be used with RichText — Mohamad Abdel Rida, Nov 08 '21 at 16:59

score 4 · Answer 1 · answered May 12 '22 at 02:16

You can use label arguments inside InputDecoration parameters. This work both widgets TextField or TextFormField

TextField(
        decoration: InputDecoration(
          label: Row(
            children: [
              const Text('*', style: TextStyle(color: Colors.red)),
              Padding(
                padding: EdgeInsets.all(3.0),
              ),
              Text("Name")
            ],
          ),
        ),
        controller: _nameCtrlr,
        autofocus: true,
        keyboardType: TextInputType.text,
       );

score 3 · Answer 2 · answered Oct 03 '21 at 03:00

You can use the Rich Text Widget like this

RichText getRequiredLabel(String fieldName) {
  return RichText(
      text: TextSpan(
          style: TextStyle(color: Colors.black),
          text: fieldName,
          children: [
        TextSpan(text: '*', style: TextStyle(color: Colors.red))
      ]));
}

score 1 · Answer 3 · answered Aug 02 '19 at 07:17

1

Yes, man you can do that.

TextField(
    autofocus: true,
    controller: _nameCtrlr,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
    labelText: "Name \*",
   ))

"\" sign will help compiler to distinguish between asterisk sign(*) from multiplication.

answered Aug 02 '19 at 07:17

Jay Mungara

6,663
2
27
49

6

but how can I change only asterisk sign(*) color to red. as like as attached Image. thanks again @Jay – Basher Sarkar Aug 02 '19 at 20:52
2

Any solution for this * put the red color – core114 Aug 25 '20 at 09:28
looking for this also.. different color for the `*` – M.M.Hasibuzzaman Feb 01 '21 at 09:01
@BasherSarkar change 'labelText' to 'label' in InputDecoration. See my answer – Johan May 12 '22 at 02:05
I'll check and let you know later @Johan – Basher Sarkar Jun 16 '22 at 11:10

Add mandatory(*) for labelText in Input Decoration in Flutter

3 Answers3

Linked