How to Build a Wallet Splash Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/shield_logo.dart';

/// "Finco" splash / get-started screen from the Wallet App UI Kit: a full indigo
/// canvas with the centred shield brand mark, the wordmark, a two-line tagline,
/// and a white pill CTA pinned near the bottom.
///
/// Self-contained, pure Flutter. Bundles its exact design fonts (Inter,
/// Aileron, Poppins) and recreates the logo as a vector. Fully responsive — flex
/// spacers centre the brand mark on tall devices and a scroll fallback prevents
/// overflow on short ones. Renders standalone when pushed as a route.
class WalletSplashScreen extends StatelessWidget {
  const WalletSplashScreen({super.key});

  // Design tokens (from the kit's colors.xml + layout).
  static const Color _bg = Color(0xFF4F62C0);
  static const Color _ctaText = Color(0xFF2573D5);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _bg,
      body: SafeArea(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: constraints.maxHeight),
                child: IntrinsicHeight(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 24,
                      vertical: 24,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        const Spacer(flex: 5),
                        const ShieldLogo(),
                        const SizedBox(height: 19),
                        const Text(
                          'Finco',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: 'Inter',
                            fontSize: 35,
                            fontWeight: FontWeight.w700,
                            color: Colors.white,
                            height: 1.2,
                          ),
                        ),
                        const SizedBox(height: 20),
                        const Text(
                          'Bank, Finance and\nWallet UI Kit',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: 'Aileron',
                            fontSize: 20,
                            fontWeight: FontWeight.w400,
                            color: Colors.white,
                            height: 1.45,
                          ),
                        ),
                        const Spacer(flex: 6),
                        _GetStartedButton(
                          onTap: () => Navigator.maybePop(context),
                        ),
                        const Spacer(flex: 1),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

/// White rounded CTA — "Let's Get Started Now" — with a press feedback.
class _GetStartedButton extends StatefulWidget {
  const _GetStartedButton({required this.onTap});

  final VoidCallback onTap;

  @override
  State<_GetStartedButton> createState() => _GetStartedButtonState();
}

class _GetStartedButtonState extends State<_GetStartedButton> {
  bool _pressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _pressed = true),
      onTapUp: (_) => setState(() => _pressed = false),
      onTapCancel: () => setState(() => _pressed = false),
      onTap: widget.onTap,
      child: AnimatedScale(
        scale: _pressed ? 0.97 : 1,
        duration: const Duration(milliseconds: 150),
        child: Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(vertical: 19),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.10),
                blurRadius: 18,
                offset: const Offset(0, 8),
              ),
            ],
          ),
          child: const Text(
            'Let’s Get Started Now',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'Poppins',
              fontSize: 17,
              fontWeight: FontWeight.w600,
              color: WalletSplashScreen._ctaText,
              letterSpacing: -0.17,
            ),
          ),
        ),
      ),
    );
  }
}