Flutter Guitar Chord Diagram Card with Barre and Finger Dots
The chord every beginner quits on, drawn properly. A real fretboard box with a thick nut, six strings, numbered finger dots and a full barre across the first fret, plus three easier voicings underneath. Every line and dot is a positioned Wind box, so there is no image asset and no charting library.
by Anılcan Çakır
4 views
0 stars
3 hours 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',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-10 h-10 rounded-2xl bg-indigo-50 dark:bg-indigo-950',
child: WIcon(
Icons.play_arrow,
className: 'text-xl text-indigo-500 dark:text-indigo-400'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'F major',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Barre shape, first position',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-rose-100 dark:bg-rose-900 px-2 py-1',
child: WText(
'HARD',
className: 'text-[9px] font-bold tracking-wide text-rose-700 dark:text-rose-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'CHORD DIAGRAM',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'E SHAPE, 6 STRINGS',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center w-full mt-3',
child: WDiv(
className: 'relative w-[192px] h-[184px]',
children: [
WDiv(
className: 'absolute left-[10px] top-[43px] w-[172px] h-[2px] bg-gray-200 dark:bg-gray-700'
),
WDiv(
className: 'absolute left-[10px] top-[82px] w-[172px] h-[2px] bg-gray-200 dark:bg-gray-700'
),
WDiv(
className: 'absolute left-[10px] top-[121px] w-[172px] h-[2px] bg-gray-200 dark:bg-gray-700'
),
WDiv(
className: 'absolute left-[10px] top-[160px] w-[172px] h-[2px] bg-gray-200 dark:bg-gray-700'
),
WDiv(
className: 'absolute left-[10px] top-[6px] w-[2px] h-[156px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[44px] top-[6px] w-[2px] h-[156px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[78px] top-[6px] w-[2px] h-[156px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[112px] top-[6px] w-[2px] h-[156px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[146px] top-[6px] w-[2px] h-[156px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[180px] top-[6px] w-[2px] h-[156px] bg-gray-300 dark:bg-gray-600'
),
WDiv(
className: 'absolute left-[6px] top-[0px] w-[180px] h-[6px] rounded-sm bg-gray-900 dark:bg-white'
),
WDiv(
className: 'absolute left-[4px] top-[16px] flex flex-row items-center justify-center w-[184px] h-[20px] rounded-full bg-indigo-500 dark:bg-indigo-400',
child: WText(
'1',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'absolute left-[33px] top-[92px] flex flex-row items-center justify-center w-[24px] h-[24px] rounded-full bg-indigo-500 dark:bg-indigo-400',
child: WText(
'3',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'absolute left-[67px] top-[92px] flex flex-row items-center justify-center w-[24px] h-[24px] rounded-full bg-indigo-500 dark:bg-indigo-400',
child: WText(
'4',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'absolute left-[101px] top-[53px] flex flex-row items-center justify-center w-[24px] h-[24px] rounded-full bg-indigo-500 dark:bg-indigo-400',
child: WText(
'2',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'absolute left-[1px] top-[168px] flex flex-row items-center justify-center w-[20px] h-[14px]',
child: WText(
'E',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'absolute left-[35px] top-[168px] flex flex-row items-center justify-center w-[20px] h-[14px]',
child: WText(
'A',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'absolute left-[69px] top-[168px] flex flex-row items-center justify-center w-[20px] h-[14px]',
child: WText(
'D',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'absolute left-[103px] top-[168px] flex flex-row items-center justify-center w-[20px] h-[14px]',
child: WText(
'G',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'absolute left-[137px] top-[168px] flex flex-row items-center justify-center w-[20px] h-[14px]',
child: WText(
'B',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
WDiv(
className: 'absolute left-[171px] top-[168px] flex flex-row items-center justify-center w-[20px] h-[14px]',
child: WText(
'e',
className: 'text-[10px] font-bold text-gray-400 dark:text-gray-500'
),
),
],
),
),
WDiv(
className: 'flex flex-row items-center w-full mt-4 rounded-2xl bg-indigo-50 dark:bg-indigo-950 px-3 py-2',
children: [
WIcon(
Icons.info,
className: 'text-base text-indigo-500 dark:text-indigo-400'
),
WDiv(
className: 'ml-2',
child: WText(
'One finger bars all six strings at fret 1.',
className: 'text-[11px] font-medium text-indigo-700 dark:text-indigo-300'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WText(
'EASIER VOICINGS',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'LOW TO HIGH',
className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Mini F',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WText(
'Top four strings only',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WText(
'x x 3 2 1 1',
className: 'text-[12px] font-bold tracking-wide text-gray-700 dark:text-gray-300'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Fmaj7',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WText(
'Open high E, softer colour',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WText(
'x x 3 2 1 0',
className: 'text-[12px] font-bold tracking-wide text-gray-700 dark:text-gray-300'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-2',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'F at the 8th',
className: 'text-[12px] font-bold text-gray-900 dark:text-white'
),
WText(
'A shape, thinner voice',
className: 'text-[10px] text-gray-500 dark:text-gray-400'
),
],
),
WText(
'1 3 3 2 1 1',
className: 'text-[12px] font-bold tracking-wide text-gray-700 dark:text-gray-300'
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white px-4 py-3',
child: WText(
'Hear the chord',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 4
- Stars
- 0
- Revisions
- 1
- Size
- 9,717 chars
- Created
- Sep 14, 2026