Question 245092 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter TextFormField obscure text: hidden last letter after n second

I have a flutter app with a password textfield

TextFormField(
  obscureText: true,
)

I run the app on Android, the password is obscured, but it shows the last letter for a while, like this
enter image description here

But when running the app on iOS, the last letter is hidden immediately so user can’t see the last letter. However, I want it to be displayed last letter in the same way on Android.

How can i do it ?

Tags:

2

Answers


  1. 0

    You need to use custom TextEditingController and remove obscureText: true :

    class ObscureTextEditingController extends TextEditingController {
 @override
 TextSpan buildTextSpan({required BuildContext context, required bool withComposing, TextStyle? style }) 
   {
    var displayValue = '•' * value.text.length;
    if (!value.composing.isValid || !withComposing) {
     return TextSpan(style: style, text: displayValue);
    }
    final TextStyle? composingStyle = style?.merge(
     const TextStyle(decoration: TextDecoration.underline),
    );
    return TextSpan(
     style: style,
     children: <TextSpan>[
       TextSpan(text: value.composing.textBefore(displayValue)),
       TextSpan(
         style: composingStyle,
         text: value.composing.textInside(displayValue),
       ),
       TextSpan(text: value.composing.textAfter(displayValue)),
     ],
   );
  }
 }

    And add it to your TextFormField :

    TextFormField(
 //obscureText: true,   // REMOVE THIS LINE
 controller: ObscureTextEditingController(),

    )

    Login or Signup to reply.
  2. 0

    Im facing with the same problem, Waiting for the best answer

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search