Dev-hwang/flutter_secure_keyboard

Mobile secure keyboard to prevent KeyLogger attack and screen capture.

Mobile secure keyboard to prevent KeyLogger attack and screen capture.

Screenshots

Alphanumeric	Numeric

Getting started

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

Examples

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();
  }
}

Package

• 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.

WithSecureKeyboard

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).

SecureKeyboardController

Function	Description
isShowing	Whether the secure keyboard is showing.
show	Show secure keyboard.
hide	Hide secure keyboard.

SecureKeyboardController.show()

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.