Flutter Git Commit Graph Card with Branch Lanes and Merge Lines
A commit history card for developer tools and Git clients, built with Wind in Flutter. Colour-coded lanes for main, a feature branch and a hotfix fork and merge with right-angle connectors, commit rows carry branch, tag and HEAD chips, and an ahead/behind summary sits above a rebase action.
by Anılcan Çakır
74 views
0 stars
2 weeks ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-gray-900 dark:bg-gray-700',
child: WIcon(
Icons.code,
className: 'text-xl text-white'
)
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'Commit graph',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'acme/shop-app, last 2 days',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
]
),
]
),
WDiv(
className: 'rounded-full bg-indigo-100 dark:bg-indigo-900 px-3 py-1',
child: WText(
'3 branches',
className: 'text-xs font-bold text-indigo-700 dark:text-indigo-300'
)
),
]
),
WDiv(
className: 'relative w-[298px] h-[288px] mt-4',
children: [
WDiv(
className: 'absolute left-[11px] top-[18px] w-[3px] h-[270px] rounded-full bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[51px] top-[18px] w-[3px] h-[216px] rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'absolute left-[12px] top-[17px] w-[41px] h-[3px] rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'absolute left-[12px] top-[233px] w-[41px] h-[3px] rounded-full bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'absolute left-[31px] top-[90px] w-[3px] h-[72px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[12px] top-[161px] w-[21px] h-[3px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[21px] top-[79px] w-[22px] h-[22px] rounded-full bg-amber-500/25 dark:bg-amber-400/25'
),
WDiv(
className: 'absolute left-[5px] top-[11px] w-[14px] h-[14px] rounded-full bg-white dark:bg-gray-900 border-2 border-indigo-500 dark:border-indigo-400'
),
WDiv(
className: 'absolute left-[72px] top-[2px] flex flex-col w-[226px]',
children: [
WText(
'Merge feat/checkout-v2',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WDiv(
className: 'rounded px-1 bg-indigo-100 dark:bg-indigo-900',
child: WText(
'main',
className: 'text-[9px] font-bold text-indigo-700 dark:text-indigo-300'
)
),
WText(
'a3f9c1 Mira K 12m',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[46px] top-[48px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'absolute left-[72px] top-[38px] flex flex-col w-[226px]',
children: [
WText(
'Add Apple Pay to checkout',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WDiv(
className: 'rounded px-1 bg-emerald-100 dark:bg-emerald-900',
child: WText(
'feat/checkout-v2',
className: 'text-[9px] font-bold text-emerald-700 dark:text-emerald-300'
)
),
WText(
'7be210 Mira K 1h',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[26px] top-[84px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'absolute left-[72px] top-[74px] flex flex-col w-[226px]',
children: [
WText(
'Retry Stripe webhooks with backoff',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WDiv(
className: 'rounded px-1 bg-amber-100 dark:bg-amber-900',
child: WText(
'fix/webhook-retry',
className: 'text-[9px] font-bold text-amber-700 dark:text-amber-300'
)
),
WDiv(
className: 'rounded px-1 bg-gray-900 dark:bg-white',
child: WText(
'HEAD',
className: 'text-[9px] font-bold text-white dark:text-gray-900'
)
),
WText(
'9c21ab acakir 2h',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[46px] top-[120px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'absolute left-[72px] top-[110px] flex flex-col w-[226px]',
children: [
WText(
'Validate card fields inline',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WText(
'4d18e7 Mira K 3h',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[6px] top-[156px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[72px] top-[146px] flex flex-col w-[226px]',
children: [
WText(
'Bump wind to 1.2.0',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WText(
'e02c55 acakir 5h',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[46px] top-[192px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'absolute left-[72px] top-[182px] flex flex-col w-[226px]',
children: [
WText(
'Scaffold checkout v2 screens',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WText(
'b61f0a Mira K 1d',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[6px] top-[228px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[72px] top-[218px] flex flex-col w-[226px]',
children: [
WText(
'Release 2.4.0',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WDiv(
className: 'rounded px-1 bg-gray-200 dark:bg-gray-700',
child: WText(
'v2.4.0',
className: 'text-[9px] font-bold text-gray-700 dark:text-gray-200'
)
),
WText(
'1c9d3e acakir 2d',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
WDiv(
className: 'absolute left-[6px] top-[264px] w-[12px] h-[12px] rounded-full border-2 border-white dark:border-gray-900 bg-indigo-500 dark:bg-indigo-400'
),
WDiv(
className: 'absolute left-[72px] top-[254px] flex flex-col w-[226px]',
children: [
WText(
'Fix cart badge count',
className: 'text-[12px] font-semibold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-1 mt-[2px]',
children: [
WText(
'88aa01 Jon P 2d',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
]
),
]
),
]
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3 rounded-2xl bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-700 px-3 py-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'fix/webhook-retry',
className: 'text-xs font-bold text-amber-800 dark:text-amber-200'
),
WText(
'1 ahead, 4 behind main',
className: 'text-[11px] text-amber-700 dark:text-amber-300'
),
]
),
WText(
'No conflicts',
className: 'text-[11px] font-semibold text-emerald-600 dark:text-emerald-400'
),
]
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WText(
'Rebase onto main',
className: 'text-sm font-semibold text-white dark:text-gray-900'
),
WIcon(
Icons.arrow_forward,
className: 'text-base text-white dark:text-gray-900'
),
]
)
)
),
],
)
Stats
- Views
- 74
- Stars
- 0
- Revisions
- 1
- Size
- 11,530 chars
- Created
- Sep 23, 2026