Flutter Progress Stepper Wizard with Plan Selection
A multi-step wizard header with a connected step rail (completed, active, and upcoming states) over a plan selection step and a continue button, all composed from Wind utility classes.
WDiv(
className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
children: [
WDiv(
className: 'flex flex-row items-center w-full mb-6',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-indigo-600 dark:bg-indigo-500 flex flex-row items-center justify-center',
child: WIcon(
Icons.check,
className: 'text-white text-base'
),
),
WDiv(
className: 'flex-1 h-1 rounded-full bg-indigo-600 dark:bg-indigo-500 mx-2',
children: []
),
WDiv(
className: 'w-9 h-9 rounded-full bg-indigo-600 dark:bg-indigo-500 flex flex-row items-center justify-center',
child: WIcon(
Icons.check,
className: 'text-white text-base'
),
),
WDiv(
className: 'flex-1 h-1 rounded-full bg-indigo-600 dark:bg-indigo-500 mx-2',
children: []
),
WDiv(
className: 'w-9 h-9 rounded-full bg-indigo-600 dark:bg-indigo-500 flex flex-row items-center justify-center',
child: WText(
'3',
className: 'text-white text-sm font-bold'
),
),
WDiv(
className: 'flex-1 h-1 rounded-full bg-gray-200 dark:bg-gray-700 mx-2',
children: []
),
WDiv(
className: 'w-9 h-9 rounded-full bg-gray-200 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WText(
'4',
className: 'text-gray-400 dark:text-gray-500 text-sm font-bold'
),
),
],
),
WText(
'Step 3 of 4',
className: 'text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase mb-1'
),
WText(
'Choose your plan',
className: 'text-gray-900 dark:text-white text-xl font-bold mb-4'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full p-4 rounded-2xl border-2 border-indigo-500 dark:border-indigo-400 bg-indigo-50 dark:bg-indigo-950 mb-3',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Pro',
className: 'text-gray-900 dark:text-white text-sm font-bold'
),
WText(
'$12 per month',
className: 'text-gray-500 dark:text-gray-400 text-xs'
),
],
),
WIcon(
Icons.check,
className: 'text-indigo-600 dark:text-indigo-400 text-xl'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full p-4 rounded-2xl border border-gray-200 dark:border-gray-700 mb-6',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Team',
className: 'text-gray-900 dark:text-white text-sm font-bold'
),
WText(
'$29 per month',
className: 'text-gray-500 dark:text-gray-400 text-xs'
),
],
),
WDiv(
className: 'w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600',
children: []
),
],
),
WButton(
className: 'w-full py-3 rounded-2xl bg-indigo-600 dark:bg-indigo-500',
child: WDiv(
className: 'flex flex-row items-center justify-center w-full',
children: [
WText(
'Continue',
className: 'text-white text-sm font-semibold mr-2'
),
WIcon(
Icons.arrow_forward,
className: 'text-white text-base'
),
],
),
),
],
)
Benzer örnekler
-
Flutter SLA Scorecard Card with Bullet Chart Target Markers
A Flutter SLA scorecard card for support desk dashboards: bullet charts with qualitative bands, a thick actual-value bar and a vertical target tick, so a missed target shows at a glance instead of hiding in a percentage. Built with wind_kit utility classes, dark mode pairs, no chart package.
-
Flutter Audience Overlap Card with Three Circle Venn Segments
A Flutter audience overlap card for marketing and growth dashboards: three translucent circles form a real Venn diagram, so shared regions darken by themselves and each lobe shows its count, with a segment legend, reach and overlap tiles and a suppression action. wind_kit only, no chart library.
-
Flutter A/B Test Results Card with Mirrored Variant Bars
An experiment readout where control and variant grow away from a shared centre axis, one metric per row, so which side wins is obvious before you read a single number. Ends with the projected revenue lift and a ship decision.
