Flutter Transaction Activity List for Fintech Apps

A fintech activity feed listing recent transactions with category icons, merchant labels, and color-coded signed amounts. Styled entirely with Wind UI utility classes and dark mode ready.

Anılcan Çakır by Anılcan Çakır 21 views 0 stars 2 weeks ago Rev 1
Flutter Transaction Activity List for Fintech Apps preview
main.dart
WDiv(
  className: 'mx-auto max-w-sm flex flex-col rounded-2xl border bg-white border-gray-200 shadow-lg overflow-hidden dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between px-5 pt-5 pb-3',
      children: [
        WText(
          'Recent Activity',
          className: 'text-base font-bold text-gray-900 dark:text-white'
        ),
        WText(
          'See all',
          className: 'text-sm font-semibold text-indigo-600 dark:text-indigo-400'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-1 px-3 pb-3',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between rounded-xl px-2 py-2.5',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900',
                  child: WIcon(
                    Icons.trending_up,
                    className: 'text-emerald-600 dark:text-emerald-400 text-lg'
                  )
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Salary Deposit',
                      className: 'text-sm font-semibold text-gray-900 dark:text-white'
                    ),
                    WText(
                      'Acme Corp · Today',
                      className: 'text-xs text-gray-400 dark:text-gray-500'
                    ),
                  ]
                ),
              ]
            ),
            WText(
              '+$4,200',
              className: 'text-sm font-bold text-emerald-600 dark:text-emerald-400'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between rounded-xl px-2 py-2.5',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900',
                  child: WIcon(
                    Icons.shopping_bag,
                    className: 'text-violet-600 dark:text-violet-400 text-lg'
                  )
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Apple Store',
                      className: 'text-sm font-semibold text-gray-900 dark:text-white'
                    ),
                    WText(
                      'Electronics · Yesterday',
                      className: 'text-xs text-gray-400 dark:text-gray-500'
                    ),
                  ]
                ),
              ]
            ),
            WText(
              '-$129',
              className: 'text-sm font-bold text-gray-900 dark:text-white'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between rounded-xl px-2 py-2.5',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-3',
              children: [
                WDiv(
                  className: 'flex items-center justify-center w-10 h-10 rounded-full bg-sky-100 dark:bg-sky-900',
                  child: WIcon(
                    Icons.local_cafe,
                    className: 'text-sky-600 dark:text-sky-400 text-lg'
                  )
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Blue Bottle Coffee',
                      className: 'text-sm font-semibold text-gray-900 dark:text-white'
                    ),
                    WText(
                      'Dining · Mon',
                      className: 'text-xs text-gray-400 dark:text-gray-500'
                    ),
                  ]
                ),
              ]
            ),
            WText(
              '-$8.50',
              className: 'text-sm font-bold text-gray-900 dark:text-white'
            ),
          ],
        ),
      ],
    ),
  ],
)
Stats
Views
21
Stars
0
Revisions
1
Size
4,359 chars
Created
Jun 10, 2026