textformfield - Use * (Asterisk) instead of . in flutter textfield

Question

I have a custom form field to enter pin of the app. Instead of using conventional . when writing the pin, I want to use * like shown in the image below. How do I achieve this?

This is the code of the form Fields:

class PINNumber extends StatelessWidget {
  final TextEditingController textEditingController;
  final OutlineInputBorder outlineInputBorder;

  const PINNumber(
      {Key key, this.textEditingController, this.outlineInputBorder})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      child: TextFormField(
        controller: textEditingController,
        enabled: false,
        obscureText: true,
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(16.0),
          border: outlineInputBorder,
          filled: true,
          fillColor: Colors.white30,
        ),
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 21.0,
          color: Colors.black,
        ),
      ),
    );
  }
}

Answer 1

In the TextField widget, there is a property called obscureText, which will make the letters into a dot. But you can override the character to show an asterisk.

 obscureText: true,
 obscuringCharacter: '*',

So In your case you need to add the obscuringCharacter here:

class PINNumber extends StatelessWidget {
  final TextEditingController textEditingController;
  final OutlineInputBorder outlineInputBorder;

  const PINNumber(
      {Key key, this.textEditingController, this.outlineInputBorder})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      child: TextFormField(
        controller: textEditingController,
        enabled: false,
        obscuringCharacter: '*', //added obscuringCharacter here
        obscureText: true,
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(16.0),
          border: outlineInputBorder,
          filled: true,
          fillColor: Colors.white30,
        ),
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 21.0,
          color: Colors.black,
        ),
      ),
    );
  }
}