Flutter 炫酷密码字段

简介

FancyPasswordField 是一个充当密码验证字段的小部件。您可以拥有普通密码字段的所有功能，还可以获得设置验证规则和密码强度等炫酷功能。

基本用法

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

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

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

我们可以进一步为我们的组件传递一些验证规则。

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

该包随附一些预定义的常用规则，因此您可以开箱即用。随意实现您自己的 [ValidationRule] 并正常添加到密码字段。

自定义规则

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

class ContainsTripleAValidationRule extends ValidationRule {
@override
String get name => 'Contains AAA';

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

这样做就足以让您的规则正常工作。将您的规则传递给 [FancyPasswordField] 的 [validationRules] 集合，即可发生规则的显示和验证。

密码控制器

[FancyPasswordField] 有一个您可以传递的控制器。此控制器的目的与 Flutter 世界中的任何控制器几乎相同。控制器为您提供了对字段底层信息的访问。特别是，它为您提供了有关规则以及当前违反了哪些规则的信息。控制器还有一个指示所有规则是否正常的 getter。

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

final FancyPasswordController _passwordController = FancyPasswordController();

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

自定义

[FancyPasswordField] 随附一些预定义的组件，可以为强度指示器和规则显示一些看起来不错的组件。但该组件被设计为完全可自定义的。因此，您可以将自己的构建器传递给强度密码组件和规则组件。

在“示例”部分，您可以找到许多自定义示例。

上面我们可以看到一个示例，展示了这些字段的一些可能的自定义。

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return MaterialApp(
   title: 'Flutter Demo',
   home: Scaffold(
     body: SizedBox(
         width: 400,
         child: FancyPasswordField(
             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(),
               );
             },
           ),
         ),
   ),
 );
}
}

GitHub

查看 Github