Flutter Referral Reward Card with Invite Link and Tiers

A referral rewards card written in pure Wind className strings: progress toward the next reward, unlocked and locked tiers, earnings to date, and a copyable invite link. Every color carries its dark pair.

by Anılcan Çakır 32 views 0 stars 1 week ago Rev 1

Open in Playground Fork

Flutter Referral Reward Card with Invite Link and Tiers preview

main.dart

WDiv(
  className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-5',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              'Invite friends',
              className: 'text-gray-900 dark:text-white text-lg font-bold'
            ),
            WText(
              'Earn $10 for every signup',
              className: 'text-gray-500 dark:text-gray-400 text-xs'
            ),
          ],
        ),
        WDiv(
          className: 'w-12 h-12 rounded-2xl bg-amber-100 dark:bg-amber-950 flex flex-row items-center justify-center',
          child: WIcon(
            Icons.star,
            className: 'text-amber-500 dark:text-amber-300 text-2xl'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-2',
      children: [
        WText(
          '3 of 5 friends joined',
          className: 'text-gray-700 dark:text-gray-200 text-sm font-semibold'
        ),
        WText(
          '$30 earned',
          className: 'text-emerald-600 dark:text-emerald-400 text-sm font-bold'
        ),
      ],
    ),
    WDiv(
      className: 'w-full h-2 rounded-full bg-gray-200 dark:bg-gray-800 mb-6',
      child: WDiv(
        className: 'h-2 w-3/5 rounded-full bg-emerald-500 dark:bg-emerald-400',
        children: []
      ),
    ),
    WDiv(
      className: 'flex flex-col gap-3 mb-6 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center w-full',
          children: [
            WDiv(
              className: 'w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-950 flex flex-row items-center justify-center mr-3',
              child: WIcon(
                Icons.check,
                className: 'text-emerald-600 dark:text-emerald-400 text-base'
              ),
            ),
            WText(
              'First invite bonus',
              className: 'text-gray-700 dark:text-gray-200 text-sm'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center w-full',
          children: [
            WDiv(
              className: 'w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-950 flex flex-row items-center justify-center mr-3',
              child: WIcon(
                Icons.check,
                className: 'text-emerald-600 dark:text-emerald-400 text-base'
              ),
            ),
            WText(
              'Three friends unlocked',
              className: 'text-gray-700 dark:text-gray-200 text-sm'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center w-full',
          children: [
            WDiv(
              className: 'w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center mr-3',
              child: WIcon(
                Icons.star_outline,
                className: 'text-gray-400 dark:text-gray-500 text-base'
              ),
            ),
            WText(
              'Five friends: $50 bonus',
              className: 'text-gray-400 dark:text-gray-500 text-sm'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full p-1 pl-4 rounded-2xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
      children: [
        WText(
          'wind.dev/r/anil',
          className: 'text-gray-500 dark:text-gray-400 text-sm'
        ),
        WButton(
          className: 'px-4 py-2 rounded-xl bg-indigo-600 dark:bg-indigo-500',
          child: WText(
            'Copy link',
            className: 'text-white text-sm font-semibold'
          ),
        ),
      ],
    ),
  ],
)

Stats

Views: 32
Stars: 0
Revisions: 1
Size: 3,919 chars
Created: Jun 28, 2026