Flutter input box TextField custom encrypted asterisk display

Sometimes a situation is encountered in business, as shown in the following figure:

The input box on the page can be modified and encrypted to display the content. The TextField that comes with Flutter has a field that is obscureText. When it is set to true, the text display will all change to *, but there is no way to encrypt and display the characters at the specified position. This When you need to use the following plug-ins:

https://pub.dev/packages/encryptiontextfield

This is the effect obtained by directly copying the official TextField related source code (source code version is 3.3.9), as shown in the figure below

The method of use is as follows:

Open the pubspec.yaml file and add dependencies

encryptiontextfield: ^0.0.9

Then inside the code class

import 'package:encryptiontextfield/src/material/text_field.dart';

import 'package:encryptiontextfield/src/widgets/editable_text.dart';

 EncryptionTextfield(
                maxLines: 1,
                minLines: 1,
                obscureText:false,
                startShow: 3,
                endShow: 4,
                controller: EncryptionTextEditingController(text: "abcdefghijklmn"),
                obscuringCharacter:"*",
                decoration: const InputDecoration(
                    hintText: '',
                    contentPadding: EdgeInsets.only(left: 5),
                    border: OutlineInputBorder(
                        borderSide: BorderSide.none)),
                style: TextStyle(
                    color: Color(0xFFF55C04), fontSize: 30),
              ),

There are three parameters in total:

startShow: display from the beginning to the number, others are encrypted

endShow: display from the end to the number, others are encrypted, and can coexist with startShow

middleHideRange: Pass in an array [3,6], encrypt the middle digits, and display others, mutually exclusive with startShow and endShow

Except for these three parameters, other logic is no different from Flutter's own TextField