Flutter Order Delivery Status Timeline Card
A vertical order-tracking timeline with completed check nodes, an active out-for-delivery step, a pending delivery node, connecting lines, and an arrival ETA chip. Built with Wind UI utility classes and dark mode pairs.
WDiv(
className: '''
mx-auto w-[400px] flex flex-col gap-5 p-6 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: 'flex flex-row items-center justify-between',
children: [
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'Order #4827',
className: 'text-lg font-bold text-gray-900 dark:text-white',
),
WText(
'Aurora Wireless Buds',
className: 'text-sm text-gray-500 dark:text-gray-400',
),
],
),
WDiv(
className: '''
inline-flex flex-row items-center gap-1
rounded-full px-3 py-1
bg-emerald-100 dark:bg-emerald-900
''',
children: [
WIcon(
Icons.schedule,
className: 'text-sm text-emerald-600 dark:text-emerald-300',
),
WText(
'5:30 PM',
className: 'text-xs font-semibold text-emerald-700 dark:text-emerald-200',
),
],
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WDiv(
className: 'flex flex-row gap-4',
children: [
WDiv(
className: 'flex flex-col items-center',
children: [
WDiv(
className: '''
w-9 h-9 rounded-full
bg-emerald-500 dark:bg-emerald-500
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.check,
className: 'text-base text-white dark:text-white',
),
),
WDiv(
className: 'w-0.5 h-10 bg-emerald-500 dark:bg-emerald-500',
),
],
),
WDiv(
className: 'flex-1 flex flex-col gap-0.5',
children: [
WText(
'Order placed',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
WText(
'9:24 AM',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
],
),
WDiv(
className: 'flex flex-row gap-4',
children: [
WDiv(
className: 'flex flex-col items-center',
children: [
WDiv(
className: '''
w-9 h-9 rounded-full
bg-emerald-500 dark:bg-emerald-500
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.check,
className: 'text-base text-white dark:text-white',
),
),
WDiv(
className: 'w-0.5 h-10 bg-emerald-500 dark:bg-emerald-500',
),
],
),
WDiv(
className: 'flex-1 flex flex-col gap-0.5',
children: [
WText(
'Preparing your order',
className: 'text-sm font-semibold text-gray-900 dark:text-white',
),
WText(
'9:41 AM',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
],
),
WDiv(
className: 'flex flex-row gap-4',
children: [
WDiv(
className: 'flex flex-col items-center',
children: [
WDiv(
className: '''
w-9 h-9 rounded-full
bg-indigo-600 dark:bg-indigo-500
border-4 border-indigo-100 dark:border-indigo-950
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.location_on,
className: 'text-base text-white dark:text-white',
),
),
WDiv(
className: 'w-0.5 h-10 bg-gray-200 dark:bg-gray-700',
),
],
),
WDiv(
className: 'flex-1 flex flex-col gap-0.5',
children: [
WText(
'Out for delivery',
className: 'text-sm font-semibold text-indigo-600 dark:text-indigo-400',
),
WText(
'10:05 AM',
className: 'text-xs text-gray-500 dark:text-gray-400',
),
],
),
],
),
WDiv(
className: 'flex flex-row gap-4',
children: [
WDiv(
className: 'flex flex-col items-center',
child: WDiv(
className: '''
w-9 h-9 rounded-full
bg-gray-100 dark:bg-gray-800
border border-gray-300 dark:border-gray-700
flex flex-row items-center justify-center
''',
child: WIcon(
Icons.home,
className: 'text-base text-gray-400 dark:text-gray-500',
),
),
),
WDiv(
className: 'flex-1 flex flex-col gap-0.5',
children: [
WText(
'Delivered',
className: 'text-sm font-semibold text-gray-400 dark:text-gray-500',
),
WText(
'Est. 5:30 PM',
className: 'text-xs text-gray-400 dark:text-gray-500',
),
],
),
],
),
],
),
],
)
Benzer örnekler
-
Flutter Grocery List Card with Quantity Pills and Running Total
A shared shopping list where checked items strike through, each row carries a quantity pill and a price, and the footer tracks the running total against the weekly budget. Wind line-through and pill utilities, no state package required.
-
Flutter Cafe Loyalty Stamp Card with Reward Progress
A digital coffee-shop loyalty card built with Wind for Flutter: a fill-the-grid stamp collection, a stamps-earned counter chip, and a redeem call to action. Shows how to build retail rewards UI with Tailwind-style className utilities and dark-mode-ready color pairs.
-
Flutter Real Estate Property Listing Card with Photo Header
A real estate property listing card with a gradient photo header, price overlay, location, beds, baths, and area stats, plus a details call to action. Responsive Wind layout with dark mode.
