Flutter Password Strength Card with Requirement Checklist
A sign-up password step that scores strength on a four segment meter, ticks off each requirement live, and confirms the password is not in a known breach list. Built with Wind className utilities and a real WInput field.
by Anılcan Çakır
80 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-indigo-50 dark:bg-indigo-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.person,
className: 'text-indigo-600 dark:text-indigo-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Create password',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'[email protected]',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-indigo-100 dark:bg-indigo-800',
child: WText(
'Step 2 of 3',
className: 'text-xs font-semibold text-indigo-700 dark:text-indigo-100'
),
),
],
),
WInput(
type: "password",
value: "Th3nderbolt24",
className: 'w-full rounded-2xl border-2 border-indigo-500 dark:border-indigo-400 bg-white dark:bg-gray-800 px-4 py-3 text-base text-gray-900 dark:text-white mt-5',
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'STRENGTH',
className: 'text-xs font-semibold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'Strong',
className: 'text-xs font-bold text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1.5 w-full mt-2',
children: [
WDiv(
className: 'w-[79px] h-2 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[79px] h-2 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[79px] h-2 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[79px] h-2 rounded-full bg-gray-200 dark:bg-gray-700'
),
],
),
WDiv(
className: 'flex flex-col gap-2.5 w-full mt-5',
children: [
WDiv(
className: 'flex flex-row items-center w-full',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-base'
),
WText(
'At least 12 characters',
className: 'text-sm text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-base'
),
WText(
'Upper and lowercase letters',
className: 'text-sm text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full',
children: [
WIcon(
Icons.check_circle,
className: 'text-emerald-500 dark:text-emerald-400 text-base'
),
WText(
'Contains a number',
className: 'text-sm text-gray-700 dark:text-gray-200 ml-2.5'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-4 h-4 rounded-full bg-amber-100 dark:bg-amber-800 flex flex-row items-center justify-center',
child: WIcon(
Icons.close,
className: 'text-amber-600 dark:text-amber-200 text-xs'
),
),
WText(
'Add one symbol',
className: 'text-sm font-medium text-gray-900 dark:text-white ml-2.5'
),
],
),
WText(
'reaches Excellent',
className: 'text-xs text-amber-600 dark:text-amber-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-4 mt-5',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.info,
className: 'text-gray-400 dark:text-gray-500 text-base'
),
WDiv(
className: 'flex flex-col ml-2.5',
children: [
WText(
'Checked against 12B leaks',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'No match found for this password',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WIcon(
Icons.check,
className: 'text-emerald-500 dark:text-emerald-400 text-base'
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 py-3',
child: WText(
'Save and Continue',
className: 'text-white text-center font-semibold text-sm'
),
),
),
WDiv(
className: 'w-full mt-3',
child: WButton(
className: 'w-full rounded-2xl bg-gray-50 dark:bg-gray-800 py-3',
child: WText(
'Generate a strong password',
className: 'text-indigo-600 dark:text-indigo-400 text-center font-semibold text-sm'
),
),
),
],
)
Stats
- Views
- 80
- Stars
- 0
- Revisions
- 1
- Size
- 6,382 chars
- Created
- Jul 30, 2026