Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands

A hearing check card for Flutter health apps, built with Wind utility classes: a pure tone audiogram with the clinical marker convention (red circles for the right ear, blue crosses for the left), dotted threshold lines across 250 Hz to 8 kHz, translucent severity bands from normal to severe, per-ear pure tone averages, and a noise notch callout. Positioned with fixed px, so the chart scales cleanly to a hero image.

Anılcan Çakır by Anılcan Çakır 103 views 0 stars 3 weeks ago Rev 1
Open in Playground Fork
Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands preview
main.dart 
WDiv(
  className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
  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-sky-600 dark:bg-sky-500',
              child: WIcon(
                Icons.headphones,
                className: 'text-white text-xl'
              )
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'Hearing Check',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Pure tone audiogram, 6 Oct',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                ),
              ]
            ),
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center gap-3',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-1',
              children: [
                WDiv(
                  className: 'w-[10px] h-[10px] rounded-full border-2 border-red-500 dark:border-red-400'
                ),
                WText(
                  'R',
                  className: 'text-xs font-semibold text-red-600 dark:text-red-400'
                ),
              ]
            ),
            WDiv(
              className: 'flex flex-row items-center gap-1',
              children: [
                WText(
                  '×',
                  className: 'text-base font-bold text-blue-600 dark:text-blue-400'
                ),
                WText(
                  'L',
                  className: 'text-xs font-semibold text-blue-600 dark:text-blue-400'
                ),
              ]
            ),
          ]
        ),
      ]
    ),
    WText(
      'dB HL',
      className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-4'
    ),
    WDiv(
      className: 'relative w-[298px] h-[192px]',
      children: [
        WDiv(
          className: 'absolute left-[28px] top-[6px] w-[270px] h-[50px] bg-emerald-500/10 dark:bg-emerald-400/10'
        ),
        WDiv(
          className: 'absolute left-[28px] top-[56px] w-[270px] h-[20px] bg-lime-500/15 dark:bg-lime-400/10'
        ),
        WDiv(
          className: 'absolute left-[28px] top-[76px] w-[270px] h-[30px] bg-amber-400/15 dark:bg-amber-400/10'
        ),
        WDiv(
          className: 'absolute left-[28px] top-[106px] w-[270px] h-[30px] bg-orange-500/15 dark:bg-orange-400/15'
        ),
        WDiv(
          className: 'absolute left-[28px] top-[136px] w-[270px] h-[30px] bg-rose-500/15 dark:bg-rose-400/15'
        ),
        WDiv(
          className: 'absolute left-[28px] top-[166px] w-[270px] h-[20px] bg-rose-500/25 dark:bg-rose-400/25'
        ),
        WText(
          'Normal',
          className: 'absolute left-[242px] top-[25px] w-[54px] text-right text-[9px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Slight',
          className: 'absolute left-[242px] top-[60px] w-[54px] text-right text-[9px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Mild',
          className: 'absolute left-[242px] top-[85px] w-[54px] text-right text-[9px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Moderate',
          className: 'absolute left-[242px] top-[115px] w-[54px] text-right text-[9px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Mod. severe',
          className: 'absolute left-[242px] top-[145px] w-[54px] text-right text-[9px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Severe',
          className: 'absolute left-[242px] top-[170px] w-[54px] text-right text-[9px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WDiv(
          className: 'absolute left-[40px] top-[6px] w-[1px] h-[180px] bg-gray-300 dark:bg-gray-700'
        ),
        WDiv(
          className: 'absolute left-[78px] top-[6px] w-[1px] h-[180px] bg-gray-300 dark:bg-gray-700'
        ),
        WDiv(
          className: 'absolute left-[116px] top-[6px] w-[1px] h-[180px] bg-gray-300 dark:bg-gray-700'
        ),
        WDiv(
          className: 'absolute left-[154px] top-[6px] w-[1px] h-[180px] bg-gray-300 dark:bg-gray-700'
        ),
        WDiv(
          className: 'absolute left-[192px] top-[6px] w-[1px] h-[180px] bg-gray-300 dark:bg-gray-700'
        ),
        WDiv(
          className: 'absolute left-[230px] top-[6px] w-[1px] h-[180px] bg-gray-300 dark:bg-gray-700'
        ),
        WText(
          '0',
          className: 'absolute left-[0px] top-[19px] w-[24px] text-center text-[10px] text-gray-400 dark:text-gray-500'
        ),
        WText(
          '20',
          className: 'absolute left-[0px] top-[59px] w-[24px] text-center text-[10px] text-gray-400 dark:text-gray-500'
        ),
        WText(
          '40',
          className: 'absolute left-[0px] top-[99px] w-[24px] text-center text-[10px] text-gray-400 dark:text-gray-500'
        ),
        WText(
          '60',
          className: 'absolute left-[0px] top-[139px] w-[24px] text-center text-[10px] text-gray-400 dark:text-gray-500'
        ),
        WText(
          '80',
          className: 'absolute left-[0px] top-[179px] w-[24px] text-center text-[10px] text-gray-400 dark:text-gray-500'
        ),
        WDiv(
          className: 'absolute left-[48px] top-[44px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[58px] top-[44px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[67px] top-[44px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[86px] top-[47px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[96px] top-[50px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[105px] top-[52px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[124px] top-[57px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[134px] top-[60px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[143px] top-[62px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[162px] top-[77px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[172px] top-[90px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[181px] top-[102px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[200px] top-[104px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[210px] top-[94px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[219px] top-[84px] w-[3px] h-[3px] rounded-full bg-red-400 dark:bg-red-400'
        ),
        WDiv(
          className: 'absolute left-[48px] top-[64px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[58px] top-[64px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[67px] top-[64px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[86px] top-[67px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[96px] top-[70px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[105px] top-[72px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[124px] top-[77px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[134px] top-[80px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[143px] top-[82px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[162px] top-[94px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[172px] top-[104px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[181px] top-[114px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[200px] top-[117px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[210px] top-[110px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[219px] top-[102px] w-[3px] h-[3px] rounded-full bg-blue-400 dark:bg-blue-400'
        ),
        WDiv(
          className: 'absolute left-[34px] top-[40px] w-[12px] h-[12px] rounded-full border-2 border-red-500 dark:border-red-400 bg-white dark:bg-gray-900'
        ),
        WDiv(
          className: 'absolute left-[72px] top-[40px] w-[12px] h-[12px] rounded-full border-2 border-red-500 dark:border-red-400 bg-white dark:bg-gray-900'
        ),
        WDiv(
          className: 'absolute left-[110px] top-[50px] w-[12px] h-[12px] rounded-full border-2 border-red-500 dark:border-red-400 bg-white dark:bg-gray-900'
        ),
        WDiv(
          className: 'absolute left-[148px] top-[60px] w-[12px] h-[12px] rounded-full border-2 border-red-500 dark:border-red-400 bg-white dark:bg-gray-900'
        ),
        WDiv(
          className: 'absolute left-[186px] top-[110px] w-[12px] h-[12px] rounded-full border-2 border-red-500 dark:border-red-400 bg-white dark:bg-gray-900'
        ),
        WDiv(
          className: 'absolute left-[224px] top-[70px] w-[12px] h-[12px] rounded-full border-2 border-red-500 dark:border-red-400 bg-white dark:bg-gray-900'
        ),
        WText(
          '×',
          className: 'absolute left-[32px] top-[56px] w-[16px] h-[18px] text-center text-[18px] font-bold text-blue-600 dark:text-blue-400'
        ),
        WText(
          '×',
          className: 'absolute left-[70px] top-[56px] w-[16px] h-[18px] text-center text-[18px] font-bold text-blue-600 dark:text-blue-400'
        ),
        WText(
          '×',
          className: 'absolute left-[108px] top-[66px] w-[16px] h-[18px] text-center text-[18px] font-bold text-blue-600 dark:text-blue-400'
        ),
        WText(
          '×',
          className: 'absolute left-[146px] top-[76px] w-[16px] h-[18px] text-center text-[18px] font-bold text-blue-600 dark:text-blue-400'
        ),
        WText(
          '×',
          className: 'absolute left-[184px] top-[116px] w-[16px] h-[18px] text-center text-[18px] font-bold text-blue-600 dark:text-blue-400'
        ),
        WText(
          '×',
          className: 'absolute left-[222px] top-[86px] w-[16px] h-[18px] text-center text-[18px] font-bold text-blue-600 dark:text-blue-400'
        )
      ]
    ),
    WDiv(
      className: 'flex flex-row items-center w-full',
      children: [
        WDiv(
          className: 'w-[21px] h-[4px]'
        ),
        WText(
          '250',
          className: 'w-[38px] text-center text-[10px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          '500',
          className: 'w-[38px] text-center text-[10px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          '1k',
          className: 'w-[38px] text-center text-[10px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          '2k',
          className: 'w-[38px] text-center text-[10px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          '4k',
          className: 'w-[38px] text-center text-[10px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          '8k',
          className: 'w-[38px] text-center text-[10px] font-medium text-gray-500 dark:text-gray-400'
        ),
        WText(
          'Hz',
          className: 'text-[10px] text-gray-400 dark:text-gray-500'
        )
      ]
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-4',
      children: [
        WDiv(
          className: 'flex flex-col w-[143px] rounded-xl bg-red-50 dark:bg-red-950/40 px-3 py-2',
          children: [
            WText(
              'Right ear PTA',
              className: 'text-[11px] font-medium text-red-700 dark:text-red-300'
            ),
            WDiv(
              className: 'flex flex-row items-end gap-1',
              children: [
                WText(
                  '15 dB',
                  className: 'text-lg font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Normal',
                  className: 'text-xs text-gray-500 dark:text-gray-400 pb-1'
                ),
              ]
            ),
          ]
        ),
        WDiv(
          className: 'flex flex-col w-[143px] rounded-xl bg-blue-50 dark:bg-blue-950/40 px-3 py-2',
          children: [
            WText(
              'Left ear PTA',
              className: 'text-[11px] font-medium text-blue-700 dark:text-blue-300'
            ),
            WDiv(
              className: 'flex flex-row items-end gap-1',
              children: [
                WText(
                  '25 dB',
                  className: 'text-lg font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Slight',
                  className: 'text-xs text-gray-500 dark:text-gray-400 pb-1'
                ),
              ]
            ),
          ]
        ),
      ]
    ),
    WDiv(
      className: 'flex flex-row items-center gap-2 w-full mt-3 rounded-xl bg-amber-50 dark:bg-amber-900/30 px-3 py-2',
      children: [
        WIcon(
          Icons.warning,
          className: 'text-amber-600 dark:text-amber-400 text-base'
        ),
        WText(
          'Notch at 4 kHz in both ears, typical of noise',
          className: 'text-xs font-medium text-amber-800 dark:text-amber-200'
        ),
      ]
    ),
    WDiv(
      className: 'w-full mt-4',
      child: WButton(
        className: 'w-full rounded-2xl bg-sky-600 dark:bg-sky-500 py-3 flex flex-row items-center justify-center',
        child: WText(
          'Share with audiologist',
          className: 'text-sm font-semibold text-white'
        )
      )
    ),
  ],
)
Stats
Views
103
Stars
0
Revisions
1
Size
15,563 chars
Created
Oct 6, 2026