Flutter Tournament Bracket Card with Semi Final Matchups
A knockout bracket card for sports and esports apps: seeded team rows with scores, losing sides dimmed, real bracket connectors drawn from side borders, the two finalists aligned to each pair and a dark final strip with kickoff time and venue. Built with Wind utility classes and complete dark mode pairs.
by Anılcan Çakır
11 views
0 stars
6 days ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col items-start w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col items-start',
children: [
WText(
'SUMMER CUP 2026',
className: 'text-[11px] font-bold tracking-widest text-gray-500 dark:text-gray-400'
),
WText(
'Knockout bracket',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-rose-100 dark:bg-rose-900 px-2 py-1',
children: [
WIcon(
Icons.local_fire_department,
className: 'text-rose-600 dark:text-rose-300 text-xs'
),
WText(
'Live',
className: 'text-[10px] font-bold text-rose-700 dark:text-rose-200 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center w-[140px]',
child: WText(
'SEMI FINALS',
className: 'text-[10px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'w-[18px]'
),
WDiv(
className: 'flex flex-row items-center w-[140px] ml-2',
child: WText(
'FINAL',
className: 'text-[10px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-2',
children: [
WDiv(
className: 'flex flex-col items-start w-[140px]',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-[140px] h-[32px] rounded-lg bg-indigo-50 dark:bg-indigo-950 border border-indigo-200 dark:border-indigo-800 px-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white',
child: WText(
'1',
className: 'text-[9px] font-bold'
),
),
WText(
'Nordwind FC',
className: 'text-[11px] font-bold text-gray-900 dark:text-white ml-2'
),
],
),
WText(
'3',
className: 'text-[12px] font-bold text-indigo-700 dark:text-indigo-300'
),
],
),
WDiv(
className: 'w-full mt-1',
child: WDiv(
className: 'flex flex-row items-center justify-between w-[140px] h-[32px] rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-100 dark:border-gray-800 px-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300',
child: WText(
'4',
className: 'text-[9px] font-bold'
),
),
WText(
'Rivera United',
className: 'text-[11px] font-bold text-gray-500 dark:text-gray-400 ml-2'
),
],
),
WText(
'1',
className: 'text-[12px] font-bold text-gray-400 dark:text-gray-500'
),
],
),
),
WDiv(
className: 'w-full mt-5',
child: WDiv(
className: 'flex flex-row items-center justify-between w-[140px] h-[32px] rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-100 dark:border-gray-800 px-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300',
child: WText(
'2',
className: 'text-[9px] font-bold'
),
),
WText(
'Kingsport SC',
className: 'text-[11px] font-bold text-gray-500 dark:text-gray-400 ml-2'
),
],
),
WText(
'0',
className: 'text-[12px] font-bold text-gray-400 dark:text-gray-500'
),
],
),
),
WDiv(
className: 'w-full mt-1',
child: WDiv(
className: 'flex flex-row items-center justify-between w-[140px] h-[32px] rounded-lg bg-indigo-50 dark:bg-indigo-950 border border-indigo-200 dark:border-indigo-800 px-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white',
child: WText(
'3',
className: 'text-[9px] font-bold'
),
),
WText(
'Atlas City',
className: 'text-[11px] font-bold text-gray-900 dark:text-white ml-2'
),
],
),
WText(
'2',
className: 'text-[12px] font-bold text-indigo-700 dark:text-indigo-300'
),
],
),
),
],
),
WDiv(
className: 'flex flex-col items-start w-[18px] ml-1',
children: [
WDiv(
className: 'w-[18px] h-[16px]'
),
WDiv(
className: 'w-[18px] h-[36px] border-t-2 border-r-2 border-b-2 border-gray-400 dark:border-gray-500 rounded-r-lg'
),
WDiv(
className: 'w-[18px] h-[52px]'
),
WDiv(
className: 'w-[18px] h-[36px] border-t-2 border-r-2 border-b-2 border-gray-400 dark:border-gray-500 rounded-r-lg'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[140px] ml-1',
children: [
WDiv(
className: 'w-[140px] h-[18px]'
),
WDiv(
className: 'flex flex-row items-center justify-between w-[140px] h-[32px] rounded-lg bg-indigo-50 dark:bg-indigo-950 border border-indigo-200 dark:border-indigo-800 px-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white',
child: WText(
'1',
className: 'text-[9px] font-bold'
),
),
WText(
'Nordwind FC',
className: 'text-[11px] font-bold text-gray-900 dark:text-white ml-2'
),
],
),
WText(
'-',
className: 'text-[12px] font-bold text-indigo-700 dark:text-indigo-300'
),
],
),
WDiv(
className: 'w-[140px] h-[56px]'
),
WDiv(
className: 'flex flex-row items-center justify-between w-[140px] h-[32px] rounded-lg bg-indigo-50 dark:bg-indigo-950 border border-indigo-200 dark:border-indigo-800 px-2',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-4 h-4 rounded bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white',
child: WText(
'3',
className: 'text-[9px] font-bold'
),
),
WText(
'Atlas City',
className: 'text-[11px] font-bold text-gray-900 dark:text-white ml-2'
),
],
),
WText(
'-',
className: 'text-[12px] font-bold text-indigo-700 dark:text-indigo-300'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-900 dark:bg-white px-4 py-3 mt-4',
children: [
WDiv(
className: 'flex flex-col items-start',
children: [
WText(
'FINAL',
className: 'text-[10px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'Nordwind vs Atlas City',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'Sat 8:00 PM',
className: 'text-xs font-bold text-white dark:text-gray-900'
),
WText(
'Grand Arena',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-4',
children: [
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3',
children: [
WText(
'TEAMS LEFT',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'2',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 ml-2',
children: [
WText(
'GOALS',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'6',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
],
),
WDiv(
className: 'flex flex-col items-start w-[104px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-3 ml-2',
children: [
WText(
'ATTENDANCE',
className: 'text-[10px] font-bold tracking-wide text-gray-500 dark:text-gray-400'
),
WText(
'41k',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
],
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 px-4 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WText(
'View full bracket',
className: 'text-sm font-bold text-white dark:text-white'
),
WDiv(
className: 'ml-2',
child: WIcon(
Icons.chevron_right,
className: 'text-white dark:text-white text-base'
)
),
],
),
),
),
],
)
Stats
- Views
- 11
- Stars
- 0
- Revisions
- 1
- Size
- 12,959 chars
- Created
- Aug 19, 2026