Flutter密码强度指示插件password_strength_indicator_plus的使用

password_strength_indicator_plus 是一个Flutter插件，提供了一个密码强度指示组件，以确保您的Flutter应用程序中的密码符合强密码要求。该组件通过5个关键规则来验证密码强度，并附带一个可视化的进度指示器，帮助用户创建安全的密码。

功能特性

1. 密码强度规则

该组件强制执行以下5个关键规则来验证密码强度：

• 最小长度
• 大写字母
• 小写字母
• 特殊字符
• 数字（数字）

2. 实时反馈

用户在输入密码时，组件会实时提供反馈，显示用户是否满足了指定的要求。

3. 密码强度指示器

组件包含一个可视化的进度指示器，直观地展示用户输入的密码强度。

4. 自定义

您可以轻松自定义密码验证规则和组件的外观，以匹配您应用程序的需求。

安装

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

dependencies:
  password_strength_indicator_plus: ^0.0.1

然后运行 flutter pub get 来安装该插件。

使用方法

首先，在Dart代码中导入插件：

import 'package:password_strength_indicator_plus/password_strength_indicator_plus.dart';

接下来，在您的Widget树中使用 PasswordStrengthIndicatorPlus 组件：

PasswordStrengthIndicatorPlus(
  textController: controller, // 传递 TextEditingController
)

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用程序中使用 password_strength_indicator_plus 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Password Validation',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Create Your Password'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  @override
  void dispose() {
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Enter your password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            PasswordStrengthIndicatorPlus(
              textController: _passwordController,
              minLength: 8, // 设置最小长度为8
              maxLength: 16, // 设置最大长度为16
              successIcon: Icons.check_circle, // 成功时的图标
              unSuccessIcon: Icons.error, // 失败时的图标
              textSize: 16, // 文本大小
              hideRules: false, // 显示规则
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 您可以在这里处理提交逻辑
                print('Password: ${_passwordController.text}');
              },
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

自定义参数

您可以根据需要自定义 PasswordStrengthIndicatorPlus 组件的参数，例如：

PasswordStrengthIndicatorPlus(
  textController: _passwordController,
  minLength: 8, // 设置最小长度
  maxLength: 16, // 设置最大长度
  successIcon: Icons.check_circle, // 成功时的图标
  unSuccessIcon: Icons.error, // 失败时的图标
  successWidget: SvgPicture.asset(
    "assets/icons/tick.svg", // 成功时的自定义Widget
    height: 24,
  ),
  unSuccessWidget: SvgPicture.asset(
    "assets/icons/close.svg", // 失败时的自定义Widget
    height: 24,
  ),
  textSize: 16, // 文本大小
  hideRules: true, // 隐藏规则
),