how to add Asterisks symbol in red color to the textformfiled in flutter

Question

[1]i am new to flutter, how to add Asterisks symbol in red color and hint as a black color to the textformfiled in flutter please help me

[enter image description here] [1]: https://i.stack.imgur.com/bwli2.png

Answer 1

Im not sure where you want the asterisk to be, but in a TextFormField you can use the decoration parameter to pass an InputDecoration.

This allows you to pass a labelText and a labelStyle as well as a hintText and a hintStyle like so:

class FormFieldWithAsterisk extends StatelessWidget {
  const FormFieldWithAsterisk({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
          labelText: "*",
          labelStyle: TextStyle(color: Colors.red),
          hintText: "type here...",
          hintStyle: TextStyle(color: Colors.black)),
    );
  }
}

The result looks like this:

Answer 2

In my case I did not want to use hintText as it was displaying only when the control is in focus. I wanted the label to be followed by an *, but in red color. Luckly, everything is a Widget in flutter and we can leverage that. The trick is to provide a composite widget to the label property, which includes a left label (which contains the actual field label) and a right label (which contains the required indicator). Here is a general idea.

TextFormField(
    decoration: InputDecoration(
        label: Row(
            children: [
                Text("First name),
                Text("*", style: const TextStyle(color: Colors.red)),
      ],
    )),
),

I would strongly recommend extracting this into a custom widget and using it across the application in a consistent way.

Answer 3

  TextFormField(
                      decoration: InputDecoration(
                          label: Row(
                        children: [
                          RichText(
                            text: TextSpan(
                                text: 'FIRSTNAME',
                                style: TextStyle(
                                  letterSpacing: 3,
                                    color: Colors.black, fontWeight: FontWeight.w400),
                                children: [
                                  TextSpan(
                                      text: '*', style: TextStyle(fontSize: 25,color: Colors.red,fontWeight: FontWeight.bold))
                                ]),
                          ),
                          // Text("First name"),
                          // Text("*", style: TextStyle(color: Colors.red)),
                        ],
                      )),
                    )

RichText Widget