Flutter密码强度检查插件password_check的使用

在Flutter中，PasswordChecklist 是一个可自定义的UI元素，用于显示密码验证要求及其当前状态。此组件帮助用户实时看到他们的密码满足哪些条件，并且可以自定义消息、颜色和图标。以下是每个属性的详细说明。

属性

1. controller

• 类型：TextEditingController
• 描述：controller 用于管理并监听密码输入字段的变化。它应从父级部件传递，以确保 PasswordChecklist 可以访问密码文本。
• 示例：

  TextEditingController myController = TextEditingController();
  

2. onValidationChanged

• 类型：ValueChanged<bool>
• 描述：当密码验证状态发生变化时触发的回调函数。这允许你处理验证状态的变化，例如启用或禁用提交按钮。
• 示例：

  (isValid) {
    print(isValid ? "Password is valid" : "Password is invalid");
  }
  

3. checkEightCharacters

• 类型：bool
• 描述：确定是否检查最小字符长度。如果设置为 true，则该组件将验证密码是否至少包含 minCharacters 个字符。
• 默认值：true
• 示例：

  checkEightCharacters: true,
  

4. checkSpecialCharacter

• 类型：bool
• 描述：指示组件是否应该检查是否存在至少一个特殊字符（例如 !@#$%^&*()）。
• 默认值：true
• 示例：

  checkSpecialCharacter: true,
  

5. checkNumber

• 类型：bool
• 描述：指示组件是否应该检查是否存在至少一个数字。
• 默认值：true
• 示例：

  checkNumber: true,
  

6. checkUppercase

• 类型：bool
• 描述：指定组件是否应验证密码是否包含至少一个大写字母。
• 默认值：true
• 示例：

  checkUppercase: true,
  

7. checkLowercase

• 类型：bool
• 描述：确定组件是否应检查密码是否包含至少一个小写字母。
• 默认值：true
• 示例：

  checkLowercase: true,
  

8. checkOnlyNumbers

• 类型：bool
• 描述：指示组件是否应检查密码是否仅由数字组成。
• 默认值：false
• 示例：

  checkOnlyNumbers: false,
  

9. minCharacters

• 类型：int
• 描述：指定密码所需的最小字符数，当 checkEightCharacters 设置为 true 时。
• 默认值：8
• 示例：

  minCharacters: 10,
  

10. validColor

• 类型：Color?
• 描述：当条件满足时应用于验证文本和 Checkbox 的颜色。如果不指定，则默认为绿色。
• 示例：

  validColor: Colors.blue,
  

11. invalidColor

• 类型：Color?
• 描述：当条件不满足时应用于验证文本和 Checkbox 的颜色。如果不指定，则默认为红色。
• 示例：

  invalidColor: Colors.orange,
  

12. eightCharactersMessage

• 类型：String?
• 描述：当密码不符合最小字符要求时显示的可自定义消息。如果没有提供，默认消息为 “Should contain at least X characters.”
• 示例：

  eightCharactersMessage: 'Password must be at least 12 characters long',
  

13. specialCharacterMessage

• 类型：String?
• 描述：当密码不包含特殊字符时显示的可自定义消息。默认消息为 “Should contain a special character.”
• 示例：

  specialCharacterMessage: 'Include at least one special character',
  

14. numberMessage

• 类型：String?
• 描述：当密码不包含数字时显示的可自定义消息。默认消息为 “Should contain a number.”
• 示例：

  numberMessage: 'Include at least one numeric digit',
  

15. uppercaseMessage

• 类型：String?
• 描述：当密码不包含大写字母时显示的可自定义消息。默认消息为 “Should contain an uppercase letter.”
• 示例：

  uppercaseMessage: 'Include at least one uppercase letter',
  

16. lowercaseMessage

• 类型：String?
• 描述：当密码不包含小写字母时显示的可自定义消息。默认消息为 “Should contain a lowercase letter.”
• 示例：

  lowercaseMessage: 'Include at least one lowercase letter',
  

17. onlyNumbersMessage

• 类型：String?
• 描述：当密码仅包含数字时显示的可自定义消息。默认消息为 “Should contain only numbers.”
• 示例：

  onlyNumbersMessage: 'Password should not be only numbers',
  

18. customIcon

• 类型：Widget?
• 描述：一个可选的自定义图标，将在验证消息旁边显示。如果不提供，将显示默认的 Checkbox。
• 示例：

  customIcon: Icon(Icons.check, color: Colors.blue),
  

完整示例代码

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

void main() => runApp(const PasswordCheckerExampleApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PasswordCheckerExampleScreen(),
    );
  }
}

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

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

class PasswordCheckerExampleScreenState
    extends State<PasswordCheckerExampleScreen> {
  final TextEditingController _passwordController = TextEditingController();
  bool isPasswordValid = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Password Checker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: '请输入您的密码',
              ),
            ),
            const SizedBox(height: 20),
            PasswordChecklist(
              controller: _passwordController,
              minCharacters: 6,
              onValidationChanged: (isValid) {
                setState(() {
                  isPasswordValid = isValid;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}