Flutter密码输入插件ffr_pwd_input_field的使用

ffr_pwd_input_field

ffr_pwd_input_field 是一个由 Flutter 开发的密码输入字段插件。该插件的源代码 100% 使用 Dart 和 Flutter 编写，并且所有必要的文件都位于 /lib 文件夹中。

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

ffr_pwd_input_field: <latest_version>

然后在项目中导入：

import 'package:ffr_pwd_input_field/ffr_pwd_input_field.dart';

基本用法

以下是使用 ffr_pwd_input_field 的完整示例代码：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FocusNode _testNode = FocusNode(); // 聚焦节点
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>(); // SnackBar 的全局键
  final _formKey = GlobalKey<FormState>(); // 表单的全局键
  final _testKey = GlobalKey<FormFieldState<String>>(); // 密码输入字段的全局键
  bool isError = false; // 是否显示错误状态
  String text = ''; // 显示用户输入的文本

  [@override](/user/override)
  void dispose() {
    _testNode.dispose(); // 释放焦点节点资源
    super.dispose();
  }

  void _saveForm() {
    if (_formKey.currentState.validate()) { // 验证表单
      if (isError == false) {
        setState(() {
          text = _testKey.currentState.value; // 获取输入值
        });
        _testKey.currentState.reset(); // 清空输入框
      } else {
        _scaffoldKey.currentState.showSnackBar( // 显示错误提示
            SnackBar(content: Text('A value must be entered')));
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey, // 设置全局键
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: [
            Form(
              key: _formKey, // 设置表单全局键
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 30), // 添加底部间距
                    child: FFRPwdInputField(
                      autofocus: true, // 自动聚焦
                      focusNode: _testNode, // 设置焦点节点
                      onFieldSubmitted: (term) { // 输入完成后的回调
                        _testNode.unfocus(); // 取消焦点
                      },
                      hintText: 'I am a hint', // 提示文字
                      backgroundColor: Colors.lightGreen, // 背景颜色
                      icon: Icon(Icons.lock), // 图标
                      fieldKey: _testKey, // 设置字段全局键
                      isError: isError, // 是否显示错误状态
                      validate: (String newValue) { // 验证逻辑
                        if (newValue.isEmpty) {
                          setState(() {
                            isError = true; // 如果为空则设置错误状态
                          });
                        } else {
                          setState(() {
                            isError = false; // 否则清除错误状态
                          });
                        }
                      },
                      textStyle: TextStyle(color: Colors.black, fontSize: 20), // 文本样式
                      errorColor: Colors.red, // 错误状态的颜色
                      hidePwd: Icon(Icons.visibility_off), // 隐藏密码图标
                      showPwd: Icon(Icons.visibility), // 显示密码图标
                    ),
                  ),
                  ElevatedButton(
                    onPressed: _saveForm, // 按钮点击事件
                    child: Text('Press me'), // 按钮文字
                  )
                ],
              ),
            ),
            SizedBox(height: 30), // 添加垂直间距
            text == '' ? Container() : Text(text), // 显示用户输入的文本
          ],
        ),
      ),
    );
  }
}