Flutter OTP Verification PIN Entry Card
A one-time-code verification card with a six-cell PIN entry row, a focused cell showing a caret and ring glow, a resend countdown, and a primary verify action. Built with Wind UI utility classes and dark mode pairs.
WDiv(
className: '''
mx-auto w-[400px] flex flex-col items-center gap-5 p-8 rounded-3xl
bg-white dark:bg-gray-900
border border-gray-200 dark:border-gray-800
shadow-xl shadow-black/5 dark:shadow-black/40
''',
children: [
WDiv(
className: '''
w-16 h-16 rounded-2xl
bg-indigo-100 dark:bg-indigo-950
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.mail,
className: 'text-3xl text-indigo-600 dark:text-indigo-400',
),
),
WDiv(
className: 'flex flex-col items-center gap-1',
children: [
WText(
'Verify your number',
className: 'text-xl font-bold text-gray-900 dark:text-white',
),
WText(
'Enter the 6-digit code sent to +1 (555) 012-3489',
className: 'text-sm text-center text-gray-500 dark:text-gray-400',
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WDiv(
className: '''
w-12 h-14 rounded-xl border-2
border-gray-200 dark:border-gray-700
bg-gray-50 dark:bg-gray-800
flex flex-row items-center justify-center
''',
child: WText(
'8',
className: 'text-2xl font-bold text-gray-900 dark:text-white',
),
),
WDiv(
className: '''
w-12 h-14 rounded-xl border-2
border-gray-200 dark:border-gray-700
bg-gray-50 dark:bg-gray-800
flex flex-row items-center justify-center
''',
child: WText(
'2',
className: 'text-2xl font-bold text-gray-900 dark:text-white',
),
),
WDiv(
className: '''
w-12 h-14 rounded-xl border-2
border-gray-200 dark:border-gray-700
bg-gray-50 dark:bg-gray-800
flex flex-row items-center justify-center
''',
child: WText(
'4',
className: 'text-2xl font-bold text-gray-900 dark:text-white',
),
),
WDiv(
className: '''
w-12 h-14 rounded-xl border-2
border-indigo-500 dark:border-indigo-400
ring-2 ring-indigo-500/30 dark:ring-indigo-400/30
bg-white dark:bg-gray-800
flex flex-row items-center justify-center
''',
child: WDiv(
className: 'w-0.5 h-6 rounded-full bg-indigo-500 dark:bg-indigo-400',
),
),
WDiv(
className: '''
w-12 h-14 rounded-xl border-2
border-gray-200 dark:border-gray-700
bg-gray-50 dark:bg-gray-800
''',
),
WDiv(
className: '''
w-12 h-14 rounded-xl border-2
border-gray-200 dark:border-gray-700
bg-gray-50 dark:bg-gray-800
''',
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WIcon(
Icons.schedule,
className: 'text-sm text-gray-400 dark:text-gray-500',
),
WText(
'Resend code in 0:24',
className: 'text-sm text-gray-500 dark:text-gray-400',
),
],
),
WDiv(
className: '''
w-full rounded-2xl py-4
bg-indigo-600 dark:bg-indigo-500
flex flex-row items-center justify-center gap-2
''',
children: [
WText(
'Verify',
className: 'text-base font-bold text-white dark:text-white',
),
WIcon(
Icons.arrow_forward,
className: 'text-lg text-white dark:text-white',
),
],
),
],
)
Benzer örnekler
-
Öne çıkan
Doğrulamalı e-posta alanı
Doğrulayıcısı, odak halkası ve
error:kenarlığı olan bir form girdisi. -
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.
-
Flutter File Upload Card with Progress Bars
A file upload card with a drag-and-drop zone and per-file progress bars showing uploading and completed states. Styled with Tailwind-style Wind classes and dark-mode support.
