Flutter Team Fixture List Card with Result Badges and Form Strip
A football club fixture card that splits played matches from upcoming ones: paired team initial avatars, scores with win, draw and loss badges, a highlighted next match, and a last-five form strip of coloured result tiles. Demonstrates overlapping avatars with ring borders, section labels and grouped rows in Wind.
by Anılcan Çakır
2 views
0 stars
8 hours 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-col',
children: [
WText(
'Northside FC',
className: 'text-lg font-bold text-gray-900 dark:text-white'
),
WText(
'Premier Division | Week 4',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-violet-100 dark:bg-violet-900',
child: WText(
'3rd place',
className: 'text-xs font-semibold text-violet-700 dark:text-violet-200'
),
),
],
),
WText(
'RESULTS',
className: 'text-xs font-semibold tracking-widest text-gray-400 dark:text-gray-500 mt-5'
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-8 h-8 rounded-full bg-emerald-600 dark:bg-emerald-500 flex flex-row items-center justify-center',
child: WText(
'NFC',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-8 h-8 rounded-full bg-rose-600 dark:bg-rose-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
child: WText(
'HAR',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Northside 3 - 1 Harbour',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Jul 19 | Home',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'w-7 h-7 rounded-full bg-emerald-100 dark:bg-emerald-800 flex flex-row items-center justify-center',
child: WText(
'W',
className: 'text-xs font-bold text-emerald-700 dark:text-emerald-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-8 h-8 rounded-full bg-emerald-600 dark:bg-emerald-500 flex flex-row items-center justify-center',
child: WText(
'NFC',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-8 h-8 rounded-full bg-sky-600 dark:bg-sky-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
child: WText(
'RVR',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Riverton 2 - 2 Northside',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Jul 12 | Away',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'w-7 h-7 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WText(
'D',
className: 'text-xs font-bold text-gray-600 dark:text-gray-300'
),
),
],
),
],
),
WText(
'UPCOMING',
className: 'text-xs font-semibold tracking-widest text-gray-400 dark:text-gray-500 mt-5'
),
WDiv(
className: 'flex flex-col gap-3 w-full mt-3',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-8 h-8 rounded-full bg-emerald-600 dark:bg-emerald-500 flex flex-row items-center justify-center',
child: WText(
'NFC',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-8 h-8 rounded-full bg-amber-600 dark:bg-amber-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
child: WText(
'OAK',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Northside vs Oakfield',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Aug 2 | 15:00',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'px-2.5 py-1 rounded-full bg-amber-100 dark:bg-amber-800',
child: WText(
'Next',
className: 'text-xs font-bold text-amber-700 dark:text-amber-100'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-8 h-8 rounded-full bg-emerald-600 dark:bg-emerald-500 flex flex-row items-center justify-center',
child: WText(
'NFC',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-8 h-8 rounded-full bg-indigo-600 dark:bg-indigo-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
child: WText(
'WES',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Westbrook vs Northside',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Aug 9 | 17:30',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WIcon(
Icons.chevron_right,
className: 'text-gray-300 dark:text-gray-600 text-base'
),
],
),
],
),
WDiv(
className: 'w-full border-t border-gray-100 dark:border-gray-800 mt-5'
),
WDiv(
className: 'flex flex-row items-center w-full mt-4',
children: [
WText(
'Last 5',
className: 'text-xs font-semibold text-gray-500 dark:text-gray-400'
),
WDiv(
className: 'flex flex-row items-center gap-1.5 ml-3',
children: [
WDiv(
className: 'w-6 h-6 rounded-md bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'W',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-6 h-6 rounded-md bg-gray-300 dark:bg-gray-600 flex flex-row items-center justify-center',
child: WText(
'D',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-6 h-6 rounded-md bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'W',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-6 h-6 rounded-md bg-rose-500 dark:bg-rose-400 flex flex-row items-center justify-center',
child: WText(
'L',
className: 'text-xs font-bold text-white'
),
),
WDiv(
className: 'w-6 h-6 rounded-md bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'W',
className: 'text-xs font-bold text-white'
),
),
],
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-2xl bg-violet-600 dark:bg-violet-500 py-3',
child: WText(
'Full Season Fixtures',
className: 'text-white text-center font-semibold text-sm'
),
),
),
],
)
Stats
- Views
- 2
- Stars
- 0
- Revisions
- 1
- Size
- 10,229 chars
- Created
- Jul 25, 2026