Flutter安全键盘插件flutter_secure_keyboard的使用

flutter_secure_keyboard 是一个用于防止按键记录攻击和屏幕捕获的安全键盘插件。以下是该插件的基本用法和示例代码。

截图

Alphanumeric	Numeric

开始使用

要使用此插件，请在 pubspec.yaml 文件中添加 flutter_secure_keyboard 作为依赖项。例如：

dependencies:
  flutter_secure_keyboard: ^4.0.0

示例代码

以下是一个完整的示例应用程序，展示了如何使用 flutter_secure_keyboard 插件：

import 'package:flutter/material.dart';
import 'package:flutter_secure_keyboard/flutter_secure_keyboard.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WithSecureKeyboardExample(),
    );
  }
}

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) {
    // 将 WithSecureKeyboard widget 设置为顶级 widget 以确保安全键盘正常工作。
    return WithSecureKeyboard(
      controller: _secureKeyboardController,
      child: Scaffold(
        appBar: AppBar(
          title: Text('flutter_secure_keyboard'),
        ),
        body: _buildContentView(),
      ),
    );
  }

  Widget _buildContentView() {
    // 建议使用 ListView 防止 widget 溢出。
    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,
          // 建议设置为 false 以防止软件键盘弹出。
          enableInteractiveSelection: false,
          obscureText: true,
          onTap: () {
            _secureKeyboardController.show(
              type: SecureKeyboardType.ALPHA_NUMERIC,
              focusNode: _passwordTextFieldFocusNode,
              initText: _passwordEditor.text,
              hintText: 'password',
              onCharCodesChanged: (List<int> charCodes) {
                _passwordEditor.text = String.fromCharCodes(charCodes);
              },
            );
          },
        ),
      ],
    );
  }

  Widget _buildPinCodeTextField() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('PinCode'),
        TextFormField(
          controller: _pinCodeEditor,
          focusNode: _pinCodeTextFieldFocusNode,
          // 建议设置为 false 以防止软件键盘弹出。
          enableInteractiveSelection: false,
          obscureText: true,
          onTap: () {
            _secureKeyboardController.show(
              type: SecureKeyboardType.NUMERIC,
              focusNode: _pinCodeTextFieldFocusNode,
              initText: _pinCodeEditor.text,
              hintText: 'pinCode',
              onDoneKeyPressed: (List<int> charCodes) {
                _pinCodeEditor.text = String.fromCharCodes(charCodes);
              },
            );
          },
        ),
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    _secureKeyboardController.dispose();
    _passwordEditor.dispose();
    _pinCodeEditor.dispose();
  }
}

包介绍

WithSecureKeyboard

WithSecureKeyboard 是一个带有控制器实现安全键盘的 widget。

SecureKeyboardController

SecureKeyboardController 是用于检查或控制安全键盘状态的控制器。

参数说明

SecureKeyboardController

SecureKeyboardController.show()

通过以上步骤和示例代码，您可以轻松地在 Flutter 应用中集成 flutter_secure_keyboard 插件，以提高应用的安全性。