Wallet card with transaction list

import 'package:flutter/material.dart';

class WalletTx {
  const WalletTx(this.title, this.cents, this.at); // positive = money in
  final String title;
  final int cents;
  final DateTime at;
}

String formatMoney(int cents, {String symbol = '\$'}) {
  final abs = cents.abs();
  final whole = (abs ~/ 100).toString().replaceAllMapped(RegExp(r'\B(?=(\d{3})+(?!\d))'), (_) => ',');
  return '${cents < 0 ? '-' : ''}$symbol$whole.${(abs % 100).toString().padLeft(2, '0')}';
}

class WalletView extends StatelessWidget {
  const WalletView({super.key, required this.balanceCents, required this.transactions, this.onTopUp, this.onSend});
  final int balanceCents;
  final List<WalletTx> transactions;
  final VoidCallback? onTopUp, onSend;

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    return CustomScrollView(slivers: [
      SliverToBoxAdapter(
        child: Container(
          margin: const EdgeInsets.all(16),
          padding: const EdgeInsets.all(20),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            gradient: LinearGradient(
              begin: AlignmentDirectional.topStart,
              end: AlignmentDirectional.bottomEnd,
              colors: [scheme.primary, scheme.tertiary],
            ),
          ),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text('Balance', style: TextStyle(color: scheme.onPrimary.withValues(alpha: 0.8))),
            Text(formatMoney(balanceCents),
                style: Theme.of(context).textTheme.displaySmall?.copyWith(color: scheme.onPrimary)),
            const SizedBox(height: 12),
            Row(children: [
              FilledButton.tonalIcon(onPressed: onTopUp, icon: const Icon(Icons.add), label: const Text('Top up')),
              const SizedBox(width: 8),
              FilledButton.tonalIcon(onPressed: onSend, icon: const Icon(Icons.north_east), label: const Text('Send')),
            ]),
          ]),
        ),
      ),
      SliverList.separated(
        itemCount: transactions.length,
        separatorBuilder: (_, _) => const Divider(height: 1),
        itemBuilder: (context, i) {
          final t = transactions[i];
          final credit = t.cents >= 0;
          return ListTile(
            leading: CircleAvatar(child: Icon(credit ? Icons.south_west : Icons.north_east)),
            title: Text(t.title),
            subtitle: Text(MaterialLocalizations.of(context).formatShortDate(t.at)),
            trailing: Text(
              '${credit ? '+' : ''}${formatMoney(t.cents)}',
              style: TextStyle(fontWeight: FontWeight.w600, color: credit ? Colors.green.shade700 : scheme.onSurface),
            ),
          );
        },
      ),
    ]);
  }
}