Flutter Insurance Claim Status Card with Payout Breakdown
A claim tracker for an insurtech app: a four stage stepper from filed to paid with completed, current and pending nodes, an estimated payout figure, a two tone bar splitting the covered amount from the deductible, the assigned adjuster, and a document shortcut. A good example of a Wind stepper built from fixed width columns and short connector bars, no stack or painter.
by Anılcan Çakır
99 views
0 stars
4 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-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'
),
),
),
],
)
Stats
- Views
- 99
- Stars
- 0
- Revisions
- 1
- Size
- 9,184 chars
- Created
- Jul 27, 2026