Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point

An annotated airfield card that draws the approach end of runway 27 to scale: eight threshold stripes for a 100 ft wide runway, the 27 designator derived from a 268 degree magnetic heading, a dashed centreline and the twin aiming point bars at 1,000 ft, each called out in a side lane. Built with Wind absolute positioning and hairline connectors, ready for aviation, flight training and travel apps.

Anılcan Çakır by Anılcan Çakır 86 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point 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.flight,
                className: 'text-white text-xl'
              )
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'Runway 27',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Nonprecision instrument',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                ),
              ]
            ),
          ]
        ),
        WDiv(
          className: 'rounded-full bg-sky-50 dark:bg-sky-900/40 px-3 py-1',
          child: WText(
            '268° MAG',
            className: 'text-xs font-bold text-sky-700 dark:text-sky-300'
          )
        ),
      ]
    ),
    WDiv(
      className: 'relative w-[298px] h-[325px] mt-4',
      children: [
        WDiv(
          className: 'absolute left-[0px] top-[0px] w-[146px] h-[325px] rounded-2xl bg-[#8fbf7a] dark:bg-[#4d7a3c]'
        ),
        WDiv(
          className: 'absolute left-[24px] top-[0px] w-[100px] h-[325px] bg-[#3f3f46] dark:bg-[#3f3f46]'
        ),
        WDiv(
          className: 'absolute left-[30px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[40px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[50px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[60px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[82px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[92px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[102px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[112px] top-[283px] w-[6px] h-[37px] bg-white dark:bg-white'
        ),
        WText(
          '27',
          className: 'absolute left-[24px] top-[221px] w-[100px] h-[48px] text-center text-[40px] font-bold text-white dark:text-white'
        ),
        WDiv(
          className: 'absolute left-[72px] top-[180px] w-[3px] h-[30px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[72px] top-[130px] w-[3px] h-[30px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[72px] top-[80px] w-[3px] h-[30px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[72px] top-[30px] w-[3px] h-[30px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[38px] top-[57px] w-[18px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[92px] top-[57px] w-[18px] h-[37px] bg-white dark:bg-white'
        ),
        WDiv(
          className: 'absolute left-[152px] top-[-6px] w-[146px] flex flex-col',
          children: [
            WText(
              '088° to 09',
              className: 'text-sm font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Reciprocal end ▲',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ]
        ),
        WDiv(
          className: 'absolute left-[124px] top-[75px] w-[24px] h-[1px] bg-gray-600 dark:bg-gray-400'
        ),
        WDiv(
          className: 'absolute left-[152px] top-[61px] w-[146px] flex flex-col',
          children: [
            WText(
              '1,000 ft',
              className: 'text-sm font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Aiming point',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ]
        ),
        WDiv(
          className: 'absolute left-[124px] top-[247px] w-[24px] h-[1px] bg-gray-600 dark:bg-gray-400'
        ),
        WDiv(
          className: 'absolute left-[152px] top-[233px] w-[146px] flex flex-col',
          children: [
            WText(
              '268° to 27',
              className: 'text-sm font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Designator',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ]
        ),
        WDiv(
          className: 'absolute left-[124px] top-[302px] w-[24px] h-[1px] bg-gray-600 dark:bg-gray-400'
        ),
        WDiv(
          className: 'absolute left-[152px] top-[288px] w-[146px] flex flex-col',
          children: [
            WText(
              '8 stripes',
              className: 'text-sm font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Threshold, 100 ft wide',
              className: 'text-[11px] text-gray-500 dark:text-gray-400'
            ),
          ]
        )
      ]
    ),
    WText(
      'Magnetic heading ÷ 10, rounded: 268° becomes 27.',
      className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
    ),
    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 gap-2',
        child: WText(
          'Cleared to land',
          className: 'text-sm font-semibold text-white'
        )
      )
    ),
  ]
)
Stats
Views
86
Stars
0
Revisions
1
Size
6,078 chars
Created
Oct 11, 2026