How to Build an Account Created Success Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/cta_button.dart';

/// Account Created success screen from the "bankee" UI kit.
///
/// A thumbs-up illustration over a centered "Account Created!" headline and
/// confirmation copy, with a Continue CTA pinned toward the bottom and a
/// rich-text Privacy Policy / Terms line beneath it.
///
/// Self-contained, pure Flutter. Bundles its exact design font (DM Sans) and
/// the exact thumbs-up illustration from the Figma source (an SVG that pure
/// Flutter cannot render, so it is bundled as a transparent PNG — the same
/// documented asset exception as the product_detail screen). Renders standalone
/// when pushed as a route.
class AccountCreatedScreen extends StatelessWidget {
  const AccountCreatedScreen({super.key});

  static const Color _navy = Color(0xFF1C1939);
  static const Color _subtitle = Color(0xCC1C1939); // #1C1939 @ 80%
  static const Color _primary = Color(0xFF7165E3);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: constraints.maxHeight),
                child: IntrinsicHeight(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(37, 63, 37, 24),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Center(
                          child: Image.asset(
                            'lib/screens/auth/account_created/images/thumbs_up.png',
                            width: 258,
                            height: 233,
                            fit: BoxFit.contain,
                          ),
                        ),
                        const SizedBox(height: 93),
                        const Text(
                          'Account Created!',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: 'DMSans',
                            fontSize: 35,
                            fontWeight: FontWeight.w700,
                            color: _navy,
                          ),
                        ),
                        const SizedBox(height: 21),
                        const Text(
                          'Dear user your account has been created '
                          'successfully. Continue to start using app',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: 'DMSans',
                            fontSize: 15,
                            height: 25 / 15,
                            color: _subtitle,
                          ),
                        ),
                        const Spacer(),
                        CtaButton(
                          label: 'Continue',
                          onPressed: () {},
                        ),
                        const SizedBox(height: 21),
                        const _TermsLine(),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

/// "by clicking start, you agree to our Privacy Policy / our Teams and
/// Conditions" — regular grey text with bold, underlined purple links.
class _TermsLine extends StatelessWidget {
  const _TermsLine();

  @override
  Widget build(BuildContext context) {
    const TextStyle base = TextStyle(
      fontFamily: 'DMSans',
      fontSize: 13,
      height: 25 / 13,
      fontWeight: FontWeight.w400,
      color: AccountCreatedScreen._subtitle,
    );
    const TextStyle link = TextStyle(
      fontFamily: 'DMSans',
      fontSize: 13,
      height: 25 / 13,
      fontWeight: FontWeight.w700,
      decoration: TextDecoration.underline,
      decorationColor: AccountCreatedScreen._primary,
      color: AccountCreatedScreen._primary,
    );
    return Text.rich(
      const TextSpan(
        style: base,
        children: <InlineSpan>[
          TextSpan(text: 'by clicking start, you agree to our '),
          TextSpan(text: 'Privacy Policy', style: link),
          TextSpan(text: '\nour '),
          TextSpan(text: 'Teams and Conditions', style: link),
        ],
      ),
      textAlign: TextAlign.center,
    );
  }
}