Flutter Revenue Bridge Card with Floating Waterfall Steps

A waterfall bridge that walks opening recurring revenue to closing through new, expansion, contraction and churn. Each step floats at its own running total with a hairline connector to the next, so the additions and the losses are readable without a chart library.

Anılcan Çakır by Anılcan Çakır 8 views 0 stars 1 day ago Rev 1
Open in Playground Fork
Flutter Revenue Bridge Card with Floating Waterfall Steps preview
main.dart 
WDiv(
  className: 'flex flex-col w-[340px] p-5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800',
  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-xl bg-emerald-500 dark:bg-emerald-400',
              child: WIcon(
                Icons.trending_up,
                className: 'text-xl text-white dark:text-gray-900'
              ),
            ),
            WDiv(
              className: 'flex flex-col ml-3',
              children: [
                WText(
                  'Acme Cloud',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Recurring revenue, Q3 to Q4',
                  className: 'text-[11px] text-gray-500 dark:text-gray-400'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'rounded-full bg-emerald-100 dark:bg-emerald-900 px-2 py-1',
          child: WText(
            'CLOSED',
            className: 'text-[10px] font-bold tracking-wide text-emerald-700 dark:text-emerald-200'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-end w-full mt-5',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              '$4.62M',
              className: 'text-3xl font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'CLOSING ARR',
              className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col ml-4',
          children: [
            WDiv(
              className: 'flex flex-row items-center',
              child: WDiv(
                className: 'rounded-md bg-emerald-50 dark:bg-emerald-900 px-2 py-1',
                child: WText(
                  '+$470K',
                  className: 'text-xs font-bold text-emerald-600 dark:text-emerald-200'
                ),
              ),
            ),
            WText(
              'net new',
              className: 'text-[10px] text-gray-500 dark:text-gray-400 mt-1'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-5',
      children: [
        WText(
          'ARR BRIDGE',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
        WText(
          'BASELINE 3.60',
          className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'relative w-[300px] h-[120px] mt-2',
      children: [
        WDiv(
          className: 'flex flex-row items-start w-[300px] h-[120px]',
          children: [
            WDiv(
              className: 'flex flex-col justify-start w-[40px] h-[120px]',
              children: [
                WDiv(
                  className: 'w-[40px] h-[76px]'
                ),
                WDiv(
                  className: 'w-[40px] h-[44px] rounded-t bg-slate-400 dark:bg-slate-500'
                ),
              ],
            ),
            WDiv(
              className: 'w-[12px] h-[120px]'
            ),
            WDiv(
              className: 'flex flex-col justify-start w-[40px] h-[120px]',
              children: [
                WDiv(
                  className: 'w-[40px] h-[26px]'
                ),
                WDiv(
                  className: 'w-[40px] h-[50px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
                ),
              ],
            ),
            WDiv(
              className: 'w-[12px] h-[120px]'
            ),
            WDiv(
              className: 'flex flex-col justify-start w-[40px] h-[120px]',
              children: [
                WDiv(
                  className: 'w-[40px] h-[7px]'
                ),
                WDiv(
                  className: 'w-[40px] h-[19px] rounded-sm bg-emerald-400 dark:bg-emerald-300'
                ),
              ],
            ),
            WDiv(
              className: 'w-[12px] h-[120px]'
            ),
            WDiv(
              className: 'flex flex-col justify-start w-[40px] h-[120px]',
              children: [
                WDiv(
                  className: 'w-[40px] h-[7px]'
                ),
                WDiv(
                  className: 'w-[40px] h-[17px] rounded-sm bg-rose-400 dark:bg-rose-300'
                ),
              ],
            ),
            WDiv(
              className: 'w-[12px] h-[120px]'
            ),
            WDiv(
              className: 'flex flex-col justify-start w-[40px] h-[120px]',
              children: [
                WDiv(
                  className: 'w-[40px] h-[24px]'
                ),
                WDiv(
                  className: 'w-[40px] h-[14px] rounded-sm bg-rose-500 dark:bg-rose-400'
                ),
              ],
            ),
            WDiv(
              className: 'w-[12px] h-[120px]'
            ),
            WDiv(
              className: 'flex flex-col justify-start w-[40px] h-[120px]',
              children: [
                WDiv(
                  className: 'w-[40px] h-[38px]'
                ),
                WDiv(
                  className: 'w-[40px] h-[82px] rounded-t bg-indigo-500 dark:bg-indigo-400'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'absolute left-[0px] top-[119px] w-[300px] h-[1px] bg-gray-300 dark:bg-gray-600'
        ),
        WDiv(
          className: 'absolute left-[40px] top-[76px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
        ),
        WDiv(
          className: 'absolute left-[92px] top-[26px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
        ),
        WDiv(
          className: 'absolute left-[144px] top-[7px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
        ),
        WDiv(
          className: 'absolute left-[196px] top-[24px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
        ),
        WDiv(
          className: 'absolute left-[248px] top-[38px] w-[12px] h-[1px] bg-gray-400 dark:bg-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-start w-[300px] mt-2',
      children: [
        WDiv(
          className: 'flex flex-col items-center w-[40px]',
          children: [
            WText(
              '4.15',
              className: 'text-[10px] font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Q3',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
            ),
          ],
        ),
        WDiv(
          className: 'w-[12px] h-[4px]'
        ),
        WDiv(
          className: 'flex flex-col items-center w-[40px]',
          children: [
            WText(
              '+0.62',
              className: 'text-[10px] font-bold text-emerald-600 dark:text-emerald-300'
            ),
            WText(
              'NEW',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
            ),
          ],
        ),
        WDiv(
          className: 'w-[12px] h-[4px]'
        ),
        WDiv(
          className: 'flex flex-col items-center w-[40px]',
          children: [
            WText(
              '+0.24',
              className: 'text-[10px] font-bold text-emerald-600 dark:text-emerald-300'
            ),
            WText(
              'EXP',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
            ),
          ],
        ),
        WDiv(
          className: 'w-[12px] h-[4px]'
        ),
        WDiv(
          className: 'flex flex-col items-center w-[40px]',
          children: [
            WText(
              '-0.21',
              className: 'text-[10px] font-bold text-rose-600 dark:text-rose-300'
            ),
            WText(
              'CONTR',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
            ),
          ],
        ),
        WDiv(
          className: 'w-[12px] h-[4px]'
        ),
        WDiv(
          className: 'flex flex-col items-center w-[40px]',
          children: [
            WText(
              '-0.18',
              className: 'text-[10px] font-bold text-rose-600 dark:text-rose-300'
            ),
            WText(
              'CHURN',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
            ),
          ],
        ),
        WDiv(
          className: 'w-[12px] h-[4px]'
        ),
        WDiv(
          className: 'flex flex-col items-center w-[40px]',
          children: [
            WText(
              '4.62',
              className: 'text-[10px] font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Q4',
              className: 'text-[9px] font-bold tracking-wide text-gray-400 dark:text-gray-500 mt-1'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full mt-4 p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900',
      children: [
        WIcon(
          Icons.trending_up,
          className: 'text-base text-emerald-600 dark:text-emerald-300'
        ),
        WDiv(
          className: 'ml-2',
          child: WText(
            'Expansion outran churn for a third straight quarter',
            className: 'text-[11px] font-medium text-emerald-800 dark:text-emerald-100'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'w-full mt-4',
      child: WButton(
        className: 'flex flex-row items-center justify-center w-full py-3 rounded-xl bg-gray-900 dark:bg-white',
        child: WText(
          'Open revenue report',
          className: 'text-sm font-bold text-white dark:text-gray-900'
        ),
      ),
    ),
  ],
)
Stats
Views
8
Stars
0
Revisions
1
Size
10,312 chars
Created
Sep 13, 2026