一款美观且经过验证的密码 TextFormField，用于 flutter

password_validated_field

一个包，可让您在应用中包含一个酷炫、美观且经过验证的 Password TextFormField，以增强用户体验。该包完全且易于修改。

可自定义属性

导入 package:password_validated_field/src/requirement_widget.dart，以下字段均可修改：

• inputDecoration
• textEditingController
• textInputAction
• onEditComplete
• onFieldSubmitted
• focusNode
• cursorColor
• 文本样式
• activeIcon
• inActiveIcon
• activeRequirementColor
• inActiveRequirementColor

效果如下

以下是该包效果的一些示例。

导入该包并使用 package:password_validated_field/password_validated_field.dart

简单用法

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  // simple check
  bool _validPassword = false;

  // form key
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Password Validated Field"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _validPassword
                ? Text(
                    "Password Valid!",
                    style: TextStyle(fontSize: 22.0),
                  )
                : Container(),
            PasswordValidatedFields(), // password validated field from package
            ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    setState(() {
                      _validPassword = true;
                    });
                  } else {
                    setState(() {
                      _validPassword = false;
                    });
                  }
                },
                child: Text("Check password!")),
          ],
        ),
      ),
    );
  }
}

自定义用法

class CustomizeFieldExample extends StatefulWidget {
  const CustomizeFieldExample({Key? key}) : super(key: key);

  @override
  _CustomizeFieldExampleState createState() => _CustomizeFieldExampleState();
}

class _CustomizeFieldExampleState extends State<CustomizeFieldExample> {
  // simple check
  bool _validPassword = false;

  // form key
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Customized Field"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _validPassword
                ? Text(
                    "Password Valid!",
                    style: TextStyle(fontSize: 22.0),
                  )
                : Container(),
            PasswordValidatedFields(
              inActiveIcon: Icons.cancel_outlined,
              activeIcon: Icons.check,
              inActiveRequirementColor: Colors.orange,
              activeRequirementColor: Colors.green,
            ), // password validated field from package
            ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    setState(() {
                      _validPassword = true;
                    });
                  } else {
                    setState(() {
                      _validPassword = false;
                    });
                  }
                },
                child: Text("Check password!")),
          ],
        ),
      ),
    );
  }
}

更自定义的用法

class MoreCustomizedField extends StatefulWidget {
  const MoreCustomizedField({Key? key}) : super(key: key);

  @override
  _MoreCustomizedFieldState createState() => _MoreCustomizedFieldState();
}

class _MoreCustomizedFieldState extends State<MoreCustomizedField> {
  // simple check
  bool _validPassword = false;

  // form key
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Customized Field"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _validPassword
                ? Text(
                    "Password Valid!",
                    style: TextStyle(fontSize: 22.0),
                  )
                : Container(),
            PasswordValidatedFields(
              inActiveIcon: Icons.cancel,
              activeIcon: Icons.done_all,
              inputDecoration: InputDecoration(
                labelText: "Enter password",
                filled: true,
                fillColor: Colors.grey[300],
                prefixIcon: Icon(Icons.lock),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.transparent),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blue),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.red),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.red),
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ), // password validated filed from package
            ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    setState(() {
                      _validPassword = true;
                    });
                  } else {
                    setState(() {
                      _validPassword = false;
                    });
                  }
                },
                child: Text("Check password!")),
          ],
        ),
      ),
    );
  }
}

修改该包

您可以根据自己的需求轻松修改该包。

主要关注的属性

• 位于 validated_field 底部的 RegExp
• 位于 validated_field 中的 onChange 回调
• 位于 requirement_widget 中的 requirement_widget
• 在 validated_field 中添加的 requirement_widget 检查

RegExp 修改

• 1个大写字母 RegExp(r'[A-Z]')
• 1个小写字母 RegExp(r'[a-z]')
• 1个数字 RegExp(r'[0-9]')
• 1个特殊字符 RegExp(r'[!@#$%^&*(),.?":{}|<>]')
• 6个字符长度 _pass.length >= 6

结合您需要的 RegExp 与上述内容一起修改

RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{6,}$')

完整的简单示例，在此处。

GitHub

https://github.com/mhmzdev/password_validated_field