How to Build an Empty Wallet State in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// "Empty Wallet" empty-state screen from the Empty States UI Kit: a centred
/// title ("Payment Methods"), a friendly cat-with-cards illustration, a short
/// supporting line, and a circular "+" action button pinned near the bottom to
/// add the first payment method.
///
/// Self-contained, pure Flutter. Bundles its exact design font (SF Compact
/// Text) and the kit's original illustration (converted to WebP). Fully
/// responsive — flex spacers centre the content on tall devices and a scroll
/// fallback prevents overflow on short ones. Renders standalone when pushed as
/// a route.
class EmptyWalletScreen extends StatelessWidget {
  const EmptyWalletScreen({super.key});

  static const Color _ink = Color(0xFF1B3554);
  static const Color _body = Color(0xFF344B67);
  static const Color _blue = Color(0xFF4476FF);
  static const String _font = 'Inter';
  static const String _image =
      'lib/screens/empty_states/empty_wallet/images/empty_wallet_cat.webp';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            // Illustration scales to the viewport width but stays within a
            // sensible range; height follows the artwork's 726:844 ratio.
            final double imgWidth =
                (constraints.maxWidth * 0.58).clamp(190.0, 300.0);
            final double imgHeight = imgWidth * (844 / 726);

            return SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: constraints.maxHeight),
                child: IntrinsicHeight(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        const Spacer(flex: 2),
                        const Text(
                          'Payment Methods',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: _font,
                            fontWeight: FontWeight.w500,
                            fontSize: 21,
                            height: 1.2,
                            color: _ink,
                          ),
                        ),
                        const Spacer(flex: 1),
                        Image.asset(
                          _image,
                          width: imgWidth,
                          height: imgHeight,
                          fit: BoxFit.contain,
                          filterQuality: FilterQuality.high,
                        ),
                        const Spacer(flex: 1),
                        const Text(
                          "You haven't added any payment methods yet.\n"
                          'Add a card to start sending and receiving money.',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: _font,
                            fontWeight: FontWeight.w500,
                            fontSize: 16,
                            height: 1.37,
                            color: _body,
                          ),
                        ),
                        const Spacer(flex: 3),
                        const _AddButton(),
                        const SizedBox(height: 34),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

/// Circular "+" button with a pressed-scale animation and a soft brand-blue
/// shadow, matching the kit's floating add action.
class _AddButton extends StatefulWidget {
  const _AddButton();

  @override
  State<_AddButton> createState() => _AddButtonState();
}

class _AddButtonState extends State<_AddButton> {
  bool _pressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _pressed = true),
      onTapUp: (_) => setState(() => _pressed = false),
      onTapCancel: () => setState(() => _pressed = false),
      onTap: () {},
      child: AnimatedScale(
        scale: _pressed ? 0.94 : 1,
        duration: const Duration(milliseconds: 150),
        child: Container(
          width: 64,
          height: 64,
          decoration: BoxDecoration(
            color: EmptyWalletScreen._blue,
            shape: BoxShape.circle,
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: EmptyWalletScreen._blue.withValues(alpha: 0.35),
                blurRadius: 18,
                offset: const Offset(0, 8),
              ),
            ],
          ),
          child: const Icon(Icons.add, color: Colors.white, size: 28),
        ),
      ),
    );
  }
}