Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums

An education card that lays out rows 0 to 7 of Pascal’s triangle as binomial coefficient tiles, shades every odd entry so the Sierpinski pattern shows through, and runs a row sum gutter that doubles from 1 to 128. Tiles count the 36 entries, the 27 odd ones and the 255 total. Built with centred Wind rows and one node per number, ready for maths, tutoring and puzzle apps.

Anılcan Çakır by Anılcan Çakır 84 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums 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-amber-500 dark:bg-amber-500',
              child: WIcon(
                Icons.science,
                className: 'text-white text-xl'
              )
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'Pascal’s Triangle',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Binomial coefficients',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                ),
              ]
            ),
          ]
        ),
        WDiv(
          className: 'rounded-full bg-amber-50 dark:bg-amber-900/40 px-3 py-1',
          child: WText(
            'Rows 0 to 7',
            className: 'text-xs font-bold text-amber-700 dark:text-amber-300'
          )
        ),
      ]
    ),
    WDiv(
      className: 'flex flex-col w-full mt-4',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WText(
              '',
              className: 'w-[262px] text-[10px]'
            ),
            WText(
              'Σ',
              className: 'w-[32px] text-right text-xs font-bold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '1',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '2',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '2',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '4',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '3',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '3',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '8',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '4',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '6',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '4',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '16',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '5',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '10',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '10',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '5',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '32',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '6',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '15',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '20',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '15',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '6',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-medium'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '64',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-center mt-[4px]',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center gap-[4px] w-[262px]',
              children: [
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '7',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '21',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '35',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '35',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '21',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '7',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                ),
                WText(
                  '1',
                  className: 'w-[30px] h-[24px] rounded-md text-center text-xs pt-[5px] bg-amber-400 dark:bg-amber-500 border border-amber-400 dark:border-amber-500 text-gray-900 dark:text-gray-900 font-bold'
                )
              ]
            ),
            WText(
              '128',
              className: 'w-[32px] text-right text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
            )
          ]
        ),
      ]
    ),
    WDiv(
      className: 'flex flex-row items-center gap-[11px] mt-4',
      children: [
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
          children: [
            WText(
              '36',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Entries',
              className: 'text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
          children: [
            WText(
              '27',
              className: 'text-lg font-bold text-amber-600 dark:text-white'
            ),
            WText(
              'Odd, 3³',
              className: 'text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
          children: [
            WText(
              '255',
              className: 'text-lg font-bold text-indigo-600 dark:text-white'
            ),
            WText(
              'All rows',
              className: 'text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
      ]
    ),
    WText(
      'Odd entries trace Sierpinski’s triangle.',
      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-amber-500 dark:bg-amber-500 py-3 flex flex-row items-center justify-center gap-2',
        child: WText(
          'Add row 8',
          className: 'text-sm font-semibold text-gray-900'
        )
      )
    ),
  ]
)
Stats
Views
84
Stars
0
Revisions
1
Size
17,079 chars
Created
Oct 11, 2026