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

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

flutterdartflutter-layoutlabel


Solution 1:[1]

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))
      ]));
}

Solution 2:[2]

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.

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohamad Abdel Rida
Solution 2 Jay Mungara
Solution 3 Johan

Related Questions