Flutter密码输入框插件password_text_field的使用

PasswordTextField 是一个可以管理密码明文和密文切换的 TextField。本文将展示如何在 Flutter 中使用 PasswordTextField 和 PasswordTextFormField。

如何使用

使用 TextField（PasswordTextField）

以下是一个简单的示例，展示了如何使用 PasswordTextField 创建一个密码输入框：

class PasswordWidget extends StatelessWidget {
  const PasswordWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'TextField',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        const SizedBox(
          height: 8,
        ),
        // 使用 PasswordTextField 创建一个密码输入框
        const PasswordTextField(
          decoration: InputDecoration(
            border: UnderlineInputBorder(), // 设置边框样式为下划线
            hintText: 'underline', // 提示文本
          ),
        ),
        const SizedBox(
          height: 16,
        ),
        // 使用 PasswordTextField 创建另一个密码输入框
        const PasswordTextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(), // 设置边框样式为轮廓
            hintText: 'outline', // 提示文本
          ),
        ),
      ],
    );
  }
}

使用 TextFormField（PasswordTextFormField）

以下是一个更复杂的示例，展示了如何使用 PasswordTextFormField 创建一个带验证功能的密码输入框：

class PasswordFormWidget extends StatefulWidget {
  const PasswordFormWidget({super.key});

  [@override](/user/override)
  State<PasswordFormWidget> createState() => _PasswordFormWidgetState();
}

class _PasswordFormWidgetState extends State<PasswordFormWidget> {
  final _formState = GlobalKey<FormState>();
  final _textFormFieldController = TextEditingController();

  [@override](/user/override)
  void dispose() {
    _textFormFieldController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formState,
      child: Column(
        children: [
          Text(
            'TextFormField',
            style: Theme.of(context).textTheme.titleLarge,
          ),
          const SizedBox(
            height: 8,
          ),
          // 使用 PasswordTextFormField 创建一个带验证功能的密码输入框
          PasswordTextFormField(
            controller: _textFormFieldController,
            validator: (value) {
              if ((value?.length ?? 0) < 6) {
                return 'Password must be at least 6 characters'; // 验证密码长度至少为6个字符
              }
              return null;
            },
          ),
          const SizedBox(
            height: 16,
          ),
          // 添加一个按钮用于验证密码
          OutlinedButton(
            onPressed: () {
              final state = _formState.currentState;
              if (state == null || !state.validate()) {
                return;
              }

              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    'Password ${_textFormFieldController.text} is valid!', // 显示密码验证结果
                  ),
                ),
              );
            },
            child: const Text('Check'),
          ),
        ],
      ),
    );
  }
}