Flutter密码验证插件password_validation_plus的使用

password_validation_plus 是一个用于 Flutter 应用程序的密码验证插件。它提供了一个密码验证小部件，以确保您的 Flutter 应用程序中的密码强度要求。该小部件强制执行五项关键规则，并通过视觉进度指示器指导用户创建安全密码。

特性

• 密码强度规则：该小部件强制执行五个关键规则以确保强密码：

  1. 最小长度
  2. 大写字母
  3. 小写字母
  4. 特殊字符
  5. 数字（数字）

• 实时反馈：为用户提供实时反馈，以便在他们输入密码时指示其是否满足指定的要求。

• 密码强度指示器：可视化进度指示器，直观表示所输入密码的强度。

• 自定义化：轻松自定义密码验证规则和小部件的外观，以匹配应用程序的需求。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  password_validation_plus: ^0.0.1

运行 flutter pub get 命令来安装包。

使用

在 Dart 代码中导入包：

import 'package:password_validation_plus/password_validation_plus.dart';

在小部件树中使用 PasswordValidationPlus 小部件：

PasswordValidationPlus(
  textController: controller, // TextEditingController
)

自定义

可以通过向 PasswordValidationPlus 构造函数提供不同的参数来自定义密码验证小部件：

PasswordValidationPlus(
  textController: controller,
  maxLength: 12,
  minLength: 8,
  successIcon: Iconsax.tick_circle,
  unSuccessIcon: Iconsax.close_circle,
  successWidget: SvgPicture.asset(
    "assets/icons/tick.svg",
    height: 24,
  ),
  unSuccessWidget: SvgPicture.asset(
    "assets/icons/close.svg",
    height: 24,
  ),
  textSize: 16,
  hideRules: true,
),

• textController: 设置密码文本字段的 TextEditingController。
• minLength: 设置密码所需的最小长度。
• maxLength: 设置密码允许的最大长度。
• hideRules: 设置为 true 以隐藏密码验证规则。
• successIcon: 自定义成功验证规则时显示的图标。
• unSuccessIcon: 自定义未成功验证规则时显示的图标。
• successWidget: 自定义成功验证规则时显示的小部件。
• unSuccessWidget: 自定义未成功验证规则时显示的小部件。
• textSize: 调整验证规则和图标的文本大小。

示例

以下是一个完整的使用此插件的示例：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:password_validation_plus/password_validation_plus.dart';

void main() {
  runApp(const MyApp());
}

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '密码验证',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        textTheme: GoogleFonts.signikaTextTheme(),
      ),
      home: const MyHomePage(title: '创建您的密码'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              obscureText: true,
              decoration: InputDecoration(
                labelText: '密码',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            PasswordValidationPlus(
              textController: _controller,
              maxLength: 12,
              minLength: 8,
              successIcon: Iconsax.tick_circle,
              unSuccessIcon: Iconsax.close_circle,
              successWidget: SvgPicture.asset(
                "assets/icons/tick.svg",
                height: 24,
              ),
              unSuccessWidget: SvgPicture.asset(
                "assets/icons/close.svg",
                height: 24,
              ),
              textSize: 16,
              hideRules: false,
            ),
          ],
        ),
      ),
    );
  }
}