All snippets
Flutter Insurance Claim Status Card with Payout Breakdown
A Flutter insurance claim tracker for insurtech apps: four-stage stepper from filed to paid, estimated payout, a two-tone bar splitting covered amount and deductible, assigned adjuster and a document shortcut. Stepper built from fixed-width columns in wind_kit, no stack or painter.
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-sky-50 dark:bg-sky-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.directions_car,
className: 'text-sky-600 dark:text-sky-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Claim INS-88214',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Auto collision | Filed Jul 18',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-amber-100 dark:bg-amber-800',
child: WText(
'In review',
className: 'text-xs font-semibold text-amber-700 dark:text-amber-100'
),
),
],
),
WDiv(
className: 'flex flex-col items-center w-full mt-6',
child: WDiv(
className: 'flex flex-row items-start',
children: [
WDiv(
className: 'flex flex-col items-center w-[62px]',
children: [
WDiv(
className: 'w-7 h-7 rounded-full bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WIcon(
Icons.check,
className: 'text-white text-sm'
),
),
WText(
'Filed',
className: 'text-xs font-semibold text-gray-900 dark:text-white mt-2'
),
WText(
'Jul 18',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'w-[28px] h-0.5 rounded-full bg-emerald-400 dark:bg-emerald-500 mt-3.5'
),
WDiv(
className: 'flex flex-col items-center w-[62px]',
children: [
WDiv(
className: 'w-7 h-7 rounded-full bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WIcon(
Icons.check,
className: 'text-white text-sm'
),
),
WText(
'Assessed',
className: 'text-xs font-semibold text-gray-900 dark:text-white mt-2'
),
WText(
'Jul 24',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'w-[28px] h-0.5 rounded-full bg-sky-400 dark:bg-sky-500 mt-3.5'
),
WDiv(
className: 'flex flex-col items-center w-[62px]',
children: [
WDiv(
className: 'w-7 h-7 rounded-full bg-sky-500 dark:bg-sky-400 flex flex-row items-center justify-center',
child: WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-white'
),
),
WText(
'Approved',
className: 'text-xs font-semibold text-sky-600 dark:text-sky-400 mt-2'
),
WText(
'2 days',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'w-[28px] h-0.5 rounded-full bg-gray-200 dark:bg-gray-700 mt-3.5'
),
WDiv(
className: 'flex flex-col items-center w-[62px]',
children: [
WDiv(
className: 'w-7 h-7 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-gray-300 dark:bg-gray-600'
),
),
WText(
'Paid',
className: 'text-xs font-semibold text-gray-400 dark:text-gray-500 mt-2'
),
WText(
'Aug 4',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-6'
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Estimated payout',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
WText(
'$4,280',
className: 'text-3xl font-extrabold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-800',
child: WText(
'Repair approved',
className: 'text-xs font-semibold text-emerald-700 dark:text-emerald-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 w-full mt-4',
children: [
WDiv(
className: 'w-[290px] h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[38px] h-2.5 rounded-full bg-amber-500 dark:bg-amber-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WText(
'Covered $3,780',
className: 'text-xs text-gray-600 dark:text-gray-300 ml-2'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-2.5 h-2.5 rounded-full bg-amber-500 dark:bg-amber-400'
),
WText(
'Your deductible $500',
className: 'text-xs text-gray-600 dark:text-gray-300 ml-2'
),
],
),
],
),
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: [
WDiv(
className: 'w-9 h-9 rounded-full bg-violet-500 dark:bg-violet-400 flex flex-row items-center justify-center',
child: WText(
'DW',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Dana Whitfield',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Claims adjuster',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-white dark:bg-gray-900',
child: WText(
'Message',
className: 'text-xs font-semibold text-sky-600 dark:text-sky-400'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.schedule,
className: 'text-gray-400 dark:text-gray-500 text-sm'
),
WText(
'Updated 2 hours ago',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'4 documents',
className: 'text-xs font-semibold text-sky-600 dark:text-sky-400'
),
WIcon(
Icons.chevron_right,
className: 'text-sky-600 dark:text-sky-400 text-sm'
),
],
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-sky-600 dark:bg-sky-500 py-3',
child: WText(
'Upload Repair Estimate',
className: 'text-white text-center font-semibold text-sm'
),
),
),
],
)
283 lines
Open in the playground
More like this
-
Flutter Euro Banknote Card with True Scale Note Stack and Denomination Colours
A euro banknote card for banking, travel and currency apps: all six Europa series notes from €5 to €200 drawn to true scale in their official grey, red, blue, orange, green and yellow-brown, each tagged with its millimetre size, plus width and height stats showing how every step up adds 6 or 7 mm.
-
Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate
A Flutter income tax card for payroll, budgeting and personal finance apps: UK 2026/27 personal allowance, basic and higher rate bands drawn to scale for a 60,000 pound salary, tax per band and tiles for total, effective rate and marginal rate. Baseline-aligned wind_kit bars.
-
Flutter Revenue Bridge Card with Floating Waterfall Steps
A waterfall bridge that walks opening recurring revenue to closing through new, expansion, contraction and churn. Each step floats at its own running total with a hairline connector to the next, so the additions and the losses are readable without a chart library.
