Flutter密码强度计算插件flutter_password_calculator的使用

Introduction

FlutterPasswordCalculator 是一个作为密码验证字段的小部件。你可以拥有普通密码字段的所有功能，并且还可以设置验证规则和密码强度。

基本用法

最简单的用法是不带任何属性直接使用 FlutterPasswordCalculator。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: FlutterPasswordCalculator(),
      ),
    );
  }
}

这将创建一个具有某些默认配置的密码字段。默认行为是在表单字段上方显示强度指示器。你可以通过传递 false 给 hasStrengthIndicator 属性来禁用此行为。

我们可以更进一步，向我们的小部件传递一些验证规则。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: FlutterPasswordCalculator(
          validationRules: {
            DigitValidationRule(),
            UppercaseValidationRule(),
            LowercaseValidationRule(),
            SpecialCharacterValidationRule(),
            MinCharactersValidationRule(6),
            MaxCharactersValidationRule(12),
          },
        ),
      ),
    );
  }
}

该包包含一些预定义的常用规则，因此你可以直接使用它们。你也可以自由地实现自己的 [ValidationRule] 并通常添加到密码字段中。

自定义规则

如前所述，该包带有内置的常用规则，但你可以创建自己的自定义规则。为此，只需扩展基 [ValidationRule] 抽象类即可。你需要为你的规则提供名称和验证函数。

class ContainsTripleAValidationRule extends ValidationRule {
  [@override](/user/override)
  String get name => 'Contains AAA';

  [@override](/user/override)
  bool validate(String value) {
    return value.contains('AAA');
  }
}

仅仅这样做就足以使你的规则生效。将你的规则传递给 [validationRules] 集合中的 [FlutterPasswordCalculator]，显示和验证规则就会发生。

密码控制器

[FlutterPasswordCalculator] 具有一个可以传递的控制器。这个控制器的目的与 Flutter 世界中的其他控制器几乎相同。控制器为你提供了对字段的底层信息的访问。特别是，它为你提供了有关规则的信息以及哪些规则在任何时刻被违反了。控制器还有一个获取器，用于指示所有规则是否都已通过。

一个使用案例是如果你想验证表单字段的状态以启用或禁用表单的保存。

final FlutterPasswordCalculatorController _passwordController = FlutterPasswordCalculatorController();

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 400,
              child: FlutterPasswordCalculator(
                passwordController: _passwordController,
                validationRules: {
                  DigitValidationRule(),
                  UppercaseValidationRule(),
                },
                validator: (value) {
                  return _passwordController.areAllRulesValidated
                      ? null
                      : 'Not Validated';
                },
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

定制

[FlutterPasswordCalculator] 包含一些预定义的小部件，这些小部件显示了一些看起来不错的强度指示器和规则组件。但是，该小部件被设计为完全可定制的。因此，你可以传递自己的构建器到强度密码小部件和规则小部件。

上面我们看到了这些字段的一些可能的定制示例。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SizedBox(
          width: 400,
          child: FlutterPasswordCalculator(
            validationRules: {
              DigitValidationRule(),
              UppercaseValidationRule(),
              LowercaseValidationRule(),
              SpecialCharacterValidationRule(),
              MinCharactersValidationRule(6),
              MaxCharactersValidationRule(12),
            },
            strengthIndicatorBuilder: (strength) =>
                Text(
                  strength.toString(),
                ),
            validationRuleBuilder: (rules, value) {
              if (value.isEmpty) {
                return const SizedBox.shrink();
              }
              return ListView(
                shrinkWrap: true,
                children: rules
                    .map(
                      (rule) =>
                  rule.validate(value)
                      ? Row(
                    children: [
                      const Icon(
                        Icons.check,
                        color: Colors.green,
                      ),
                      const SizedBox(width: 12),
                      Text(
                        rule.name,
                        style: const TextStyle(
                          color: Colors.green,
                        ),
                      ),
                    ],
                  )
                      : Row(
                    children: [
                      const Icon(
                        Icons.close,
                        color: Colors.red,
                      ),
                      const SizedBox(width: 12),
                      Text(
                        rule.name,
                        style: const TextStyle(
                          color: Colors.red,
                        ),
                      ),
                    ],
                  ),
                )
                    .toList(),
              );
            },
          ),
        ),
      ),
    );
  }
}