Sometimes a situation is encountered in business, as shown in the following figure:
![](https://img-blog.csdnimg.cn/img_convert/efc3338d24405542de0f2a00694aeb1f.png)
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
![](https://img-blog.csdnimg.cn/img_convert/5496d8a8902c5087150c75f5d3eb6003.png)
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
![](https://img-blog.csdnimg.cn/img_convert/83a9b9bf345a49ec722adfe09d1f5677.jpeg)