Mobile secure keyboard to prevent KeyLogger attack and screen capture.
Alphanumeric | Numeric |
---|---|
![]() |
![]() |
To use this plugin, add flutter_secure_keyboard
as a dependency in your pubspec.yaml file. For example:
dependencies:
flutter_secure_keyboard: ^3.0.0
class WithSecureKeyboardExample extends StatefulWidget {
@override
_WithSecureKeyboardExampleState createState() =>
_WithSecureKeyboardExampleState();
}
class _WithSecureKeyboardExampleState extends State<WithSecureKeyboardExample> {
final _secureKeyboardController = SecureKeyboardController();
final _passwordEditor = TextEditingController();
final _passwordTextFieldFocusNode = FocusNode();
final _pinCodeEditor = TextEditingController();
final _pinCodeTextFieldFocusNode = FocusNode();
@override
Widget build(BuildContext context) {
// Set the WithSecureKeyboard widget as the top-level widget
// in the build function so that the secure keyboard works properly.
return WithSecureKeyboard(
controller: _secureKeyboardController,
child: Scaffold(
appBar: AppBar(
title: Text('flutter_secure_keyboard'),
),
body: _buildContentView(),
),
);
}
Widget _buildContentView() {
// We recommend using the ListView widget to prevent widget overflow.
return ListView(
padding: const EdgeInsets.all(8.0),
children: [
_buildPasswordTextField(),
SizedBox(height: 12.0),
_buildPinCodeTextField(),
],
);
}
Widget _buildPasswordTextField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Password'),
TextFormField(
controller: _passwordEditor,
focusNode: _passwordTextFieldFocusNode,
// We recommended to set false to prevent the software keyboard from opening.
enableInteractiveSelection: false,
obscureText: true,
onTap: () {
_secureKeyboardController.show(
type: SecureKeyboardType.ALPHA_NUMERIC,
focusNode: _passwordTextFieldFocusNode,
initText: _passwordEditor.text,
hintText: 'password',
// Use onCharCodesChanged to have text entered in real time.
onCharCodesChanged: (List<int> charCodes) {
_passwordEditor.text = String.fromCharCodes(charCodes);
},
);
},
),
],
);
}
Widget _buildPinCodeTextField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('PinCode'),
TextFormField(
controller: _pinCodeEditor,
focusNode: _pinCodeTextFieldFocusNode,
// We recommended to set false to prevent the software keyboard from opening.
enableInteractiveSelection: false,
obscureText: true,
onTap: () {
_secureKeyboardController.show(
type: SecureKeyboardType.NUMERIC,
focusNode: _pinCodeTextFieldFocusNode,
initText: _pinCodeEditor.text,
hintText: 'pinCode',
// Use onDoneKeyPressed to allow text to be entered when you press the done key,
// or to do something like encryption.
onDoneKeyPressed: (List<int> charCodes) {
_pinCodeEditor.text = String.fromCharCodes(charCodes);
},
);
},
),
],
);
}
@override
void dispose() {
super.dispose();
_secureKeyboardController.dispose();
_passwordEditor.dispose();
_pinCodeEditor.dispose();
}
}
- WithSecureKeyboard - A widget that implements a secure keyboard with controller.
- SecureKeyboardController - Controller to check or control the state of the secure keyboard.
Note: The parameters marked with an asterisk(*) are required.
Parameter | Description |
---|---|
controller * |
Controller to control the secure keyboard. |
child * |
A child widget with a secure keyboard. |
keyboardHeight |
The height of the keyboard. Default value is 280.0 . |
keyRadius |
The radius of the keyboard key. Default value is 4.0 . |
keySpacing |
The spacing between keyboard keys. Default value is 1.2 . |
keyInputMonitorPadding |
The padding of the key input monitor. Default value is const EdgeInsets.only(left: 10.0, right: 5.0) . |
keyboardPadding |
The padding of the keyboard. Default value is const EdgeInsets.symmetric(horizontal: 5.0) . |
backgroundColor |
The background color of the keyboard. Default value is const Color(0xFF0A0A0A) . |
stringKeyColor |
The color of the string key(alphanumeric, numeric..). Default value is const Color(0xFF313131) . |
actionKeyColor |
The color of the action key(shift, backspace, clear..). Default value is const Color(0xFF222222) . |
doneKeyColor |
The color of the done key. Default value is const Color(0xFF1C7CDC) . |
activatedKeyColor |
The key color when the shift action key is activated. If the value is null, doneKeyColor is used. |
keyTextStyle |
The text style of the text inside the keyboard key. Default value is const TextStyle(color: Colors.white, fontSize: 17.0, fontWeight: FontWeight.w500) . |
inputTextStyle |
The text style of the text inside the key input monitor. Default value is const TextStyle(color: Colors.white, fontSize: 17.0, fontWeight: FontWeight.w500) . |
Function | Description |
---|---|
isShowing |
Whether the secure keyboard is showing. |
show |
Show secure keyboard. |
hide |
Hide secure keyboard. |
Parameter | Description |
---|---|
type * |
The type of the secure keyboard. |
focusNode |
The FocusNode that will receive focus on. |
initText |
The initial value of the input text. |
hintText |
The hint text to display when the input text is empty. |
inputTextLengthSymbol |
The symbol to use when displaying the input text length. |
doneKeyText |
The text of the done key. |
clearKeyText |
The text of the clear key. |
obscuringCharacter |
The secure character to hide the input text. Default value is • . |
maxLength |
The maximum length of text that can be entered. |
alwaysCaps |
Whether to always display uppercase characters. Default value is false . |
obscureText |
Whether to hide input text as secure characters. Default value is true . |
shuffleNumericKey |
Whether to shuffle the position of the numeric keys. Default value is true . |
hideKeyInputMonitor |
Whether to hide the key input monitor. Default value is false . |
disableKeyBubble |
Whether to disable the key bubble. Default value is false . |
onKeyPressed |
Called when the key is pressed. |
onCharCodesChanged |
Called when the character codes changed. |
onDoneKeyPressed |
Called when the done key is pressed. |
onCloseKeyPressed |
Called when the close key is pressed. |