密码强度检查器
这是一个以视觉方式检查密码强度的组件,当强度根据用户设置的变化时会带有动画效果。
特点
入门
您可以使用默认的PasswordStrength枚举来设置密码强度,也可以创建自己的实现PasswordStrengthItem的枚举并使用它。例如
enum CustomPassStrength implements PasswordStrengthItem {
weak,
medium,
strong;
@override
Color get statusColor {
switch (this) {
case CustomPassStrength.weak:
return Colors.red;
case CustomPassStrength.medium:
return Colors.orange;
case CustomPassStrength.strong:
return Colors.green;
}
}
@override
Widget? get statusWidget {
switch (this) {
case CustomPassStrength.weak:
return const Text('Weak');
case CustomPassStrength.medium:
return const Text('Medium');
case CustomPassStrength.strong:
return const Text('Strong');
default:
return null;
}
}
@override
double get widthPerc {
switch (this) {
case CustomPassStrength.weak:
return 0.15;
case CustomPassStrength.medium:
return 0.4;
case CustomPassStrength.strong:
return 0.75;
default:
return 0.0;
}
}
static CustomPassStrength? calculate({required String text}) {
// Implement your custom logic here
if (text.isEmpty) {
return null;
}
if (text.length < 6) {
return CustomPassStrength.weak;
} else if (text.length < 10) {
return CustomPassStrength.medium;
} else {
return CustomPassStrength.strong;
}
}
}
用法
import 'package:flutter/material.dart';
import 'package:password_strength_checker/password_strength_checker.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final passNotifier = ValueNotifier<PasswordStrength?>(null);
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
onChanged: (value) {
passNotifier.value = PasswordStrength.calculate(text: value);
},
),
const SizedBox(height: 20),
PasswordStrengthChecker(
strength: passNotifier,
),
],
),
),
);
}
}
