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.
by Anılcan Çakır
19 views
0 stars
1 week ago
Rev 1
main.dart
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',
),
],
),
],
),
],
),
],
)
Stats
- Views
- 19
- Stars
- 0
- Revisions
- 1
- Size
- 6,115 chars
- Created
- Jun 12, 2026