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

Douai

have any alternative to do this? – Douai

is it possible? anyone help me to do this? – Douai

I answered this with a solution than can be used with RichText – Trochilus

I have found answer in another thread - look at this – Hooke

Answer 1

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

Wageworker

Answer 2

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

Trochilus

Answer 3

Is you want to preserve the original behavior styling, then use the example from the Flutter documentation:

TextField(
    decoration: InputDecoration(
      label: Text.rich(
        TextSpan(
          children: <InlineSpan>[
            WidgetSpan(
              child: Text(
                'Username',
              ),
            ),
            WidgetSpan(
              child: Text(
                '*',
                style: TextStyle(color: Colors.red),
              ),
            ),
          ],
        ),
      ),
    ),
  )

Here is a link https://api.flutter.dev/flutter/material/InputDecoration/label.html

Agbogla