in

Mobile secure keyboard to prevent KeyLogger attack and screen capture

flutter_secure_keyboard

To prevent KeyLogger attacks and screen capture, a mobile secure keyboard supports you. It will provide more cool and smart functions and bring you many good experiences.

Screenshots

This is one screenshot display for you:

AlphanumericNumeric
keyboardThis image has an empty alt attribute; its file name is 103331973-9a171880-4aab-11eb-8b34-fdf388d14044-2-498x1024.png

Getting started

To use this plugin, add flutter_secure_keyboard as a dependency in your pubspec.yaml file. For example:

dependencies:
  flutter_secure_keyboard: ^1.0.1+3

Examples Mobile secure keyboard

This is an example of a Mobile secure keyboard

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) {
    return WithSecureKeyboard(
      controller: secureKeyboardController,
      child: Scaffold(
        appBar: AppBar(title: Text('with_secure_keyboard_example')),
        body: _buildContentView()
      ),
    );
  }

  Widget _buildContentView() {
    // We recommend using the ListView widget to prevent widget overflows.
    return ListView(
      padding: const EdgeInsets.all(8.0),
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 12.0),
          child: _buildPasswordTextField()
        ),
        _buildPinCodeTextField()
      ],
    );
  }

  Widget _buildPasswordTextField() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Password'),
        TextFormField(
          controller: passwordEditor,
          focusNode: passwordTextFieldFocusNode,
          // We recommended to set false to prevent the soft keyboard from opening.
          enableInteractiveSelection: false,
          obscureText: true,
          onTap: () {
            secureKeyboardController.show(
              type: SecureKeyboardType.Alphanumeric,
              textFieldFocusNode: passwordTextFieldFocusNode,
              initText: passwordEditor.text,
              hintText: 'password',
              onConfirmKeyPressed: (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 soft keyboard from opening.
          enableInteractiveSelection: false,
          obscureText: true,
          onTap: () {
            secureKeyboardController.show(
              type: SecureKeyboardType.Numeric,
              textFieldFocusNode: pinCodeTextFieldFocusNode,
              initText: pinCodeEditor.text,
              hintText: 'pinCode',
              onConfirmKeyPressed: (List<int> charCodes) {
                pinCodeEditor.text = String.fromCharCodes(charCodes);
              }
            );
          },
        ),
      ],
    );
  }
}

WithSecureKeyboard

ParameterDescription
controller*Controller for controlling the secure keyboard.
child*A widget to have a secure keyboard.
keyboardHeightParameters to set the keyboard height.
backgroundColorParameters to set the keyboard background color.
stringKeyColorParameters to set keyboard string key(alphanumeric, numeric..) color.
actionKeyColorParameters to set keyboard action key(shift, backspace, clear..) color.
confirmKeyColorParameters to set keyboard confirm key color.
keyTextStyleParameters to set keyboard key text style.
inputTextStyleParameters to set keyboard input text style.

SecureKeyboardController

FunctionDescription
isShowingWhether the secure keyboard is open.
typeIndicates the secure keyboard type.
showShow a secure keyboard.
hideHide a secure keyboard.

SecureKeyboardController.show()

ParameterDescription
type*Specifies the secure keyboard type.
textFieldFocusNodeThe FocusNode that will receive focus on.
initTextSets the initial value of the input text.
hintTextThe hint text to display when the input text is empty.
inputTextLengthSymbolSets the symbol to use when displaying the input text length.
confirmKeyTextSets the confirm key text.
clearKeyTextSets the clear key text.
obscuringCharacterSets the secure character to hide the input text.
maxLengthSets the maximum length of text that can be entered.
alwaysCapsWhether to always display uppercase characters.
obscureTextWhether to hide input text as secure characters.
onKeyPressedCalled when the key is pressed.
onCharCodesChangedCalled when the character codes changed.
onConfirmKeyPressed*Called when the confirm key is pressed.
onCloseKeyPressedCalled when the close key is pressed.

GitHub

https://github.com/Dev-hwang/flutter_secure_keyboard

Written by James

Flutter plugin to display simple numeric keyboard on Android & iOS

Clip your widgets with custom shapes provided