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

Flutter Obscure certain text

Hello everyone I am facing issue in the obscuring text in Flutter

Requirememt:

Obscure the first 5 characters of the Text while entering in TextFormField.

Example : XXXXX4307R

But I have to obscure the text in the TextFormField and also I have to preserve the original plain text on other side.

The problem here I face is whenever I enters the incorrect character in the TextFormField and taps backspace and enters new character again the onChange() method triggers and getting the latest replaced value and returning the value in XXXXX4307R i.e it is overriding the original text stored in the variable.

So we have to preserve the original plain text and also the obsucred text on front side of the application in TextFormField.

Please help with any new idea we can solve this in Flutter Mobile Development.

I am using replaceRange() function for replacing the text with ‘X’ character but once the onChange is triggered it is overriding the exisiting original text stored in the variable.

Tags:

2

Answers


  1. 0

    You can extend TextEditingController and override its buildTextSpan method to achieve that behavior:

    class ObscuringTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final text = value.text;
    final obscuredLength = min(text.length, 5);
    final obscuredText = text.replaceRange(0, obscuredLength, '•' * obscuredLength);
    return TextSpan(text: obscuredText, style: style);
  }
}

    Please note that this is only a minimal implementation for sample purpose. It’s working, but you might need to be aware of other aspects from the original buildTextSpan method that you might need to implement as well in the overriding method.

    Login or Signup to reply.
  2. 0

    to handle this issue efficiently, you need a strategy that maintains two separate variables: one for the obscured text shown in the TextFormField and another for the original text. Here’s a simplified approach that can help you achieve this:

    1. Two Variables: Maintain two variables, originalText and obscuredText. The originalText will hold the actual text entered by the user, while the obscuredText is what you display in the TextFormField.
    2. onChange Handling: In the onChange callback, update originalText with the new value. Then, create the obscuredText by keeping the last few characters (as per your requirement) and replacing the rest with ‘X’.
    3. Backspace Logic: When handling backspace, ensure you are modifying originalText and then reconstructing obscuredText from it.

    Here’s an example code for reference:

        String originalText = '';
String obscuredText = '';

void _onTextChange(String newText) {
    // Update the original text
    originalText = newText;

    // Generate obscured text
    if (originalText.length > 5) {
        String visiblePart = originalText.substring(originalText.length - 5);
        obscuredText = 'XXXXX' + visiblePart;
    } else {
        obscuredText = 'XXXXX'.substring(0, 5 - originalText.length) + originalText;
    }

    // Update the TextFormField with obscured text
    setState(() {});
}

@override
Widget build(BuildContext context) {
    return TextFormField(
        onChanged: _onTextChange,
        // Other properties...
        controller: TextEditingController(text: obscuredText),
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search